微信小程序的頁面分別由四個文件組成:
1..js(邏輯處理文件):負責頁面邏輯內容的處理,遵循js語言框架。
2..json(配置文件):用來設置頁面的窗口內容,遵循JSON語法規范。
3..wxml(頁面結構文件或視圖文件):用於頁面可視化組件的組織和描述,語法結構類似於xml,與html格式差別較大。
4..wxss(樣式文件):兼容CSS語法規范。
數據綁定:視覺層數據與邏輯層數據通信的方法,也就是將一個用戶界面元素的屬性綁定到一個邏輯文件的對象實例上的某個屬性的方法。在用戶與視覺界面進行交互時,視覺界面數據改變,由視覺界面傳遞至邏輯層面更改數據(如輸入框輸入數據)。相反,當邏輯層數據更改后,也會即使更改視覺層數據(如網絡數據的獲取和展示)。數據綁定使用一種叫做Mustache語法的形式,是將屬性變量用雙層花括號({{}})括起來的形式進行綁定,可以作用於內容、組件屬性、控制屬性、關鍵字的綁定。
1.數據的簡單綁定:
<!--index.wxml--> <view>{{text}}</view>//文本內容的綁定 //index.js Page({ data: { text:'hello 打字學英語!' } })
2.組件屬性綁定:
//index.wxml <button class='{{item}}' bindtap='clickme'>按鈕</button> //index.wxss .first{ width: 250rpx; height: 100rpx; background-color: red; } .second{ width: 200rpx; height: 200rpx; background-color: green; border-radius: 100rpx; } //index.js data: { checked:true, item:'first' }, clickme:function(event){ this.data.checked = !this.data.checked; if(this.data.checked){ this.data.item = 'first'; } else{ this.data.item = 'second'; } this.setData({ item: this.data.item }) }
3.運算綁定:
<view hidden='{{type?true:false}}'>Hidden</view>
4.控制屬性的綁定:
在WXML中,我們用wx:if="{{condition}}"控制屬性來判斷是否需要渲染一個代碼塊。
當myKey為true時,渲染模塊,顯示view。為false時,銷毀模塊,不顯示view。
//index.wxml
<view wx:if="{{myKey}}">你的名字</view>
//index.js
data: {
myKey:false, },
在wx:if語句中可以用wx:elif(其他條件判斷)和wx:else(表示判斷的一個分支)來添加else塊,如果通過一條判斷語決定幾個組件標簽是否需要渲染,可以使用<block>標簽包裝起來進行渲染。
<view wx:if="{{length>=7}}">this is a dog</view> <view wx:elif="{{length<3}}">this is a cat</view> <view wx:else>this is a lion</view>
5.wx:for列表渲染語句
默認數組的當前項的下標變量名默認為index,數組當前項的變量名默認為item:
index.wxml <view wx:for="{{array}}">{{index}}:{{item.info}}</view> index.js data:{ array:[{ info:"墨雪" },{ info:"曉風殘月" }] }
在進行組件的列表渲染時,使用wx;for-item屬性可以指定數組當前元素的變量名,使用wx:for-index屬性可以指定數組當前下標的變量名:
<view wx:for="{{array}}" wx:for-index='idx' wx:for-item='itemName'>{{idx}}:{{itemName.info}}</view>
wx:key="字符串"
這個”字符串”代表在 for 循環的 array 中 item 的某個“屬性”該“屬性” 的值需要是列表中唯一的字符串或數字,且不能動態改變。用於被遍歷的組件需要多個屬性的時候。
//index.js data: { myList: [ { number: 1, unique: "unique1" }, { number: 2, unique: "unique2" }, { number: 3, unique: "unique3" }, { number: 4, unique: "unique4" }, ] } //index.wxml <view wx:for="{{myList}}" wx:key="unique" >{{item.unique}}</view> <view wx:for="{{myList}}" wx:key="number" >{{item.number}}</view>
保留關鍵字”*this”代表在 for 循環中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字,用於組件僅需要一個屬性,且屬性值唯一。
//index.js data: { numberArray: [1, 2, 3, 4], stringArray:['aaa','ccc','fff','good'] } //index.wxml <view wx:for="{{numberArray}}" wx:key="*this" >{{item}}</view> <view value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this">{{item}}</view>