百度智能小程序 開發(fā).swan文件

這部分是每個(gè)智能小程序頁面的展現(xiàn)模板，類似于 Web 開發(fā)中的 HTML，SWAN 模板中使用的標(biāo)簽均為 SWAN 組件規(guī)定的標(biāo)簽。

代碼示例

<view s-for="item in items" class="single-item" bind:tap="oneItemClick" bind:touchstart="oneItemTouchStart" bind:touchmove="oneItemTouchmove" bind:touchcancel="oneItemTouchcancel" bind:touchend="oneItemTouchEnd">
    <image src="{{item.imgsrc}}" class="single-img"></image>
    <view class="single-text-area">
        <text class="single-title">
        {{item.title}}
    </text>
    <view s-if="{{item.tags}}" class="tag-area">
        <text s-for="tag in item.tags" class="{{tag.className}}">
            {{tag.content}}
        </text>
    </view>
    </view>
</view>
<view class="view-more" bind:tap="loadMore">
    <text>點(diǎn)擊加載更多</text>
</view>

標(biāo)簽可以擁有屬性，需要注意的是，swan 中的屬性是大小寫敏感的，也就是說 class 和 Class 在 swan 中是不同的屬性。

代碼示例 

<text class="wrap">hello world</text>
<text Class="wrap">hello world</text>

一個(gè)文件夾可以有兩個(gè) swan 文件。

代碼示例 

基礎(chǔ)數(shù)據(jù)綁定

代碼示例

<!-- xxx.swan -->
<view>
    Hello My {{ name }}
</view>

// xxx.js
Page({
    data: {
    name: 'SWAN'
    }
});

循環(huán)

開發(fā)者可以通過在元素上添加s-for指令，來渲染一個(gè)列表。

代碼示例

<view>
    <view s-for="p in persons">
    {{p.name}}
    </view>
</view>

Page({
    data: {
    persons: [
        {name: 'superman'},
        {name: 'spiderman'}
    ]
    }
});

條件

開發(fā)者可以通過在元素上添加s-if指令，來在視圖層進(jìn)行邏輯判斷：

代碼示例

<view s-if="is4G">4G</view>
<view s-elif="isWifi">Wifi</view>
<view s-else>Other</view>

Page({
    data: {
    is4G: true,
    isWifi: false
    }
});

事件

事件處理

開發(fā)者可以使用bind: + 事件名來進(jìn)行事件綁定

代碼示例

<view class="view-more" bind:tap="loadMore">
    點(diǎn)擊加載更多
</view>

Page({
    loadMore: function () {
    console.log('加載更多被點(diǎn)擊');
    }
});

目前支持的事件類型有：

事件對(duì)象

當(dāng)開發(fā)者綁定方法到事件，事件觸發(fā)時(shí)，SWAN 會(huì)給觸發(fā)的方法傳遞事件對(duì)象，事件對(duì)象因事件不同而不同，目前基礎(chǔ)的事件對(duì)象結(jié)構(gòu)為：

dataset

開發(fā)者可以在組件中自定義數(shù)據(jù)，并在事件發(fā)生時(shí)，由 SWAN 所在事件對(duì)象中，傳遞給綁定函數(shù)。

代碼示例

<view data-swan="1" bind:tap="viewtap">dataset-test</view>

Page({
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 輸出1
    }
});

屬性值也可以動(dòng)態(tài)的去改變，有所不同的是，屬性值必須被包裹在雙引號(hào)中, 且引號(hào)可加可不加

代碼示例

<view data-swan={{test}} bind:tap="viewtap">dataset-test</view>
// 同<view data-swan="{{test}}" bind:tap="viewtap">dataset-test</view>

Page({
    data: {
        test: 1
    },
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 輸出1
    }
});

需要注意的是變量名是大小寫敏感的，也就是說 test 和 Test 是兩個(gè)不同的變量。

代碼示例

<view data-swan="{{test}}" bind:tap="viewtap">dataset-test</view>

Page({
    data: {
        test: 1,
        Test: 2
    },
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 輸出1
    }
});

touches

開發(fā)者在接收到觸摸類事件后，在事件對(duì)象上，可以接收到當(dāng)前停留在屏幕上的觸摸點(diǎn)。

Touch 對(duì)象

代碼示例

 <view bind:touchstart="viewtouchstart">viewtouchstart</view>

Page({
    viewtouchstart: function (event) {
        console.log('value is:', event.touches);
        // 輸出 clientX: 44，clientX: 47，pageX: 44, pageY: 47
    }
});