微信小程序中网络请求和列表绑定

0.后台数据准备

app.get("/imagelist",(req,res)=>{
      var fun = [{
      			title: "交易汇总表",
      			list: "http://127.0.0.1:3000/img/icon/icon01.png"
      		},
      		{
      			title: "客户提示查询",
      			list: "http://127.0.0.1:3000/img/icon/icon02.png"
      		},
      		{
      			title: "营销活动管理",
      			list: "http://127.0.0.1:3000/img/icon/icon03.png"
      		},
      		{
      			title: "财富规划",
      			list: "http://127.0.0.1:3000/img/icon/icon04.png"
      		},
      		{
      			title: "音频管理",
      			list: "http://127.0.0.1:3000/img/icon/icon05.png"
      		},
			 ];
      res.send(fun);
});

1.index.wxml

<!--index.wxml-->
<view class="container">
  <view>
    <button type="primary" bindtap="loadData">加载数据</button>
  </view>
  <view wx:for="{{newsData}}">
    <image style="width:20px;height:20px;" src="{{item.list}}"></image>
    {{item.title}}
  </view>
</view>

2.index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    newsData:[]
  },
  loadData: function() {
    //做一个this的指向
    var _this=this;
    wx.request({
      url: 'http://127.0.0.1:3000/imagelist',
      header: {
        'content-type': 'application/json'
      },
      success: function(res) {
            let { newsData } = this.data;
          if (newsData && newsData.length > 0) {
            newsData= newsData.concat(result.data)
          } else {
            newsData= result.data;
          }
        _this.setData({
          newsData: result.data
        });
        console.log(_this.data.newsData);
      }
    })
  }
})