老胡--足球視頻小程序開發(fā)之頁面數(shù)據(jù)綁定及跳轉(zhuǎn)傳參
在寫前面的小程序入門項(xiàng)目時(shí)，發(fā)現(xiàn)有兩個(gè)很常用而且覺得也算比較重要的知識點(diǎn)，這里記錄下：頁面數(shù)據(jù)綁定比如你的頁面需要顯示一個(gè)Hello字符串，這個(gè)這個(gè)字符串可能會根據(jù)某些情況會動(dòng)態(tài)變化，這個(gè)時(shí)候就需要進(jìn)行數(shù) ...
在寫前面的小程序入門項(xiàng)目時(shí)，發(fā)現(xiàn)有兩個(gè)很常用而且覺得也算比較重要的知識點(diǎn)，這里記錄下：
頁面數(shù)據(jù)綁定
比如你的頁面需要顯示一個(gè)Hello字符串，這個(gè)這個(gè)字符串可能會根據(jù)某些情況會動(dòng)態(tài)變化，這個(gè)時(shí)候就需要進(jìn)行數(shù)據(jù)綁定展示了
在wxml文件布局如下：
|
1
|
<view>{{message}}</view>
|
在js中設(shè)置好變量如下：
|
1
2
3
4
5
6
|
Page({
data: {
message: "Hello",
number: 1
}
});
|
就這樣data里面的message屬性就可以通過view組件展示出來了，看了上面的寫法，也很容易明白，組件展示數(shù)據(jù)信息時(shí)是通過
|
1
|
{{屬性名稱}}
|
這的寫法與data里面的屬性進(jìn)行綁定的。
如果在數(shù)據(jù)信息展示出來后，后面要更新這個(gè)屬性信息的展示的話，就不能簡單的通過this.data.message="Hello World"來實(shí)現(xiàn)，因?yàn)檫@樣是無法達(dá)到改變數(shù)據(jù)信息的目的的。小程序中改變數(shù)據(jù)信息要求使用函數(shù)setData()函數(shù)來實(shí)現(xiàn)。例如上面我們修改message`的值的話需要進(jìn)行如下操作：
|
1
2
3
|
this.setData({
message: "Hello World"
});
|
通過該函數(shù)更新之后，頁面上會自動(dòng)的更新展示，而不需要我們?nèi)ミM(jìn)行額外的操作，微信將數(shù)據(jù)的展示與更新進(jìn)行了分離，只要你使用特定的方法修改屬性值，界面就會自動(dòng)更新，這樣的實(shí)方式比起android中的手動(dòng)通知更新要方便很多
頁面跳轉(zhuǎn)參數(shù)
小程序中從一個(gè)頁面跳轉(zhuǎn)到另外一個(gè)頁面有幾種方式，這里我以wx.navigateTo()跳轉(zhuǎn)進(jìn)行說明： 我從index頁面跳轉(zhuǎn)到logs頁面，很簡單
|
1
2
3
|
wx.navigateTo({
url: '../log/logs
})
|
那如果我在跳轉(zhuǎn)的同時(shí)要向logs頁面?zhèn)鬟f參數(shù)該怎么辦呢，也很簡單，直接在url后拼接相關(guān)參數(shù)即可(與http中的get請求的傳參方式是一樣的)
|
1
2
3
|
wx.navigateTo({
url: '../video/video?message=' + this.data.message + "&number=" + this.data.number
})
|
參數(shù)是傳過去了，那在logs頁面中該如何獲取這些參數(shù)呢？其實(shí)也很簡單：
|
1
2
3
4
|
onLoad: function (options) {
var message = options.message;
var number = options.number;
}
|
如上所示，我們在新頁面的onLoad函數(shù)中就可以直接獲取到傳遞過來的參數(shù)信息。
點(diǎn)擊View傳參
在我前面的文章 微信小程序之入門項(xiàng)目中點(diǎn)擊視頻列表中的某一項(xiàng)跳轉(zhuǎn)到視頻播放頁面，而在點(diǎn)擊列表中的某一項(xiàng)時(shí)，需要獲取當(dāng)前項(xiàng)的數(shù)據(jù)信息，如果我想通過點(diǎn)擊事件就將這些數(shù)據(jù)信息作為參數(shù)傳遞過去該怎么做呢？代碼如下：
|
1
|
<view wx:for="{{tab.videos}}" wx:for-item="video" data-video="{{video}}" wx:key="*this" bindtap="onItemClick">
|
上面的代碼通過for循環(huán)實(shí)現(xiàn)了一個(gè)列表，并為每一項(xiàng)綁定了點(diǎn)擊事件，而view組件實(shí)現(xiàn)中有一個(gè)屬性是微信沒有提供的：data-video，這個(gè)屬性是我們手動(dòng)添加上去的，微信中如果要在wxml中傳遞參數(shù)到點(diǎn)擊事件中的話則可以通過data-**的形式進(jìn)行傳參(**號即為參數(shù)名稱)，此處是將每一項(xiàng)數(shù)據(jù)video作為參數(shù)進(jìn)行傳遞，同時(shí)參數(shù)名稱為video
接下來再來看看點(diǎn)擊事件中如何獲取該video信息：
|
1
2
3
4
5
|
onItemClick: function (event) {
var video = event.currentTarget.dataset.video;
var url = video.url;
var title = video.title;
}
|
沒錯(cuò)，就像代碼中寫的，在點(diǎn)擊事件中我們可以通過event.currentTarget.dataset獲取傳過來的video信息，這個(gè)參數(shù)在調(diào)試的時(shí)候也是可以通過event對象看到的
