足球視頻小程序開發-頁面數據綁定及跳轉傳參

在寫前面的小程序入門項目時，發現有兩個很經常使用並且以爲也算比較重要的知識點，這裏記錄下：

頁面數據綁定

好比你的頁面須要顯示一個Hello字符串，這個這個字符串可能會根據某些狀況會動態變化，這個時候就須要進行數據綁定展現了

在wxml文件佈局以下：

1	<view>{{message}}</view>

在js中設置好變量以下：

1 2 3 4 5 6

Page({ data: { message: "Hello", number: 1 } });

就這樣data裏面的message屬性就能夠經過view組件展現出來了，看了上面的寫法，也很容易明白，組件展現數據信息時是經過

1

{{屬性名稱}}

這的寫法與data裏面的屬性進行綁定的。

若是在數據信息展現出來後，後面要更新這個屬性信息的展現的話，就不能簡單的經過this.data.message="Hello World"來實現，由於這樣是沒法達到改變數據信息的目的的。小程序中改變數據信息要求使用函數setData()函數來實現。例如上面咱們修改message`的值的話須要進行以下操做：

1 2 3

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

經過該函數更新以後，頁面上會自動的更新展現，而不須要咱們去進行額外的操做，微信將數據的展現與更新進行了分離，只要你使用特定的方法修改屬性值，界面就會自動更新，這樣的實方式比起android中的手動通知更新要方便不少

頁面跳轉參數

小程序中從一個頁面跳轉到另一個頁面有幾種方式，這裏我以wx.navigateTo()跳轉進行說明：
我從index頁面跳轉到logs頁面，很簡單

1 2 3

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

那若是我在跳轉的同時要向logs頁面傳遞參數該怎麼辦呢，也很簡單，直接在url後拼接相關參數便可(與http中的get請求的傳參方式是同樣的)

1 2 3

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

參數是傳過去了，那在logs頁面中該如何獲取這些參數呢？其實也很簡單：

1 2 3 4

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

如上所示，咱們在新頁面的onLoad函數中就能夠直接獲取到傳遞過來的參數信息。

點擊View傳參

在我前面的文章 微信小程序之入門項目中點擊視頻列表中的某一項跳轉到視頻播放頁面，而在點擊列表中的某一項時，須要獲取當前項的數據信息，若是我想經過點擊事件就將這些數據信息做爲參數傳遞過去該怎麼作呢？代碼以下：

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信息，這個參數在調試的時候也是能夠經過event對象看到的.