小程序數(shù)據(jù)請求API渲染教程
2021-08-01 11:20:18

圖片.png

2： 將url替換成前面找好的免費接口
success返回成功的話
在控制臺打印一下返回的res.data數(shù)據(jù)

      success: res => {
        console.log(res.data)
      }

3: 需在data中聲明一個接收數(shù)據(jù)的變量。

data: {
    list: []
  },

4:在請求接口成功之后，用setData接收數(shù)據(jù)

        this.setData({
          //第一個data為固定用法
          list: res.data
        })

5:js參考代碼

Page({
  data: {
    // 3:需在data中聲明一個接收數(shù)據(jù)的變量。
    list: []
  },
  onLoad: function (options) {
    wx.request({
      url: 'https://unidemo.dcloud.net.cn/api/news',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        //1:在控制臺打印一下返回的res.data數(shù)據(jù)
        console.log(res.data)
        //2:在請求接口成功之后，用setData接收數(shù)據(jù)
        this.setData({
          //第一個data為固定用法
          list: res.data
        })
      }
    })
  },
})

6：注意一下，如果出現(xiàn)這樣的報錯

https://unidemo.dcloud.net.cn 不在以下 request 合法域名列表中，請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

?

說明接口的域名并沒有在你開發(fā)所用的小程序的后臺進行域名，證書等的配置。

為了開發(fā)方便，這樣可以解決：點開右上角的詳情按鈕，進行本地設置，勾選不校驗合法域名，web-view(業(yè)務域名），TLS版本以及HTTPS證書。

?

但是后面上線之前還是需進行配置好哦

四：wxml

上一步里面，可以看到，接口的返回值的格式如下，全部都是數(shù)組

?

如果要渲染到界面，就需要進行數(shù)組循環(huán)，使用wx:for方法：

在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復渲染該組件。
默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 item

wxml

<view wx:for="{{list}}" wx:key="index">
  <view class="item">
    <view class="number-wrapper">
      <text class="name">{{item.author_name}}</text>
      <view class="count-wrapper">
        <text class="count">{{item.title}}</text>
      </view>
    </view>
  </view>
</view>

wxss

.item {
  width: 100%;
  height: 186rpx;
  position: relative;
  display: flex;
  margin: 10rpx 10rpx;
  border-bottom: 1px solid rgb(197, 199, 199);
}

小程序界面如下：
wxss沒有怎么寫，湊合著看吧。不過還是喜歡引入一下小程序的ui框架，這樣用起來就很快樂。

?

完結(jié)，撒花

?

?