【逆战】-- 微信小程序之调用api

如何将接口获取到的数据展示到微信小程序上
第1步
首先你要找到一个api开放接口，无论是免费的还是收费的。
第2步
配置request合法域名，在微信公众平台找到开发设置-服务器域名-服务器配置

配置好之后就可以去开发工具使用了

先看一下官方的示例代码

wx.request({
url: '******', //这里填写你的接口路径
header: { //这里写你借口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了
'Content-Type': 'application/json'
},
data: {//这里写你要请求的参数
x: '' ,
y: ''
},

success: function(res) {
//这里就是请求成功后，进行一些函数操作
console.log(res.data)
}
})

第3步
下面以天气api为例，先来看一下api的结构

需要用到的是forecast里面的数据，那么怎么取到其中的数据呢，就需要一层一层的进入api
console.log(res.data.data.forecast)这样已经进入forecast数据里面

里面是一个多维数组，假设我们要取到第一个数组的数据

这样就取到了第一个数据，数据已经取到了那么怎么在页面输出呢
第4步
js文件

onLoad: function () {
var that = this//不要漏了这句，很重要
wx.request({
url: 'https://www.apiopen.top/weatherApi?city=成都',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
that.setData({
date: res.data.data.forecast[0].date,
fengxiang: res.data.data.forecast[0].fengxiang,
type: res.data.data.forecast[0].type
//res代表success函数的事件对，data是固定的，fengxiang是是上面json数据中fengxiang
})
}
})
}

wxml文件

{{date}}
{{fengxiang}}
{{type}}

简单的在页面输出

• 点赞
• 收藏
• 分享
• 文章举报