微信小程序踩坑:页面传值，按钮问题，循环问题等

  这个月，公司临时需要开发一个小程序项目，初步命名为 童书馆阅读角。是一个学校学生之间的互相借书还书的项目。两周左右开发时间，因为从未接触过，开始撸文档，所以开发过程就是一个挖坑和填坑的过程。踩过的坑记录下来，下次避过。

第一个坑(1)：标签问题，小程序是运行于微信端的webview，并非完全的浏览器端。小程序无法使用 window，document对象，标签必须闭合。像,等，这里不闭合会出现错误，导致页面无法渲染。

第二个坑(2): 条件渲染，wx:if一般配合这种标签，直接用在也可以，但是 做为小程序端类似于div的存在，往往一个wxml文件里存在很多，不利于阅读代码和审查。用包裹起来比较明显。

第三个坑(3)：页面间的传值问题。小程序页面传值，有多种方法，第一种，在app.js页面，设置全局数据global对象，把数据存进去，然后在传值的界面间var app =  getApp(), 通过app.global来设置和提取。使用和data类似。第二种方法：通过缓存，设置界面 setStorageSync("key" "value"),需要的时候通过getStorageSync来获取。第三种方法，用navigator标签来传递，然后跳转过去以后，在onLoad里面function(e){e.id,e.title}来接收。

第四个坑(4)： 循环问题。比如我们点击某个按钮需要发送数据。但因为这个数据和按钮都是循环出来的 ，所以我们需要在js中获取当前循环的值。一种方法是：在wxml里data-xxxx的自定义属性把循环的出的某个数据绑定在按钮上，在js里 点击 

点我发送

add:function(e){
  var id = e.currentTarget.dataset.id;
  var userId = e.currentTargrt.dataset.user
}

需要注意的是 data-xxxx自定义属性，xxxx是不可以有大写字母存在。

另一个问题是有些数据不能绑定在单纯一个按钮上，比如 我一个列表项都是循环出来的，每个列表内有按钮，点击同意或拒绝，这两个按钮消失，然后出现一个被禁用的按钮 显示已拒绝或者已同意。刚开始我也是这么想的。设置一个变量为true，点击以后变成false，后来发现这样一来，我点击一个，其他的列表项全都跟着变化。因为他们全部用的一个变量啊 ，一个改变那就全部改变了。那我现在就是需要有一个属于自己当前列表的变量，然后通过改变当前变量的ture和false来改变，就可以避免这种情况。那就是需要为这个循环的变量去增加一个属性，让所有列表项都具备该属性。然后通过改变当前列表的该属性。那么循环出来的列表 就达到了效果。  上代码

    {{list.name}}
    {{list.id}}
    

同意

已同意

for-idex 循环出列表项的下标。根据data-xxx自定义属性存下来。在js里获取。下面是 js代码 

Page({
  data:{
    lists:null
  },
  onLoad:function () {
    var that =this;
    wx.request({
      url:"/test",
      data:{},
      success:function (res) {
        var data = res.data;
        for(var i=0 ;i

      that.setData({
          lists:data
        });

} }) }, agree:function (e) { var idx = e.currentTarget.dataset.index; var see = this.data.lists[idx].show ; this.data.lists[idx].show = !see; this.setData({ lists: this.data.lists }) }})

通过改变对象数组中当前项的新增属性来实现效果。

第五个坑（5） 真机测试有些地方不识别 如 red pink 这类颜色，像tabBar里在ios端就会失去下面的字。 所以最好还是使用rgb或者#十六进制的颜色。