动态转用真实接口数据

之前的动态是静态数据，而真实的数据应该从js中的data中读取出来，再交给wxml渲染出页面。

从js中读取data

index.js:

  /**
   * 页面的初始数据
   */  
    data: {
    dataList:[
      {title:"比赛动态1",auther:"张三"},
      {title:"比赛动态2",auther:"李四"},
      {title:"比赛动态3",auther:"王五"},
      {title:"比赛动态4",auther:"赵六"},
    ]},

wxml渲染data数组数据:

将循环次数5改成循环data数组

标题改为从每次循环的data中读取

<navigator class="dyItem" wx:for="{{dataList}}">
      <view class="pic">
        <image src="/images/xszp2.jpg"></image>
      </view>
      <view class="txt">
        <view class="title">{{item.title}}</view>
        <view class="info">
          <text>作者：</text>{{item.auther}}<text space="ensp"> - </text><text>时间：</text>2021-2-28
        </view>
      </view>
    </navigator>

观察页面:

js获取database数据

准备工作

因为要调用网络接口，因为测试接口的安全性不够高，所以需要勾选本地设置中的不校验合法域名。

js请求接口数据

当页面加载时请求数据，所以对应了js中的onLoad生命周期，在onLoad中添加请求接口数据动作。

这里的接口数据自行实现。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求，获取真实动态列表
    wx.request({
      url: 'http://127.0.0.1:8000/app/dynamics/',
      //success是数据请求成功之后的回调函数
      success:res=>{
        console.log(res.data)
      }
    })
  },

这样控制栏中就能打印出调用的接口数据。

接口数据渲染页面

js中将获取到的接口数据添加进data数组中，这样js就能读取data中的数据然后渲染页面
js:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求，获取真实动态列表
    wx.request({
      url: 'http://127.0.0.1:8000/app/dynamics/',
      //success是数据请求成功之后的回调函数
      success:res=>{
        console.log(res.data)
        this.setData({
          dataList:res.data
        })
      }
    })

index.wxml:
采用for循环data接口数据（有必要还可以设置分页请求）:

    <view class="dyMain">
      <navigator class="dyItem" wx:for="{{dataList}}">
        <view class="pic">
          <image src="/images/xszp2.jpg"></image>
        </view>
        <view class="txt">
          <view class="title">{{item.d_title}}</view>
          <view class="info">
            <text>作者：</text>{{item.d_auther}}<text space="ensp"> - </text><text>时间：</text>2021-2-28
          </view>
        </view>
      </navigator>
    </view>

这样就可以将接口数据渲染到小程序页面中了。

接口数据: