小程序快速入门到项目开发 7 (网络通讯和数据解析)
你好，【程序职场】专注于：Spring Boot ，微服务 和 前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索 副业赚钱渠道，在提升技术的同时我们一起交流 敏捷流程 提高工作效率，从技术到管理一步步提升自我！
标签：一个执着的职场程序员！
1.请求接口说明
小程序官方给出的接口函数叫做wx.request，请求方式提供比较简单，下面是官网给出的请求实例。
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
· url：请求的接口地址
· data：请求参数
· header：请求头，包括host、User-Agent、Accept、Accpt-Language、Referer等
· method：请求方式：POST/GET
· success：当接口请求成功时，小程序就会自动触发这个函数，获取的是从服务器返回的数据（json）。请求成功后获取到的数据就是success函数的参数result。
· fail：当接口调用失败时，小程序就会触发这个函数，返回错误信息
· complete：接口调用结束的回调函数(调用成功、失败都会执行),通过that.setData将数据传递给WXML页面。
- 请求接口方式
接口请求大都作为工具类调用，文件名称util，函数名称为getReq和req
通过 module.exports 提供了暴露接口的方法
module.exports = {req: req,
getReq: getReq,
};
（一）get请求方式
//get请求方式
function getReq(url, data, cb) {
try {
const token = wx.getStorageSync('bus_token');
if (token) {
// Do something with return value
console.debug('token111=' + token);
}
// data.appid = AppConf.appid;
// data.appsecret = AppConf.appsecret;
wx.request({
url: rootDocment + url,
data: data,
method: 'get',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'authorization': token,
},
success: function (res) {
return typeof cb === 'function' && cb(res.data);
},
fail: function () {
return typeof cb === 'function' && cb(false);
},
});
} catch (e) {
// Do something when catch error
}
}
（二）post请求方式
//post请求方式
function req(url, data, cb) {
try {
const token = wx.getStorageSync('bus_token');
if (token) {
// Do something with return value
console.debug('token111=' + token);
}
data.appid = AppConf.appid;
data.appsecret = AppConf.appsecret;
wx.request({
url: rootDocment + url,
data: data,
method: 'post',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
"authorization": token
},
success: function (res) {
return typeof cb === 'function' && cb(res.data);
},
fail: function (error) {
console.debug(error);
return typeof cb === 'function' && cb(false);
},
});
} catch (e) {
// Do something when catch error
}
}
3.接口调用
（一）get请求调用
- post请求调用
4.接口分页调用
（一）设置分页参数（二）设置刷新的配置,设置后会自动调用下拉效果
- （三）刷新函数说明
1.顶部和底部刷新效果初始化，默认下拉刷新效果消失，更多效果隐藏
2.加载状态添加 通过 showLoading
3.调用接口函数
4.刷新成功后界面状态变化 - （四）加载更多函数说明
1.顶部和底部刷新效果初始化
2.加载状态判断，判断是否还有加载更多的条件
3.页码++和调用接口函数
4.刷新成功后界面状态变化
5.接口数据解析
小程序的数据分为两种：对象，数组。
1.对象解析可以直接获取对象中信息 例如：
{
"code": "123",
"message": "请求成功"
}
wx.request({
url: 'http://www.intmote.com/myproject/test/new_file.json',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.code)
that.setData({
goldData: res.code,//获取对象中code信息
})
}
})
2.数组解析
{
"code": "123",
"message": [
{
"code2": "123",
"message2": "请求成功"
},
{
"code2": "123",
"message2": "请求成功"
}
]
}
获取message数组的信息和获取数组中第一个数据对象信息
wx.request({
url: 'http://www.intmote.com/myproject/test/new_file.json',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.code)
that.setData({
goldData: res.message,//获取数组集合信息
goldData2: res.message[0].code2,//获取数组中第一个对象中的code2数据信息
})
}
})
6.var let const 区别
（一）let
用let的方式声明的变量，为局部变量，该变量只会在最靠近{ }内的范围有效，出了{}之后，该变量就不能够再用了，否则会报该变量未定义的错误。也就是说，该变量的作用域为所在的代码块内。
//index.js//获取应用实例const app = getApp()
Page({
data: {
},
onLoad: function () {
console.log('App onLoad');
// 用let的方式声明的i只在for循环内有效，在for循环外引用就会报错i未定义的错误
for (let i = 0; i < 20; i++) {
console.log('for循环里面的i的值为'+i);//正常输出
}
console.log(i);//异常报错
},
})
（二）var
用var的方式声明的变量，为全局变量，其作用域为所在的函数内。所以重点来了，在当前JS文件的其余函数中，如果直接拿来用，也会报变量未定义的错误。详情请看下面的var的错误使用方式。Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})
},
onLoad() {
console.log('App onLoad');
// 用var的方式声明的i在onLoad函数内都有效，在其余函数中是没有效果的哦。
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);//输出 0-9
}
console.log('onLoad函数中i的值' + i);//输出10
},
})
var的错误使用方式
在index.js文件的addPerson:函数中，打印在onLoad函数中声明的var变量i，就会报报变量i未定义的错误。
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})
console.log('addPerson函数中i的值'+i);//异常报错
},
onLoad() {
console.log('App onLoad');
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
},
})
（三）const
用于声明常量，也具有块级作用域 const PI=3.14;
注释：
针对小程序的文章 会一直更新下去，从入门到真实项目开发，代码都在同一仓库。
文中所有的代码：代码库中包含多个项目代码，该文章 查看 代码 demo2
https://github.com/chenjianpeng/project.git小程序快速入门到项目开发 7 (网络通讯和数据解析)相关推荐
- 小程序快速入门到项目开发 2（小程序appID获取和目录结构）
你好,[程序职场]专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率 ...
- 视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程 北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
- 微信小程序快速入门+四个实战小程序（一）——入门准备
一)系列达成目标介绍 二)小程序创建的准备 1)注册开发者账号 2)下载编译器 ------------------------------------------------------ 一)系列达 ...
- 微信小程序快速入门【一】
微信小程序快速入门[一] 文章目录 微信小程序快速入门[一]
- 一、微信小程序-快速回顾(创建项目、项目结构分析)
文章目录 一. 创建微信小程序项目 1.1. 准备工作 1.2. 创建微信小程序项目 二.项目结构分析 2.1. 其他文件 2.2. 全局文件 2.3. 页面文件 前言:软件开发需要学习的东西真的是太 ...
- 微信小程序快速入门 --项目介绍
小程序项目的基本构成 ① pages 用来存放所有小程序的页面 ② utils 用来存放工具性质的模块(例如:格式化时间的自定义模块) ③ app.js 小程序项目的入口文件 ④ app.json 小 ...
- 视频教程-30小时微信小程序从入门到精通课程-基础篇-微信开发
30小时微信小程序从入门到精通课程-基础篇 8年IT开发经验,6年IT教育经验,喜欢把复杂逻辑用简单的表述传达给学生,传授编程知识,讲述生活故事 曹圣捷 ¥12.00 立即订阅 扫码下载「CSDN程序 ...
- 微信小程序python入门教程-2020Python+微信小程序开发实战（视频+课件）
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
- 微信小程序开发学习1（小程序的入门知识）
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面的几个组成部分 能够知道小程序中常见的组件如何使用 能够知 ...
最新文章
- 神经网络训练细节之batch normalization
- C语言 static - C语言零基础入门教程
- html中svg的css,HTML5 内联 SVG
- 作者：余超（1993-），男，作者：华东政法大学民商法学硕士生，主要研究方向为民商法。...
- 数学建模：评价模型——聚类分析 K-Means python实现
- 关于Java获取系统信息
- 数据结构笔记（七）-- 顺序栈
- 通过JAVA获取优酷、土豆、酷6、6间房、56视频
- 报文解析_101规约报文格式定义解析
- 教你几个白嫖百度文库的方法，亲测可用！建议收藏！
- 圣剑传说 玛娜传奇(Legend of Mana)(LOM)副原料取得方法
- excel中插入的图表保存时提示 无法保存 html,Excel技巧:将图表另存为GIF文件
- 集团公司申请企业邮箱有哪些注意事项？
- Redis——好友关注、共同关注、Feed流推送
- 如何将计算机删除的程序还原,如何去恢复电脑上误删的文件？简单恢复
- 【VUE项目实战】64、CND优化ElementUI以及首页内容定制
- 如何在Linux虚拟器里新建跟目录,虚拟机linux 6 增加根目录
- vue3不在手动引入import {ref} from ‘vue‘ 等 也能照样运行项目
- whistle的安装，浏览器和手机的配置以及使用
- 使用ScanCode扫描开源项目的license