小程序实现接口请求1.接口资源1)通常可以找免费的接口资源进行开发测试调用,例如"聚合接口"网站:www.juhe.cn

1.接口资源

1)通常可以找免费的接口资源进行开发测试调用,例如" 聚合接口 " 网站:www.juhe.cn

2)注册登录后,选择免费的接口进行使用例如:天气查询接口该接口中会说明接口地址、必须填写的请求参数、接口的key值

2.实现接口调用

1）在app.json 中创建页面,例如图示 “pages/request/request”

2)在该页面路径下的 request.js中创建http请求,创建步骤如下

data中声明数据对象weather 生命周期函数onLoad中调用wx.request的Api 注意:wx.request中要填写以下参数:

url:请求的接口地址 data:请求的参数,通常填写必填的参数,此示例中的接口,必填参数为city 和 key success:请求成功执行的回调函数,此处可以进行数据绑定this.setData fail:请求失败执行的回调函数

// pages/request/request.js
Page({

/**
* 页面的初始数据
*/
data: {
weather:{}
},

 /**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
var that = this;//由于this在函数内部指向变化,所以需要将全局this指向保存到that中
wx.request({
  //注意:实际开发过程中只支持https请求,且需要去小程序后台配置
  //此处可以通过配置调试工具修改,实现支持http请求,操作过程:修改详情--本地设置--不校验合法域名
  //详见课程《微信小程序零基础到项目实战》课时50
  url: 'http://apis.juhe.cn/simpleWeather/query',//填写接口网站提供的接口地址
  data:{
    city:"广州",
    key:"0686200865ff5089fa8bd2d642e4dbd9"
  },
  success(res){
    console.log(res.data.result.realtime);//请求成功后,获取实时天气情况
    that.setData({
      weather:res.data.result.realtime
    });
    
  },
  fail(){
    console.log("请求失败!");
  }

});


}
})

3.数据渲染

在request.wxml中进行数据渲染(数据绑定),代码如下

<view>
 <view class="city">实时气温{{weather.temperature}}℃</view>
 <view class="weather"></view>
</view>

接口调用后，数据渲染最终结果如下：