接口资源
通常可以找免费的接口资源进行开发测试调用,例如'聚合接口'网站:https://www.juhcn/?bd_vid=6618866570258839388注册登录后,选择免费的接口进行使用例如:天气查询接口该接口中会说明接口地址、必须填写的请求参数、接口的key值
实现接口调用
在app.json中创建页面,例如示“pages/request/request”在该页面路径下的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('请求失败!');
}
});
}
})
数据渲染
在request.wxml中进行数据渲染(数据绑定),代码如下
实时气温{{weather.temperature}}℃
文章为作者独立观点，不代表股票交易接口观点
股民评论