小程序调用接口返回数据实例【入门篇】

小程序调用接口返回数据实例【入门篇】

本文主要是详解小程序调用接口问题，小白刚接触小程序，如有错误或好意见请多多指教！

附：本例子调用的 聚合数据的新闻头条接口，仅作为单纯测试，所以接口域名是没有备案的，所以需要在小程序里勾选不检验合法域名，即下图所示（这个选项在项目设置里面）

如果不勾上会出现一系列错误提示（如下图）：

我们先来看一下接口返回的json数据结构：

做好这些之后，再在相对应的 xxx.js里面写onLoad方法，如下所示

onLoad: function (options) {
    var that = this;
    wx.request({
      url: '接口url',
      method: 'GET',  //方法分GET和POST，根据需要写
      header: {       //下面是固定格式，照搬
        'Content-Type': 'application/json'
      },
      complete:function(res){
        console.log(res.data);//调出来的数据在控制台显示，方便查看
        that.setData({
          news: res.data.result.data,
          //因为这个接口比较复杂，所以这里调出的数据是res.data.result.data（当然有些简单的接口就单单 res.data就能调取全部数据，也可以在这里面自定义想要调用的数据），然后把值赋给news，之后对news进行处理即可，具体见wxml 
        })
      },


      success: function (res) {//这里写调用接口成功之后所运行的函数
        console.log("请求成功")
     
      },
      fail: function (res) {//这里写调用接口失败之后所运行的函数
        console.log('.........fail..........');
      }
    })
  },

在wxml里的写法：（本例子为测试用，所以要好看的样式还是自己敲）

<view>
<block wx:for="{{news}}" wx:for-item="item">
<!-- news为.js传来的数组类型数据 -->
<text class="title">{{item.title}}</text>
<view>{{item.date}}</view>
</block>
</view>

本文为自己参考摸索所得经验，转载请注明出处！希望您能尊重我的劳动成果，非常感谢！