你好，【程序职场】专注于：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
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
