微信小程序開發學習--頁面事件和數據綁定

數據綁定 

微信小程序的數據綁定與vue相似，數據來源是通過js 中的data來綁定

• 在js的page中定義數據，數據格式不限制，定義如下：
• 在頁面中訪問數據的時候用{{}}符號調用這些數據即可，並且這些數據在js的函數中可以使用setData()函數來改變數據，具體函數可參看下面的bingChange函數 （注意：在頁面中復制為true和false的時候必須加上{{}}否則不識別）

 data: {
    open: false , 
    src:'',
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    system:{},
    item:[

    ],

　　　　currentTab:0,

}

　　bindChange: function (e) {

　　var that = this;

　　that.setData({

　　currentTab: e.detail.current

　　});

　},

數據的操作

       在頁面的操作中，我們需要對data中的數據進行增刪改查來實現一些功能，但是由於微信小程序的數據是單向綁定的，所以我們在操作完數據后需要用setData函數來更新視圖，顯示的內容才能改變，而setData函數也比較特殊，只支持key-value數據操作，這樣操作就比較麻煩。（注：在刪除和修改的操作中我們需要知道所修改和刪除的數據在數組的位置，我用的方法是在循環讀出數組的時候，在每個數據上設置了一個id就是數據的索引）

     我的數據如下：

page({
     data:{
　　　wenzhang:[
　　　　{
　　　　　　name:'隨心遠行',
　　　　　　collection: 2,
　　　　　　collected:false,
　　　　　　collSrc:'/images/use_sc.png',
　　　　　　reading: 1,
　　　　　　date: '2016-8-13'
　　　　},
　　　　{
　　　　　　name: '開心麻花',
　　　　　　collection: 6,
　　　　　　collSrc:'/images/use_sc.png',
　　　　　　collected:false,
　　　　　　reading: 3,
　　　　　　date:'2017-8-13'
　　　　}]
     }
    })

1、添加

　 可以使用js的push，將要插入的數據插入，但是如果有向前如或者向后插入的話可以用js的concat()來實現

//向前增加數據
  add_before:function (){
//要增加的數組
var newarray = [{

　　　name:'隨心遠行', 　　　collection: 2, 　　　collected:false, 　　　collSrc:'/images/use_sc.png', 　　　reading: 1, 　　　date: '2016-8-13'

 }]; //使用concat()來把兩個數組合拼起來 
this.data.wenzhang = newarray.concat(this.data.wenzhang ); //將合拼之后的數據，發送到視圖層，即渲染頁面 //大伙請記錄，修改了數據后，一定要再次執行`this.setData()`，頁面才會渲染數據的。 

this.setData({ 'wenzhang ': this.data.wenzhang }); }

  向后插入數據

//向后增加數據
  add_after:function (){

    //要增加的數組
    var newarray = [{

　　　name:'隨心遠行',
　　　collection: 2,
　　　collected:false,
　　　collSrc:'/images/use_sc.png',
　　　reading: 1,
　　　date: '2016-8-13'

 }]; 

this.setData({ 'wenzhang':this.data.wenzhang.concat(newarray) }); },

2、修改

　　在修改的時候，可以像上面那樣直接對數據修改，然后用setData函數更新，也可以直接賦值，直接將要改變的值作為key語法報錯，因此就將要改變的值提前用變量替換，然后再賦值，數據改變，頁面也重新渲染。

collect: function (e) {
    console.log(e.currentTarget.dataset);
    var that = this;
    var index = e.currentTarget.dataset.id

//要刪除的數據的在數組中的索引

console.log(index); if (!that.data.wenzhang[index].collected){ // this.data.wenzhang[index].collection += 1; var wenzhanglist = that.data.wenzhang // wenzhanglist[index].collection += 1; var up = "wenzhang[" + index + "].collection"; var up2 = "wenzhang[" + index + "].collSrc"; var up3 = "wenzhang[" + index + "].collected"; // console.log(wenzhanglist);  that.setData({ [up]: wenzhanglist[index].collection += 1, [up2]:'/images/shced.png', [up3]: 'true' }); }

3、刪除

　刪除數組的數據的時候就定位到元素，用splice函數刪除splice（數據的位置，刪除的個數），普通數據可以用直接賦值為空的方式進行刪除

 showping:function(e){
    console.log(e.currentTarget.dataset);
    
    var index = e.currentTarget.dataset.id  //要刪除的數據的在數組中的索引
    console.log(index);
      this.data.wenzhang.splice(index, 1);
      this.setData({
        wenzhang: this.data.wenzhang
      });

  },

 

事件綁定

1、綁定事件

　　在微信小程序中頁面事件響應機制是，在頁面綁定事件，然后在js的page中定義相應的事件處理函數，就可以了。事件的參數可以在標簽中加上data-xxx=""來添加，讀取的時候event.currentTarget.dataset就可以獲取設置的參數,微信小程序的事件返回值中包含了一些位置信息，觸發對象的一些信息等，log一下就可以看到，這里用的currentTarget中是綁定事件當前組件的一些信息，包括id和組件中data-xx中綁定的數據。


<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

2、事件詳解

    微信小程序的事件類型很多，這些事件都可以用bind進行綁定，他們的執行順序如下：

　　單擊 touchstart → touchend → tap 
　　雙擊 touchstart → touchend → tap → touchstart → touchend → tap 
　　長按 touchstart → longtap → touchend → tap

　　但是這些事件都是冒泡事件，如果需要取消冒泡的話，可以采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段。官方使用代碼如下：

//只觸發handleTap2

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>   
//先后調用handleTap2、handleTap4、handleTap3、handleTap1

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view>