-
二、网络请求
-
三、数据解析
-
四、页面渲染
-
五、动态参数
===============================================================
对于任何应用来说，网络请求是必不可少，这在微信小程序中也不例外，那么微信小程序中怎么进行网络访问呢？访问的数据怎么解析？解析之后怎么渲染在页面上。现在你先带着这些疑惑，然后往下看。
===============================================================
首先还是创建一个微信小程序的项目吧。命名为NetworkRequestDemo。
新建后如下：
基本的页面就有了，下面要写的代码也都在这个index页面中，首先清除掉原来的代码。
先修改index,js的代码，如下：
Page({
/**
- 页面的初始数据
*/
data: {
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
},
/**
- 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
},
/**
- 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
- 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
- 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
- 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
- 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
- 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
然后清空index.wxml和index.wxss中的内容。
然后编译一下：
现在你的模拟器上就什么都没有了，那么初始的准备就做好了。
====================================================================
进行网络访问，常规的都是通过网络API接口来请求数据的，那么首先你得弄到一个这样的接口，并且这个接口能够返回相应的数据，这里我会用到一个之前我写Android APP时用过的一个接口，也是和风的一个API接口，用来搜索城市的。接口地址如下：
https://geoapi.qweather.com/v2/city/lookup?location=beij&key=d4a619bfe3244190bfa84bb468c14316
这里有两个参数，一个是location，一个是key（这个key也是我自己在和风上申请的）。目前是都拼接在这个地址后面了，这种方式就是GET请求。那么你现在随便用一个浏览器输入这个地址，回车就会获得这样的数据：
{“code”:“200”,“location”:[{“name”:“北京”,“id”:“101010100”,“lat”:“39.90498”,“lon”:“116.40528”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“10”,“fxLink”:“http://hfx.link/2ax1”},{“name”:“海淀”,“id”:“101010200”,“lat”:“39.95607”,“lon”:“116.31031”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“15”,“fxLink”:“http://hfx.link/2ay1”},{“name”:“朝阳”,“id”:“101010300”,“lat”:“39.92148”,“lon”:“116.48641”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“15”,“fxLink”:“http://hfx.link/2az1”},{“name”:“昌平”,“id”:“101010700”,“lat”:“40.21808”,“lon”:“116.23590”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“23”,“fxLink”:“http://hfx.link/2b31”},{“name”:“房山”,“id”:“101011200”,“lat”:“39.73553”,“lon”:“116.13916”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“23”,“fxLink”:“http://hfx.link/2b81”},{“name”:“通州”,“id”:“101010600”,“lat”:“39.90248”,“lon”:“116.65859”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“23”,“fxLink”:“http://hfx.link/2b21”},{“name”:“丰台”,“id”:“101010900”,“lat”:“39.86364”,“lon”:“116.28696”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“25”,“fxLink”:“http://hfx.link/2b51”},{“name”:“大兴”,“id”:“101011100”,“lat”:“39.72890”,“lon”:“116.33803”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“25”,“fxLink”:“http://hfx.link/2b71”},{“name”:“延庆”,“id”:“101010800”,“lat”:“40.46532”,“lon”:“115.98500”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“33”,“fxLink”:“http://hfx.link/2b41”},{“name”:“平谷”,“id”:“101011500”,“lat”:“40.14478”,“lon”:“117.11233”,“adm2”:“北京”,“adm1”:“北京市”,“country”:“中国”,“tz”:“Asia/Shanghai”,“utcOffset”:“+08:00”,“isDst”:“0”,“type”:“city”,“rank”:“33”,“fxLink”:“http://hfx.link/2bb1”}],“refer”:{“sources”:[“qweather.com”],“license”:[“commercial license”]}}
截图如下：
这里返回的是JSON，现在开发中常规的使用方式。
===================================================================
下面先进行网络请求，比如我在页面上添加一个按钮，点击之后调用一个函数，函数里面进行网络请求。那么现在的思路很明确了，开始实践。
先修改index.wxml。
请求网络
然后在index.js中增加一个网络请求的函数
/**
- 请求网络
*/
requestNetwork: function(){
wx.request({
//请求地址
url: ‘https://geoapi.qweather.com/v2/city/lookup?location=beij&key=d4a619bfe3244190bfa84bb468c14316’,
//请求头
header:{
‘content-type’: ‘application/json’ //默认值
},
//请求成功回调
success(res){
console.log(res.data);
},
//请求失败回调
fail(res){
console.log(res.errMsg);
}
})
},
现在当点击按钮时就会触发requestNetwork函数，在这个函数里面定义访问的地址url、请求头、请求成功和失败的回调中都各自打印结果日志。下面编译一下：
你会发现报错了，原因是我们的这个地址不止合法域名列表中，因为你现在用的是测试号，如果你申请了正式号就不会这样，那么测试号这样的解决方法就是不校验这个地址。
勾选上这个不校验合法域名的选项，然后再编译。
你的数据在这里就能看到了，由于它现在是一个JSON对象，所以不能够直接打印，你可以将这个对象转成字符串，然后再打印。比如这样：
var resultStr = JSON.stringify(res.data);
console.log(resultStr);
通过JSON.stringify对返回的结果进行字符串转换。然后你再编译一下：
OK，那么这个值就打印出来了，和你通过浏览器返回的数据是一模一样的。
===================================================================
在解析数据之前，首先要知道你的这些数据的构成，你可以的打印的内容，复制到你的index.json中。记得把index.json中之前的内容清除掉。
这个看上去也比较乱不是吗？鼠标右键点击会弹出一个白色菜单，点击格式化文档。
然后再整理一下：
这个JSON数据种有一个String，一个location数组对象，一个refer对象。
那么这个在微信小程序中怎么去解析呢？
先看这个code状态码。
var code = res.data.code;
console.log(code);
通过这样的方式可以直接拿到String类型的code。编译看一下：
然后来看这个数组对象，location，它首先是一个数组，数组里面是一个个对象，因此首先要遍历这个数组，下面来遍历。
var location = res.data.location;
for (const key in location) {
const element = location[key];
console.log(element.name);
}
for/in循环的使用，然后通过location[key]，得到数组中的每一个对象赋值给element，再通过element.name获取对象中属性值，name是属性名：那么这个name是哪里来的呢？
如果你能拿到这个对象下面的某一个属性值，那么其他的你同样可以通过这种方式去拿到不是吗？好的，下面运行一下：
OK，数组中每一个对象的name属性值都打印出来了，下面就是最后一个refer对象了。
//获取对象中的属性值
var license = res.data.refer.license[0];
console.log(license);
这样写就可以，先来看这个对象的数据结构。
首先这个一个对象，然后里面有sources和license两个属性，它们的数据值都是数组。而且目前来说数组里面只有一条数据。因此通过res.data.refer就能拿到这个对象，再点license就能拿到这个对象中的属性值，因为你知道它的属性值是一个数组，而且数组里面只有一条数据，所以你可以通过获取数组下标的方式得到第一条数据，也就是[0]。下面运行一下吧：
那么常规的JSON数据解析基本上你就都会掌握了，当前success函数的代码如下：
//请求成功回调
success(res) {
// var resultStr = JSON.stringify(res.data);
// console.log(resultStr);
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）
最后
最后这里放上我这段时间复习的资料，这个资料也是偶然一位朋友分享给我的，里面包含了腾讯、字节跳动、阿里、百度2020-2021面试真题解析，并且把每个技术点整理成了视频和PDF（知识脉络 + 诸多细节）。
还有 高级架构技术进阶脑图、高级进阶架构资料 帮助大家学习提升进阶，这里我也免费分享给大家也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。
一起互勉~
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！
内容对你有帮助，可以扫码获取！！（备注：Android）**
最后
最后这里放上我这段时间复习的资料，这个资料也是偶然一位朋友分享给我的，里面包含了腾讯、字节跳动、阿里、百度2020-2021面试真题解析，并且把每个技术点整理成了视频和PDF（知识脉络 + 诸多细节）。
还有 高级架构技术进阶脑图、高级进阶架构资料 帮助大家学习提升进阶，这里我也免费分享给大家也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。
[外链图片转存中…(img-dbhOk0ih-1711987484443)]
[外链图片转存中…(img-bt3cc7oF-1711987484444)]
一起互勉~
2461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
