小程序请求网络数据json数据

点击下面网址进入视频讲解教程

视频讲解

上一节带领大家实现了本地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，如下图

获取到的网络数据

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

源码和视频讲解请加我微信，有问题也可以加我微信：2501902696（备注小程序）