关于小程序:小程序实现接口请求

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>

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

版权申明：本文为CSDN博主「weixin_45963440」的原创文章，遵循CC 4.0 BY-SA版权协定，转载请附上原文出处链接及本申明。
原文链接：https://blog.csdn.net/weixin_…