小程序開發入門教程

數據綁定

微信小程序頁面渲染時,框架會將WXML文件同對應的Page的data進行綁定,在頁面中我們可以直接使用data的屬性,其使用的語法是Mustache語法,也就是使用雙大括號將變量或簡單的運算規則包裹起來,實現的主要渲染方式有以下幾種:

簡單綁定

簡單綁定就是使用Mustache語法(雙大括號)將變量包起來,在模版中直接作為字符串輸出使用,可以用于內容、組件屬性、控制屬性、關鍵字等輸出,其中關鍵字輸出是指將JavaScript中的關鍵字按照其真值輸出。我們還是以之前建立的測試項目為例,新建一個test頁面,其test.wxml內容如下:

<!--pages/test/test.wxml--><!-- 作為內容直接輸出 --><view>{{content}}</view><!-- 作為屬性輸出 --><view style="border: {{border}}">作為屬性渲染</view><!-- 關鍵字 --><checkbox checked="{{false}}"></checkbox>

test.json內容如下

Page({    /**     * 頁面的初始數據     */    data: {        content: '作為內容',        border: 'solid 1px #f00',        showContent: 'false'    },    /**     * 生命周期函數--監聽頁面加載     */    onLoad: function (options) {    },})

最后的運行結果如下

需要注意的是組件屬性為boolean類型時,不要直接寫checked=“false”,這樣checkde的值是一個“flase”字符串,轉換成boolean類型后其代表true,這種應該使用關鍵字輸出checked=“{{false}}”。

運算

在{{}}中不僅可以直接顯示數據,還支持一些簡單的運算如三元運算、算數運算、判斷邏輯、字符串運算。還是以test頁面為例,其test.wxml如下

<!--pages/test/test.wxml--><!-- 三元表達式 --><view>{{showContent ? '顯示文本' : '不顯示文本'}}</view><!-- 算數運算符 --><view>{{num1 + num2}} + 1 + {{num3}} = ?</view><!--字符串運算 --><view>{{"name : " + name}}</view><!-- 邏輯判斷 --><view>{{num3 > 3}}</view><!-- 數據路徑運算 --><view>{{student.age}}{{myArray[0]}}</view>

test.js如下

Page({    /**     * 頁面的初始數據     */    data: {        showContent:false,        num1 : 1,        num2 : 2,        num3 : 3,        name : 'QStack',        student : {            age : 12        },        myArray : ['arr1', 'arr2']    },    /**     * 生命周期函數--監聽頁面加載     */    onLoad: function (options) {    },})

最終結果如下

組合

data中數據可以在模版再次組合成新的數據結構,這種組合常常在數組或對象中使用,數組的組合比較簡單,對于對象的組合常用于模版中,我們下一篇文章再仔細介紹,數組的組合就是直接將值放置到數組的某個下標下:

<!-- 數組組合--><view>{{[myValue, 2, 3, "string"]}}</view>

Page({    /**     * 頁面的初始數據     */    data: {        myValue : 1,    },    /**     * 生命周期函數--監聽頁面加載     */    onLoad: function (options) {    },})

其最后的結果為

1, 2, 3, string

條件渲染

wx:if

除了簡單的數據綁定,常常還會使用邏輯分支,通過邏輯分支控制是否渲染該部分,使用wx:if="{{判斷條件}}"判斷是否渲染,如果判斷條件為真則渲染該代碼塊,反之則不渲染。

<view wx:if="{{showContent}}" >{{[myValue, 2, 3, "string"]}}</view>

Page({    /**     * 頁面的初始數據     */    data: {        myValue : 1,        showContent : false    },    /**     * 生命周期函數--監聽頁面加載     */    onLoad: function (options) {    },})

如上代碼則不會渲染,與此同時WXML也支持使用wx:elif和wx:else,如下

<view wx:if="{{showContent}}" >{{1}}</view><view wx:elif="{{showContent}}" >{{2}}</view><view wx:else="{{!showContent}}" >{{3}}</view>

block wx:if

wx:if是一個控制屬性,可以加在任何組件上,但是如果想要控制多個控件但是不想影響布局,則可以使用block:if,block不是一個組件而是一個包裝元素,在渲染過程中不做任何渲染,由屬性控制。

wx:if與hidden

wx:if是控制是否渲染,hidden是控制是否顯示,無論hidden是什么值都會調用渲染線程去渲染組件。hidden適用于狀態頻繁切換的場景,避免重復渲染影響性能。

列表渲染

組件的wx:for控制屬性用于遍歷數組,重復渲染組件,在遍歷過程中當前項的下標變量默認為index,數組當前項變量名默認為item,如:

<view wx:for="{{myArray}}">{{index}} : {{item}}</view>

// pages/test/test.jsPage({    /**     * 頁面的初始數據     */    data: {        myArray : [0, 1, 2],    },    /**     * 生命周期函數--監聽頁面加載     */    onLoad: function (options) {    },})

index、item變量名可以通過wx:for-index、wx:for-item屬性修改,在普通遍歷中沒有必要修改index和item,當wx:for嵌套使用時就有必要設置變量名,避免變量名重復,如下面遍歷一個二維數組。

<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem">    <block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem">        {{subItem}}    </block></view>

// pages/test/test.jsPage({    /**     * 頁面的初始數據     */    data: {        myArray : [            [1, 2, 3],            [4, 5, 6],            [7, 8, 9]        ]    },    /**     * 生命周期函數--監聽頁面加載     */    onLoad: function (options) {    },})

最后

如果你覺得此文對你有一丁點幫助,點個贊?；蛘呖梢约尤胛业拈_發交流群:1025263163相互學習,我們會有專業的技術答疑解惑

如果你覺得這篇文章對你有點用的話,麻煩請給我們的開源項目點點star:http://github.crmeb.net/u/defu不勝感激?!

完整源碼下載地址:https://market.cloud.tencent.com/products/33276

PHP學習手冊:https://doc.crmeb.com技術交流論壇:https://q.crmeb.com