上一节带领大家实现了本地json数据的解析,但是我们做小程序肯定不是想要本地死的数据,所以这一节来教大家怎么获取网络json数据。
本节知识点
1,小程序后台配置服务器域名
2,小程序wx.request发起网络请求
一,配置网络请求的服务器域名
我们用小程序请求网络数据,需要先在小程序后台配置服务器域名
找到服务器域名配置
配置域名
30paotui.com是我为大家学习小程序专门做的后台数据接口,大家只需要按照上面步骤配置好服务器域名。
二,小程序网络请求
还是先看官方文档和官方示例
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
官方文档
可以看出我们做基本的网络请求时,需要url,data,header,success。通过下图我们可以看到做网络请求时只有url是必须的。
必填的只有url
看完官方文档,我们就来正式的实现自己小程序的网络请求了。
所需参数 | 参数值(获取网络数据用) |
---|---|
url | https://30paotui.com/article/list |
我们只需要在上一节代码的基础上做以下改动就可以了。
// home.js//引入本地json数据,这里引入的就是第一步定义的json数据var jsonData = require('../../data/json.js'); Page({ data: {}, //把上一节解析本地json数据的代码注释掉 // //我们在这里加载本地json数据 // onLoad: function() { // this.setData({ // //jsonData.dataList获取json.js里定义的json数据,并赋值给dataList // dataList: jsonData.dataList // }); // }, //小程序的生命周期函数 onLoad() { this.getHomeList(); //调用网络请求的方法:getHomeList }, //获取网络数据 getHomeList() { wx.request({ url: "https://30paotui.com/article/list", success: function(res) { //请求成功 console.log(res);//在调试器里打印网络请求到的json数据 }, fail: function(res) { // 请求失败 } }) } })
可以看到我们home.js里的getHomeList方法就是用来获取网络数据用的。只有简单的几行代码,我们就可以获取到网络数据了,不信点击编译看下调试器里打印的log,如下图
获取到的网络数据
到这里我们就轻松的获取到网络数据了,是不是很简单。
作者:java小石头
链接:https://www.jianshu.com/p/7bb5ed87033f