從小程式釋出到現在,官方api 變動了好幾個版本
首先我們先看一下小程式的生命週期
app.js 為小程式的啟動入口檔案
onLauch: 小程式初始化回掉,生命週期內只執行一次
onShow: 小程式開啟或者從後臺喚起時的回撥
onHide: 小程式從前臺進入後臺時
onError: 小程式發生指令碼錯誤,或者 api 呼叫失敗時觸發,會帶上錯誤資訊
頁面生命週期:
onLoad:註冊頁面的時候執行,只執行一次
onShow: 頁面在前臺展示時執行,顯示一次執行一次
onReady: 頁面初次渲染完成時執行,冷啟動時不執行
onHide: 頁面從前臺進入後臺
onUnload: 頁面登出時執行
個人覺得 小程式app中應該增加一個onUnload週期,頁面的銷燬現實場景個人還沒有使用到
===========================================
下面我們來看一下 小程式的註冊流程
針對小程式開發者看下圖
1. 檢查是否是登陸介面
2. 判斷session
3. wx.login–》獲取token
4. 執行原有回掉
好處:讓後續開發者 忽略登陸流程邏輯
function doLogin(callback, obj) {
if (obj.isLogin) {
// 登入介面,直接放過
// 直接放過,讓其走下去
typeof callback === "function" && callback();
} else if(session) {
// 快取中有session
if(sessionExpireTime && new Date().getTime() > sessionExpire) {
// 如果有設定本地session快取時間,且快取時間已到
session = ``;
doLogin(callback, obj);
} else {
typeof callback === "function" && callback();
}
} else if (logining) {
// 正在登入中,請求輪詢稍後,避免重複呼叫登入介面
flow.wait(`doLoginFinished`, function () {
doLogin(callback, obj);
})
} else {
// 快取中無session
logining = true;
obj.count++;
// 記錄呼叫wx.login前的時間戳
// 執行login 獲取code
obj._loginStartTime = new Date().getTime();
console.log(`wx.login`);
wx.login({
complete: function () {
obj.count--;
// 記錄wx.login返回資料後的時間戳,用於上報
obj._loginEndTime = new Date().getTime();
if (typeof reportCGI === "function") {
reportCGI(`wx_login`, obj._loginStartTime, obj._loginEndTime, request);
}
typeof obj.complete === "function" && obj.count == 0 && obj.complete();
},
success: function (res) {
if (res.code) {
var data;
// codeToSession.data支援函式
// 上傳伺服器操作
if (typeof codeToSession.data === "function") {
data = codeToSession.data();
} else {
data = codeToSession.data || {};
}
data[codeToSession.codeName] = res.code;
obj.count++;
requestWrapper({
url: codeToSession.url,
data: data,
method: codeToSession.method,
isLogin: true,
report: codeToSession.report || codeToSession.url,
success: function (s) {
session = s;
sessionIsFresh = true;
// 如果有設定本地session過期時間
if(sessionExpireTime) {
sessionExpire = new Date().getTime() + sessionExpireTime;
wx.setStorage({
key: sessionExpireKey,
data: sessionExpire
})
}
// 執行回掉
typeof callback === "function" && callback();
wx.setStorage({
key: sessionName,
data: session
})
},
complete: function () {
obj.count--;
typeof obj.complete === "function" && obj.count == 0 && obj.complete();
logining = false;
flow.emit(`doLoginFinished`);
},
fail: codeToSession.fail || null
});
} else {
fail(obj, res);
console.error(res);
// 登入失敗,解除鎖,防止死鎖
logining = false;
flow.emit(`doLoginFinished`);
}
},
fail: function (res) {
fail(obj, res);
console.error(res);
// 登入失敗,解除鎖,防止死鎖
logining = false;
flow.emit(`doLoginFinished`);
}
})
}
}
複製程式碼
處理頁面登陸互動的兩種方式
1. app.js 註冊回掉函式,進入page 註冊這個回掉函式,登陸完成執行app.logincallback
page.js
const app = new getApp()
onLoad(){
app.loginCallback = () => {
this.init()
}
}
複製程式碼
這種方式可以,而且具有頁面控制的靈活性,但靈活性帶來的就是出錯的機率會增大很多
2. 在login頁面獲取登陸的前一個頁面,然後登陸完成後重新整理前一個頁面狀態
login.js
werequest.login().then(function(){
let pages = getCurrentPages();
let Page = pages[pages.length - 1];//當前頁
let prevPage = pages[pages.length - 2]; //上一個頁面
prevPage.onLoad()
})
複製程式碼
個人比較提交這種方式,因為其他頁面只需要處理自己的頁面邏輯就可以