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

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

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对象数据展示出来

<view class="container">
  <!--关于我们 start-->
  <view class="abinfo">
    <view class="tit"><text>{{abouts['title']}}</text></view>
    <view class="info">
      <!-- nodes属性能把富文本保存的html标签过滤掉 -->
      <rich-text nodes="{{abouts['content']}}"></rich-text>
    </view>
  </view>
  <!--关于我们 end-->
</view>

表结构

CREATE TABLE `yzm_page` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '编号',
  `title` varchar(200) NOT NULL DEFAULT '' COMMENT '新闻标题',
  `add_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '添加时间',
  `upd_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '修改时间',
  `content` text COMMENT '文章内容',
  `info` varchar(500) NOT NULL DEFAULT '' COMMENT '简介',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

API接口返回代码

public function index()
    {
        $res= $this->abouts->getNewOne();
        if(empty($res)){
            $res = [
                'title'=>'关于我们',
                'content'=>'关于我们'
            ];
        }

        $res['content'] = str_replace("<img ", "<img style='max-width:100%;height:auto;text-align:center;margin-right:20rpx;'", $res['content']);
        $data = [
            'code' => 200,
            'data' => $res
        ];
        echo json_encode($data);
    }