如何在微信小程序上显示通过界面获取的数据

第1步

首先，您必须找到一个api开放接口，无论它是免费的还是付费的小程序开发接口，我建议在这里使用一个提供许多接口的免费api

第二步是配置合法域名，并在微信公众平台上找到开发设置-服务器域名-服务器配置

这是我的api之一

配置后，您可以转到开发工具以使用

请先查看官方示例代码

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

第3步

以天气api为例，让我们看一下api的结构。

需要使用的是内部数据，因此如何获取其中的数据，您需要逐层输入api

.log（res.data.data。）已输入数据

这是一个多维数组，假设我们要获取第一个数组的数据

.png

通过这种方式，首先获取了数据，并且已经获取了数据，因此如何在第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}}

页面上的简单输出