微信小程序 JS中遍历后台获取的data数据并赋值

开发场景： 需要把后台Java端查询到的图片动态显示在页面上。

Java端传过来的图片是base64类型的，前一篇文章已经介绍怎么把base64 转为图片。https://blog.csdn.net/weixin_41545119/article/details/100511695

1.WXML

<block wx:for="{{srcModelsList}}" wx:key="{{item.id}}">
    <image model ="widthFix" src ="{{item.src}}" style="width:50px">
</block>

2.JS

  a,请求数据的js

wx.request({
  url: 'https://alalalal/springboot/weChat/xxx', //仅为示例，并非真实的接口地址
  data: {
    phone:'212111'
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    for(var i =0;i<res.data.length;i++){
      //base64解码获取到的图片
      res.data[i].picture = base64.decode(res.data[i].picture)
      //调用赋值的方法(我尝试在这里面直接赋值，总是出现奇奇怪怪的错误，
      //索性把赋值方法单独独立出来)
     _this.makeObj(res.data[i],i+1);
    }
  }
})

b.赋值的js

makeObj:function(data,id){
    //每一次赋值定义个方法来盛放属性
    let object={},
    object.id = id;
    object.src = data.picture;
    //开头定义的一个空数组,专门用来存这个的
    itemModel[itemModel.length] = object;
    this.setData({
        srcModelsList:itemModel
    })
}

这样这个数组就好了，顺带着一个清空数组的方法......

//赋值的时候
this.setData({
    //数组从0开始，删两个
    srcModelsList : this.data.srcModelsList.splice(0,2);
})

希望能帮到有需要的小朋友~