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

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_…