微信小程序 之 网络请求、数据解析、页面渲染、动态参数

基本的页面就有了，下面要写的代码也都在这个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接口

====================================================================

进行网络访问，常规的都是通过网络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);

//获取String属性

code = res.data.code;

console.log(code);

//数据数组中的对象的其中一个属性值

var location = res.data.location;

for (const key in location) {

const element = location[key];

console.log(element.name);

}

//获取对象中的属性值

var license = res.data.refer.license[0];

console.log(license);

},

下面来看这个解析后的数据怎么去渲染到页面上。

四、页面渲染

===================================================================

页面要渲染的话这个改动可能就会比较的大，因此我会将success中的代码全部都清除掉，然后重新写代码。

首先在index.js中的data回调中设置页面的初始化数据，比如这个code，现在是0。

然后在index.wxml中添加一个text标签。

请求结果：{{code}}

通过{{code}}，可以获取在data中声明的属性的值，也就是说你现在编译的话看到的内容就是请求结果：0。

那么你现在思考一个问题，怎么样可以使请求返回的结果码设置到这个页面上，其实并不复杂，首先你要知道网络请求的环境是什么？微信小程序中的网络请求都是异步的，也就是说新开了一个线程去进行网络请求，所以它和你当前页面交互时，首先你要得到当前页面，然后才能去设置页面的数据变动。那么你可以这么去写代码，在success中：

//请求成功回调

success(res) {

//获取栈中的页面数量

var pages = getCurrentPages();

//获取到当前页面

var index = pages[pages.length - 1];

index.setData({

//设置结果码

code: res.data.code

})

},

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
**。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-QyJvmyY6-1715906802453)]

[外链图片转存中…(img-FAroHtcT-1715906802455)]

[外链图片转存中…(img-uC1frQ6m-1715906802456)]

[外链图片转存中…(img-oOqDwJpU-1715906802457)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！