小程序模板網(wǎng)

老胡--足球視頻小程序開(kāi)發(fā)之頁(yè)面數(shù)據(jù)綁定及跳轉(zhuǎn)傳參

發(fā)布時(shí)間:2017-12-25 11:42 所屬欄目:小程序開(kāi)發(fā)教程

在寫(xiě)前面的小程序入門(mén)項(xiàng)目時(shí),發(fā)現(xiàn)有兩個(gè)很常用而且覺(jué)得也算比較重要的知識(shí)點(diǎn),這里記錄下:頁(yè)面數(shù)據(jù)綁定比如你的頁(yè)面需要顯示一個(gè)Hello字符串,這個(gè)這個(gè)字符串可能會(huì)根據(jù)某些情況會(huì)動(dòng)態(tài)變化,這個(gè)時(shí)候就需要進(jìn)行數(shù) ...

 
 
 

在寫(xiě)前面的小程序入門(mén)項(xiàng)目時(shí),發(fā)現(xiàn)有兩個(gè)很常用而且覺(jué)得也算比較重要的知識(shí)點(diǎn),這里記錄下:

頁(yè)面數(shù)據(jù)綁定

比如你的頁(yè)面需要顯示一個(gè)Hello字符串,這個(gè)這個(gè)字符串可能會(huì)根據(jù)某些情況會(huì)動(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屬性就可以通過(guò)view組件展示出來(lái)了,看了上面的寫(xiě)法,也很容易明白,組件展示數(shù)據(jù)信息時(shí)是通過(guò)


							
1

							
{{屬性名稱}}

 

這的寫(xiě)法與data里面的屬性進(jìn)行綁定的。

如果在數(shù)據(jù)信息展示出來(lái)后,后面要更新這個(gè)屬性信息的展示的話,就不能簡(jiǎn)單的通過(guò)this.data.message="Hello World"來(lái)實(shí)現(xiàn),因?yàn)檫@樣是無(wú)法達(dá)到改變數(shù)據(jù)信息的目的的。小程序中改變數(shù)據(jù)信息要求使用函數(shù)setData()函數(shù)來(lái)實(shí)現(xiàn)。例如上面我們修改message`的值的話需要進(jìn)行如下操作:


							
1
2
3

							
this.setData({
message: "Hello World"
});

通過(guò)該函數(shù)更新之后,頁(yè)面上會(huì)自動(dòng)的更新展示,而不需要我們?nèi)ミM(jìn)行額外的操作,微信將數(shù)據(jù)的展示與更新進(jìn)行了分離,只要你使用特定的方法修改屬性值,界面就會(huì)自動(dòng)更新,這樣的實(shí)方式比起android中的手動(dòng)通知更新要方便很多

頁(yè)面跳轉(zhuǎn)參數(shù)

小程序中從一個(gè)頁(yè)面跳轉(zhuǎn)到另外一個(gè)頁(yè)面有幾種方式,這里我以wx.navigateTo()跳轉(zhuǎn)進(jìn)行說(shuō)明: 我從index頁(yè)面跳轉(zhuǎn)到logs頁(yè)面,很簡(jiǎn)單


							
1
2
3

							
wx.navigateTo({
url: '../log/logs
})

那如果我在跳轉(zhuǎn)的同時(shí)要向logs頁(yè)面?zhèn)鬟f參數(shù)該怎么辦呢,也很簡(jiǎn)單,直接在url后拼接相關(guān)參數(shù)即可(與http中的get請(qǐng)求的傳參方式是一樣的)


							
1
2
3

							
wx.navigateTo({
url: '../video/video?message=' + this.data.message + "&number=" + this.data.number
})

參數(shù)是傳過(guò)去了,那在logs頁(yè)面中該如何獲取這些參數(shù)呢?其實(shí)也很簡(jiǎn)單:


							
1
2
3
4

							
onLoad: function (options) {
var message = options.message;
var number = options.number;
}

如上所示,我們?cè)谛马?yè)面的onLoad函數(shù)中就可以直接獲取到傳遞過(guò)來(lái)的參數(shù)信息。

點(diǎn)擊View傳參

在我前面的文章 微信小程序之入門(mén)項(xiàng)目中點(diǎn)擊視頻列表中的某一項(xiàng)跳轉(zhuǎn)到視頻播放頁(yè)面,而在點(diǎn)擊列表中的某一項(xiàng)時(shí),需要獲取當(dāng)前項(xiàng)的數(shù)據(jù)信息,如果我想通過(guò)點(diǎn)擊事件就將這些數(shù)據(jù)信息作為參數(shù)傳遞過(guò)去該怎么做呢?代碼如下:


							
1

							
<view wx:for="{{tab.videos}}" wx:for-item="video" data-video="{{video}}" wx:key="*this" bindtap="onItemClick">

上面的代碼通過(guò)for循環(huán)實(shí)現(xiàn)了一個(gè)列表,并為每一項(xiàng)綁定了點(diǎn)擊事件,而view組件實(shí)現(xiàn)中有一個(gè)屬性是微信沒(méi)有提供的:data-video,這個(gè)屬性是我們手動(dòng)添加上去的,微信中如果要在wxml中傳遞參數(shù)到點(diǎn)擊事件中的話則可以通過(guò)data-**的形式進(jìn)行傳參(**號(hào)即為參數(shù)名稱),此處是將每一項(xiàng)數(shù)據(jù)video作為參數(shù)進(jìn)行傳遞,同時(shí)參數(shù)名稱為video

接下來(lái)再來(lái)看看點(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;
}

沒(méi)錯(cuò),就像代碼中寫(xiě)的,在點(diǎn)擊事件中我們可以通過(guò)event.currentTarget.dataset獲取傳過(guò)來(lái)的video信息,這個(gè)參數(shù)在調(diào)試的時(shí)候也是可以通過(guò)event對(duì)象看到的



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18245.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢