微信小程序开发学习--页面事件和数据绑定

数据绑定

微信小程序的数据绑定与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>