前言
我们先简单封装一个统一的http请求方法，方便之后复用，并写好登陆的方法。
一、网络请求
我们先将域名定义到全局数据中，之后的接口请求全都走相对地址
globalData: {
userInfo: null,
hasUserInfo: false,
apiDomain: 'https://example.com/api', //接口地址
},
封装网络请求，这里我们使用Bearer Token，Restful风格API状态码与http请求状态码一致。
//全局统一调用接口的方法
apiRequest: function (options) {
wx.request({
url: this.globalData.apiDomain + options.url,
method: options.method ? options.method : 'GET',
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
'Accept': 'application/json',
},
dataType: 'json',
data: options.data,
success: res => {
switch (res.statusCode) {
case 200:
options.success(res);
break;
case 401:
this.toLogin();
break;
case 422:
break;
case 404:
wx.showToast({
title: '请求地址不存在',
icon: 'none'
})
break;
default:
wx.showToast({
title: '出错了～请稍后再试',
icon: 'none'
})
}
},
fail: res => {
if (options.fail) {
options.fail(res);
}
},
complete: res => {
if (options.complete) {
options.complete(res);
}
}
});
},
二、登陆逻辑
2.1 自动登陆
我们在app.js的onLuanch()阶段执行登陆并获取用户信息，进而获取服务端token
onLaunch: function() {
this.getUserInfo();
}
/**
* 登陆并获取用户信息、token
* 抽出来方便其他含有登陆按钮的页面直接调用该方法
* @param {*} callback
*/
getUserInfo: function(callback = null) {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
var code = res.code;
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
this.globalData.hasUserInfo = true
if (!this.checkIsLogin()) {
this.getToken(code, res.encryptedData, res.iv);
}
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
callback && callback(res);
}
})
}
}
})
}
});
},
2.2 检查是否服务端登陆
我们定义一个检查是否登陆的方法
/**
* 验证登录
*/
checkIsLogin(autoLogin = false) {
// 从本地存储中获取token
if (wx.getStorageSync('token') != '') {
return true;
}
if (autoLogin) {
this.toLogin();
} else {
return false;
}
},
/**
* 跳转登陆页
* 这里我们将用户中心页作为登陆页，方便初次拒绝登陆的用户，继续点击登陆
*/
toLogin() {
wx.navigateTo({
url: '../mine/mine',
});
},
由于微信小程序要求开发者必须提供一个opentype为getUserInfo的button来进行登陆授权操作，所以我们办法在js中直接获取用户信息，这里我们将用户中心页的头像作为点击登陆的按钮，所以只要重定向到用户中心页即可。
2.3 获取token
/**
* 获取token
*/
getToken(code, encryptedData, iv, callback = null) {
//调后端接口获取token
this.apiRequest({
url: '/login',
method: 'POST',
data: {
'code': code,
'data': encryptedData,
'iv': iv
},
success: res => {
// 成功获取后将token存入缓存
wx.setStorageSync('token', res.data.token);
callback && callback();
}
});
}
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
总结
<font color=#999AAA >我们将网络请求、登陆等全局性的方法封装到app.js中，通过代码复用，可以大大减少我们代码量，同时方便其他页面直接调用。
在后续的页面中，我们将陆续使用它们。
这里我们没有封装api层，因为项目比较小，接口基本不存在复用，所以选择在各页面的函数中调用http请求。同时没有做同步处理，均是异步请求，有需求的同学可自行改进这些方面。
系列文章
- 手把手教你做短视频去水印微信小程序（0-概述）
- 手把手教你做短视频去水印微信小程序（1-封装网络请求&登陆逻辑）
- 手把手教你做短视频去水印微信小程序（2-首页）
- 手把手教你做短视频去水印微信小程序（3-个人中心）
- 手把手教你做短视频去水印微信小程序（4-转换结果页）
- 手把手教你做短视频去水印微信小程序（5-服务端代码）
- 手把手教你做短视频去水印微信小程序（6-广告代码）【待完成】
- 手把手教你做短视频去水印微信小程序（7-Q&A整理）【待完成】
github源码地址
20201221145928601.jpg
欢迎浏览，欢迎star～
