小程序根据后端数据修改前端的checkbox的勾选状态

一、先来贴一下我的后台数据：


二、wxml和js代码：
wxml代码：

<button bindtap='myRequest' type="primary" class="searBtn">我的</button>
<checkbox-group class="cb_group" bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{testlistDatas[0].items1}}">
    <checkbox  checked="{{item}}" />{{item.value}}</label>
</checkbox-group>

说明：
这里我写得可能比较繁杂，不过关键点就一个，就是我们存储checkbox的值的数组名是什么，我这里就是用items1数组来存的，再加上各种数组嵌套，就变成这里的testlistDatas[0].items1了。


js代码：

myRequest:function(){
    var that=this;
    wx.request({
      url:'https://easy-mock.com/mock/5d27643c6f219a537bb21467/example/me', 
      method:"GET",
      header:{
        'Content-Type':'json'
      },
      success:function(res){
        console.log(res.data);//在控制台打印后端返回的所有数据
        var data=res.data;
        that.setData({
          testlistDatas:data
        })
      },
      fail:function(){
        console.log("通信失败")
      }
    })
  },

有几个点要说一下：
1.js中的testlistDatas需要在Page的data中事先声明，如下：

2.推荐一个提供自定义后端数据的网站：easy-mock

3.套到其它情况下时，只需要改两个地方：url以及我们在setData里面自定义的接收数据的变量名（比如这里我的变量名是testlistDatas）。


三、关于运行：
1.

一开始是啥都没有的，需要点击这个”我的“按钮

2.点击后，可得：

不过这个checkbox是需要下拉辐条才能看到的

四、 有什么问题欢迎评论区提醒