微信小程序之三步简单上手如何使用后端提供的接口_小程序开发如何和接口对接

一.在js中的data对象中定义一个用于接收数据的空数组

这个数组我命名为resData。

二.在js中用wx.request发起网络请求

在测试的时候可以先把不校验合法域名给勾选上 

wx.request({
      //这里的url用的是新视觉实训的一个测试接口
      url: 'https://edu.newsight.cn/wxList.php',
      //success是接口调用成功的回调函数,这里习惯用res去接收返回值
      success:res=>{
        console.log(res)
      }
    })

我们打印出res，在Console控制台可以看到↓

三.将接收到的所需数据赋值给空数组 

这里记得要用setData赋值

wx.request({
      //这里的url用的是新视觉实训的一个测试接口
      url: 'https://edu.newsight.cn/wxList.php',
      //success是接口调用成功的回调函数,这里习惯用res去接收返回值
      success:res=>{
        this.setData({
          resData:res.data
        })
      }
    })

 我们可以在AppData中查看是否成功接收数据

这样一个简单的网络请求的工作就完成啦！

扩展

我们可以把数据渲染到页面看看效果

resData这是个对象数组，我们下面就简单渲染下每项中的author看看吧

注意这里要用数据绑定{ Mustache 语法（双大括号）}将变量包起来

此时渲染成功但会看到控制台有如下警告，提示我们要指定key值

 我们一般将key设置为*this,但如果是对象就不能这样了

我们可以设置为数组的index(索引值)

这里最好设置为id，因为它是真正唯一的

这个测试接口定义了接收的参数 多少项num 和 多少页page

如下面的num=3&page=2

我们可以在wx.request中添加data对象再写上要请求的参数

我们还可以利用请求参数做个下一页的小功能

写个按钮，给它绑定一个名为nextPage的事件

然后在js中将网络请求部分的代码封装成一个函数getList,1是参数p的默认值，最后写上如下代码

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    resData:[],
    num:1
  },
  nextPage:function(){
    this.data.num++
    this.getList(this.data.num)
  },
  getList:function(p=1){
    wx.request({
      //这里的url用的是新视觉实训的一个测试接口
      url: 'https://edu.newsight.cn/wxList.php',
      data:{
        num:8,
        page:p
      },
      //success是接口调用成功的回调函数,这里习惯用res去接收返回值
      success:res=>{
        this.setData({
          resData:res.data
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList()
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

这样每次点击按钮，num就会+1，然后再传参给page，实现页数+1