微信小程式登入的一些個人理解，有不對的地方歡迎指出
在app頁面onLaunch進來的時候，我希望是先判斷授權。大致流程如圖上所示，針對一些坑做一些簡單介紹
請求在資料返回前發出問題
第一次進來的頁面可能是首頁，可能是很多個分享出去的頁面。所以封裝了登入註冊
因為資料請求是非同步的，解決這個問題通常是用promise，但是這個需求是跨頁面的。
解決這個問題最簡單的方法就是呼叫全域性變數建立一個方法，這個方法在建立的時候是可以執行建立page下函式的
const that = this;
//判斷token是否存在，是否已登入
if (!wx.getStorageSync('token')) {
getApp().userInfoReadyCallback = () => {
that.getData();
}
}else{
that.getData();
}
複製程式碼然後在登入成功的時候判斷是否被建立
if (getApp().userInfoReadyCallback) {
getApp().userInfoReadyCallback()
}
複製程式碼註冊成功問題
第一次進來的頁面可能是首頁，可能是很多個分享出去的頁面，所以我們應該用微信api的保留跳轉授權頁面wx.navigateTo和後退wx.navigateBack。而不是直接的頁面跳轉
細節
- 考慮到的客戶進來完成註冊和登入之後，就是每一頁需要請求都直接快取裡讀取使用者資訊。做了個後臺返回token不正確的情況重新登入。所以把請求封裝起來
// 介面請求
requests(url,data,methods){
const that = this;
let method = 'GET';
if(methods){
method = methods;
}
Toast.loading({
message:'載入中...',
duration:0
})
return new Promise ((resolve,reject) => {
wx.request({
url:that.globalData.requestUrl+url,
data,
method,
success(res){
Toast.clear();
if(res.data.status){
resolve(res)
}else{
Toast.fail(res.data.msg+'，請重新整理頁面重試！')
// 請求token不正確，重新登入
if(res.data.msg === 'token不正確'){
login()
}
}
},
fail(err){
Toast.clear();
Toast.fail('請求失敗，請重新整理頁面重試！')
reject(err)
}
})
})
},
複製程式碼- 所有的網路請求都有可能是請求失敗的請求，做好提示
- 成功的提示建議放在封裝的成功返回後，而不是呼叫時的
then
部分程式碼
//app.js
onLaunch: function () {
const that = this;
// 判斷是否授權
wx.getSetting({
success(setting) {
if (setting.authSetting['scope.userInfo']) {
// 授權成功
// 登入,成功提示封裝在login.js裡
login().catch(err => {
// 登入失敗
console.log(err)
})
} else {
// 授權失敗，跳轉授權頁面
wx.navigateTo({
url: '/pages/user/authorize/authorize',
})
}
}
})
},
複製程式碼//login.js
//登入
export function login() {
return new Promise(function (resolve, reject) {
getApp().vants.Toast.loading({
message: '登入中...',
duration: 0
})
wx.login({
success(res) {
if (res.code) {
// 登入請求
wx.request({
url: getApp().globalData.requestUrl + '/login/login/mini_login',
data: {
code: res.code
},
method: 'POST',
success(res) {
getApp().vants.Toast.clear();
switch (res.data.flag) {
case 0:
// 0未註冊，去註冊
register().catch(err=> {
getApp().vants.Toast.fail('失敗！請重新嘗試')
})
resolve(res)
break;
case 1:
// 1登入成功，快取使用者資訊，token
wx.setStorageSync('token', res.data.token)
wx.setStorageSync('userInfo', {
nickName: res.data.wx_user.nickname,
headImg: res.data.wx_user.head_img
})
// 判斷資料是否在登入之前返回
if (getApp().userInfoReadyCallback) {
getApp().userInfoReadyCallback()
}
resolve(res)
break;
case 2:
// 2登入成功，沒有token
getApp().vants.Toast.fail('登入失敗，沒有獲取到資料資訊!請重試')
resolve(res)
break;
default:
getApp().vants.Toast.fail('登入失敗，請重試')
reject(res)
break;
}
},
fail(err) {
getApp().vants.Toast.clear();
getApp().vants.Toast.fail('登入失敗，請重試')
reject(err)
}
})
} else {
reject('登入失敗!獲取登入碼失敗')
}
}
})
})
}
//註冊
export function register() {
return new Promise((resolve, reject) => {
getApp().vants.Toast.loading({
message: '註冊中...',
duration: 0
})
// 獲取使用者碼
wx.login({
success(codes) {
// 獲取使用者資訊
wx.getUserInfo({
withCredentials: true,
success(info) {
let code = codes.code
let iv = info.iv;
let encryptedData = info.encryptedData;
// 註冊請求
wx.request({
url: getApp().globalData.requestUrl + '/login/login/mini_register',
data: {
code,
iv,
encryptedData
},
method: 'POST',
success(res) {
getApp().vants.Toast.clear()
switch (res.data.flag) {
case 0:
// 授權失敗
getApp().vants.Toast.fail('授權失敗！請開啟授權')
reject(res)
break;
case 1:
// 註冊成功
login().then(()=>{
wx.navigateBack({
delta:1
})
}).catch(err => {
getApp().vants.Toast.fail('失敗！請重新嘗試')
});
resolve(res)
break;
case 2:
// 已註冊
login().then(() => {
wx.navigateBack({
delta: 1
})
}).catch(err => {
getApp().vants.Toast.fail('失敗！請重新嘗試')
})
resolve(res)
break;
default:
getApp().vants.Toast.fail('註冊失敗！請重試')
reject(res)
break;
}
},
fail() {
getApp().vants.Toast.fail('註冊失敗！請重試')
}
})
},
fail(err) {
reject(err, '註冊獲取使用者資訊失敗')
}
})
}
})
})
}
複製程式碼