继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

青春有我
关注TA
已关注
手记 1242
粉丝 205
获赞 1010

上一节带领大家实现了本地json数据的解析,但是我们做小程序肯定不是想要本地死的数据,所以这一节来教大家怎么获取网络json数据。

本节知识点

  • 1,小程序后台配置服务器域名

  • 2,小程序wx.request发起网络请求

一,配置网络请求的服务器域名

我们用小程序请求网络数据,需要先在小程序后台配置服务器域名


webp

找到服务器域名配置

webp

配置域名

30paotui.com是我为大家学习小程序专门做的后台数据接口,大家只需要按照上面步骤配置好服务器域名。

二,小程序网络请求

还是先看官方文档和官方示例
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

webp

官方文档


可以看出我们做基本的网络请求时,需要url,data,header,success。通过下图我们可以看到做网络请求时只有url是必须的。

webp

必填的只有url


看完官方文档,我们就来正式的实现自己小程序的网络请求了。

所需参数参数值(获取网络数据用)
urlhttps://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,如下图


webp

获取到的网络数据

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



作者:java小石头
链接:https://www.jianshu.com/p/7bb5ed87033f


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP