小程序请求网络数据json数据
2018-09-19 本文已影响9人
编程小石头666
点击下面网址进入系列教程
10天零基础入门小程序系列教程
上一节带领大家实现了本地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 | 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,如下图

到这里我们就轻松的获取到网络数据了,是不是很简单。