微信小程序局部刷新数据

如，在微信小程序页面进行点赞操作，需要在点赞内容的点赞列表（底部）增加用户头像，此处需要实现数据的局部刷新，即：页面当前内容的点赞列表增加一个头像图片，其他内容不变。

实现原理

微信小程序的局部刷新通过onShow函数实现。

当用户POST行为成功，改变前端页面数据时，通过this.onShow()**获取最新的前端数据，并this.setData({})**更新当前的页面数据。页面数据的更新过程中，微信小程序容器会自动对比数据，只处理新数据的渲染。

JS代码

// 点赞用户的作品
giveLike: function (e) {
  // console.log("点赞")
  // 获取当前作品的ID
  var worksId = e.target.id
  
  wx.request({
    url: getApp().globalData.websiteUrl + '/works/' + worksId + '/giveLike/' + getApp().globalData.openId,
    method: "POST",
    header: {
      'content-type': 'application/json'
    },
    success: res => {
      if (res.data.code == 1) {
        // 局部刷新数据
        this.onShow()
      } else {
        wx.showToast({
          title: '已点赞！',
        })
      }
    }
  })
},

onShow: function () {
  // 获取当前最新的数据
  wx.request({
    url: getApp().globalData.websiteUrl + '/works',
    method: 'GET',
    success: res => {
      this.setData({
        // 更新数据，小程序容器自动对比，局部加载新数据
        worksList: res.data.data
        // API返回数据res.data.data与当前worksList数据必须在同一个范围，只是数据细节的更新。
      })
      // console.log(res.data.data)
    }
  })
}