参考文献: | |
---|---|
阮一峰 - es6 Promise | 微信小程序封装 request 请求 |
小程序选项卡页面切换 + 数据封装 + git | |
什么是跨域? Promise全解 - 异步操作 | |
小程序获取用户信息介绍和代码 (大官人博客) | |
Acitylion - 分页懒加载 |
以Sync结尾都是同步方法。同步方法和异步方法的区别是:
操作 | 异步方法 | 同步方法 |
---|---|---|
插入 | wx.setStorage | wx.setStorageSync |
读取 | wx.getStorage | wx.getStorageSync |
删除 | wx.removeStorage | wx.removeStorageSync |
清空 | wx.clearStorage | wx.clearStorageSync |
获取缓存信息 | wx.getStorageInfo | wx.getStorageInfoSync |
Page.prototype.setData():
将数据从 逻辑层 发送到 视图层
(异步),同时改变对应的 this.data 的值(同步);—— | |
---|---|
1、一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息 | |
2、Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value |
—— this与that:this.setData报错
直接在wx:request()的 success 回调函数中直接使用 this.setData() 会报一个错误:this.setData is not a function;
此时的that代表相对于 onLoad() 的当前对象
,然后在success回调函数中直接使用 that.setData() 即可;当前实体的一个指针
,当处于不同的实体之中时,this指针随即改变,可以看到this在微信开发工具中是以蓝色显示的,是系统变量,因此,在嵌套实体中,需要另外一个变量来操作你所需要操作的实体;var that=this; //把this对象复制到临时变量that
在使用wx.request时,我们就可以使用 header 来添加请求头部信息,把请求头信息一起传递给服务器
;
“请求头”
;函数success:
dataType:传输的数据类型- text / json , 该语句会将服务器端的数据自动转为string类型
;
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
url | String | 是 | 开发者服务器接口地址 | |
data | Object/String/ArrayBuffer | 否 | 请求的参数 | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。 | |
method | String | 否 | GET | 有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
dataType | String | 否 | json | 如果设为json,会尝试对返回的数据做一次 JSON.parse |
responseType | String | 否 | text | 设置响应的数据类型。合法值:text、arraybuffer |
success | Function | 否 | 收到开发者服务成功返回的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
http.js:
function req(url, data, cb) {
let server = 'http://192.165.1.189:8080'; //正式域名
wx.request({
url: server + url,
// 请求参数data
data: data,
method: 'POST',
//设置参数内容类型为json
header: { 'Content-Type': 'application/json' },
success: function (json) {
console.log(json);
typeof cb == "function" && cb(json)
},
fail: function () {
wx.hideLoading();
wx.showToast({
title: '数据获取失败',
icon: 'none'
})
},
dataType: "json" //传输的数据类型,text / json 该语句会将服务器端的数据自动转为string类型
});
}
//让函数出去
module.exports = {
req: req
}
typeof cb == “function” && cb(res.data) :
利用的&&的运算规律,首先判断cb是不是一个方法, 这里的==可以作为类型是否相当的判断,然后在&&中如果前面的不满足,后面的则不会执行;
如果是cb是一个方法,调用cb方法,并且传入success成功回调的userinfo参数
并且return 的是回调函数,而不是具体的数据
app.js 引用 http.js:
为了其他文件方便调用此方法,我们在根目录的app.js文件中将其注册成为全局函数,如下:
const app = getApp()
const http = require('utils/http.js');
App({
//全局调用
func: {
req: http.req
}
})
页面调用封装函数:
这时这个req就是全局的了,在调用时我们可以使用getApp.func.req()来调用,具体如下:
var app = getApp(); //获取app里的值,实例化
Page({
/**
* 页面的初始数据
*/
data: {
currentId: 0,
emitNumber: 0,
emitList: [],
},
onLoad: function (res) {
/*
var that = this;
1.0\把page对象赋值给新建的对象
2.0\重置data{}里数据时 setData 方法的 this 应指向 req() 函数的this,
如果在下方的sucess直接写this就变成了wx.request()的this了
*/
var that = this;
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 2000
})
app.func.req('/redPackets/findRedPacketsDetail', { rid: 1, id: 1 }, function (res) {
//res相当于ajax里面的返回的数据
if (res.data.data && res.data.data.packets && res.data.data.receiveLogs) {
//官方文档指出必须使用setData()方法才能将数据传走
that.setData({
//res赋值
emitHead: res.data.data.packets, //数据集合
emitList: res.data.data.receiveLogs
})
}
wx.hideToast();
});
},
//两栏切换:
clickTab : function(e) {
var that = this
var currType = e.currentTarget.dataset.current;
this.setData({
currentTab: currType
})
}
})