微信小程序数据传递的方式-页面数据的存取

我们在把数据显示到页面的时候，为了实现良好的互动，都希望在用户点击某个栏目后，获取这个栏目的捆绑数据，然后执行后续的操作。

例如，从数据库里取出对应的记录后，显示在页面上，是一条条的大横条，用户点击某个横条的时候，就是选择了某条记录，此时在js端，就希望能获取用户点击的是哪条记录，并且这个记录的各个字段从页面直接搬过来，不用重新到数据库去查询了。

这里就要用到页面控件的“data-*”属性了，显示页面数据时，把数据记录显示在控件的各个data-*属性中，需要的时候就从页面这些data-*属性里取出来。

例如，我要把device_id变量的值存入页面中，就可以写成：

<view data-deviceid="{{device_id}}" bindtap="onBarTap">点击获取数据</view>

获取的时候，在js里写：

onBarTap(e){

var deviceId=e.target.dataset.deviceid; //获取对应data-deviceid的存放数据

}

这样就可以获取data-deivceid里这个deviceid数据了，要注意的是，取出来的时候要注意去掉“data-”前缀。当然这里的“{{device_id}}”里的device_id必须是在js里的Page里的data要先赋值。

接下来给个简单的page做参考，例如新建demo页面，demo.wxss和demo.json都默认，我们只是参考demo.wxml和demo.js两个源码。

=============================================================

demo.xml：

<!--pages/index/demo.wxml-->
<text>pages/index/demo.wxml</text>
<view>
    <button data-itemId="{{item_id}}" bindtap="getdata">获取数据</button>
</view>

demo.js

// pages/index/demo.js
Page({
  data: {
    item_id:"DEVICE_000302938049898",        //给item_id先赋个值
  },
  onLoad: function (options) {
  },
  getdata:function(e){
    console.log(e.target.dataset.itemid);    //从页面取出来，去掉前缀
  },
})

这样第9行显示的结果就是：DEVICE_000302938049898

总结，存：是利用js的公用数据data段的赋值，直接刷新显示；取：是利用js里的传递过来的event，就是上面的e，里面的e.target.dataset.xxxx来获取，要去掉data-前缀。