微信小程序接口请求数据与展示实现关于我们

在data属性中设置about对象初始化，onLoad加载事件中发送wx.request接口请求数据
1、这里注意，要不然setData不可用 that应该是当前js对应实例
2、数据加载前的特效
3、发送接口请求数据
4、将从接口获取到的数据对象赋值给abouts属性，abouts属性初始化在上边的data中
5、数据加载后将特效隐藏

about.js源码

// pages/about/about.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    abouts: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;//1、这里注意，要不然setData不可用   that应该是当前js对应实例
    console.log(wx);
    //2、数据加载前的特效
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    //3、发送接口请求数据
    wx.request({
      url: 'http://www.yzm.com/index.php/api/About/index', // 仅为示例，并非真实的接口地址

      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
        ///4、将从接口获取到的数据对象赋值给abouts属性，abouts属性初始化在上边的data中
        that.setData({
          abouts: res.data.data
        });
      },
      //5、数据加载后将特效隐藏
      complete() {
        wx.hideLoading();
      }
    })
  }

})

about.wxml模板展示数据
1、nodes属性能把富文本保存的html标签过滤掉
2、模板读取js逻辑层中data属性设置的abouts对象数据展示出来

  
  
    {
    {abouts['title']}}