for 指令

微信的 for 指令跟 vue 的 for 指令很像，可以在前端把后端数据进行循环展示，列表和字典都是可以的。

<!--pages/for/for.wxml-->
<text>for 指令的练习</text>
<!-- 列表 -->
<view>
  <view wx:for="{{dataList}}">{{index}}--{{item}}</view>
</view>
<!-- 字典 -->
<view wx:for="{{dataDic}}">{{index}}--{{item}}</view>

<button bindtap="click">点击修改数据</button>

// pages/for/for.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: ["猫", "狗", "鸭子"],
    dataDic: {"a":"A", "b":"B", "c":"C"}
  },

  /**
   * 响应函数--修改数组并动态展示
   */
  click: function () {
    this.data.dataList.push("动物");
    this.setData({dataList: this.data.dataList})
  }
})

主要就是注意一下修改列表的时候的一些问题。首先 js 的 push 方法是返回数组长度而不是数组指针。第二点是访问 dataList 的时候需要写成 this.data.dataList。但是给 setData 方法传递的字典的 key 就是一个名字就可以。

最后附上 js 数组的常用方法以备参考。点击查看图片来源

作为练习可以尝试一下上传照片功能，上传照片的 API 是 wx.chooseImage 点击查看官方文档对这部分的说明，主要是查看一下传递的字典的 key 的含义，注意 key 对应的值是可以为列表的，表示两个都可。

<!--pages/publish/publish.wxml-->
<view bindtap="uploadPics">请上传图片</view>

<view class="image-box">
  <image wx:for="{{imageList}}" src="{{item}}"></image>
</view>

/* pages/publish/publish.wxss */
.image-box {
  display: inline;
}

.image-box image {
  width: 150rpx;
  height: 150rpx;
  margin: 5rpx;
}

// pages/publish/publish.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageList: ["/images/background.jpg", "/images/background.jpg"]
  },

  /**
   * 事件响应函数--上传图片
   */
  uploadPics: function () {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: "original",
      sourceType: ['album', 'camera'],
      success: function (res) {
        // 成功的回调函数
        console.log(res);
        that.setData({imageList: res.tempFilePaths})
        
      },
      fail: function (res){
        // 失败的回调函数
      },
      complete: function (res) {
        // 成功 or 失败的回调
      }
    })
  }
})