在(zai)寫(xie)前面(mian)的小程序入(ru)門項(xiang)目(mu)時，發現有兩個(ge)很常(chang)用(yong)而且覺(jue)得也算比(bi)較重要的知識點，這(zhe)里記錄下：頁(ye)(ye)面(mian)數據(ju)綁(bang)定比(bi)如你的頁(ye)(ye)面(mian)需要顯示一個(ge)Hello字符(fu)串，這(zhe)個(ge)這(zhe)個(ge)字符(fu)串可能會(hui)(hui)根據(ju)某些情(qing)況會(hui)(hui)動態變(bian)化，這(zhe)個(ge)時候就需要進(jin)行數 ...
在寫前面(mian)的小程序入門(men)項目時，發(fa)現(xian)有兩個很(hen)常用而(er)且覺(jue)得也(ye)算(suan)比較重(zhong)要的知識點，這里記錄(lu)下：
比如你的頁面需要顯示一個Hello字(zi)符(fu)串(chuan)，這(zhe)(zhe)個這(zhe)(zhe)個字(zi)符(fu)串(chuan)可能會(hui)(hui)根據某些情況會(hui)(hui)動(dong)態變化(hua)，這(zhe)(zhe)個時候就需要進行(xing)數據綁(bang)定展(zhan)示(shi)了
在wxml文(wen)件布局(ju)如下：
|
1
|
<view>{{message}}</view>
|
在js中設置好變量如下：
|
1
2
3
4
5
6
|
Page({
data: {
message: "Hello",
number: 1
}
});
|
就這樣data里面(mian)的message屬性就可以通過view組(zu)件展示(shi)出來了，看了上面(mian)的寫法，也很容(rong)易明白，組(zu)件展示(shi)數據信息時是通過
|
1
|
{{屬性名稱}}
|
這的寫(xie)法(fa)與data里面的屬(shu)性進行(xing)綁定的。
如果在數據信息展示出來后，后面要更新這個屬性信息的展示的話，就不能簡單的通過this.data.message="Hello World"來實現，因為這樣是無法達到改變數據信息的目的的。小程序中改變數據信息要求使用函數setData()函數來實現。例如上面我們修改message`的值的話需要進行如下操作：
|
1
2
3
|
this.setData({
message: "Hello World"
});
|
通過該函數更(geng)(geng)新(xin)之后，頁面(mian)上(shang)會自動(dong)的更(geng)(geng)新(xin)展示，而不需要(yao)我們(men)去進行額(e)外的操作，微信將數據的展示與更(geng)(geng)新(xin)進行了(le)分離(li)，只要(yao)你使用特定的方法(fa)修(xiu)改屬性值，界面(mian)就會自動(dong)更(geng)(geng)新(xin)，這樣的實方式比起android中的手動(dong)通知更(geng)(geng)新(xin)要(yao)方便很多
小程序中從一個頁面跳轉到另外一個頁面有幾種方式，這里我以wx.navigateTo()跳轉進行說明： 我從index頁面跳轉到logs頁面，很簡單
|
1
2
3
|
wx.navigateTo({
url: '../log/logs
})
|
那如果我在跳轉的同時要向logs頁面傳(chuan)遞參數該怎么辦(ban)呢，也很簡(jian)單(dan)，直接在url后拼接相關(guan)參數即可(與http中的get請求的傳(chuan)參方式是(shi)一樣的)
|
1
2
3
|
wx.navigateTo({
url: '../video/video?message=' + this.data.message + "&number=" + this.data.number
})
|
參數是傳過去了，那在logs頁面(mian)中該如何(he)獲取這些參(can)數呢(ni)？其實(shi)也很簡單：
|
1
2
3
4
|
onLoad: function (options) {
var message = options.message;
var number = options.number;
}
|
如上所示，我們在新頁面的onLoad函數(shu)(shu)中就可以直接獲(huo)取到傳(chuan)遞過(guo)來的參數(shu)(shu)信息。
在(zai)(zai)我前面的文章 微(wei)信(xin)小程(cheng)序之入門(men)項目中點擊視頻列(lie)表中的某一項跳轉到(dao)視頻播放(fang)頁面，而(er)在(zai)(zai)點擊列(lie)表中的某一項時(shi)，需要(yao)獲取當前項的數據(ju)信(xin)息，如果我想通過點擊事件(jian)就將這些數據(ju)信(xin)息作為參數傳遞(di)過去(qu)該怎么做呢(ni)？代碼(ma)如下：
|
1
|
<view wx:for="{{tab.videos}}" wx:for-item="video" data-video="{{video}}" wx:key="*this" bindtap="onItemClick">
|
上面的代碼通過for循環實現了一個列表，并為每一項綁定了點擊事件，而view組件實現中有一個屬性是微信沒有提供的：data-video，這個屬性是我們手動添加上去的，微信中如果要在wxml中傳遞參數到點擊事件中的話則可以通過data-**的形式進行傳參(**號即為參數名稱)，此處是將每一項數據video作為參數進行傳遞，同時參數名稱為video
接下來再來看看點擊事件中如何獲取該video信息：
|
1
2
3
4
5
|
onItemClick: function (event) {
var video = event.currentTarget.dataset.video;
var url = video.url;
var title = video.title;
}
|
沒錯，就像代碼中寫的，在點擊事件中我們可以通過event.currentTarget.dataset獲取傳過來的video信息，這個參數在調試的(de)時候也是(shi)可以(yi)通(tong)過event對象看到的(de)
