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

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

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

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

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

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

<button bindtap="add" data-id = {{list.id}} data-user={{list.user}}>点我发送</button>

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

需要注意的是 data-xxxx自定义属性，xxxx是不可以有大写字母存在。
另一个问题是有些数据不能绑定在单纯一个按钮上，比如 我一个列表项都是循环出来的，每个列表内有按钮，点击同意或拒绝，这两个按钮消失，然后出现一个被禁用的按钮 显示已拒绝或者已同意。刚开始我也是这么想的。设置一个变量为true，点击以后变成false，后来发现这样一来，我点击一个，其他的列表项全都跟着变化。因为他们全部用的一个变量啊 ，一个改变那就全部改变了。那我现在就是需要有一个属于自己当前列表的变量，然后通过改变当前变量的ture和false来改变，就可以避免这种情况。那就是需要为这个循环的变量去增加一个属性，让所有列表项都具备该属性。然后通过改变当前列表的该属性。那么循环出来的列表
就达到了效果。  上代码<block wx:for="{{lists}}" wx:for-item="list"wx:for-index="idx">
<text>{{list.name}}<text>
<text>{{list.id}}<text>
<image src="{{list.img}}" />
<block wx:if={{list.bool}}>
<button bindtap="agree" data-index={{idx}}>同意</button>

</block>

<block wx:else><button  disabled>已同意</button></block>
</block>

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<data.length;i++){
data[i][show]=true;
data[i][txt]="已同意";
}

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或者#十六进制的颜色。