小程序改變onLoad執(zhí)行時(shí)機(jī)的方法
小編給大家分享一下小程序改變onLoad執(zhí)行時(shí)機(jī)的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
10余年的凌海網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整凌海建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“凌海網(wǎng)站設(shè)計(jì)”,“凌海網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
也許在小程序所有生命周期里，我們用的最多的就是 onLoad，一大堆代碼都要在初始化的時(shí)候執(zhí)行。
很多時(shí)候，初始化的代碼是每個(gè)頁面共用的，比如獲取用戶信息、獲取定位等：
Page({
onLoad() {
this.userData = getUserData()
wx.getLocation({
type: 'wgs84',
success (res) {
// 業(yè)務(wù)代碼
// ...
}
})
}
// ...
})久而久之，每個(gè)頁面的 js 里都是如上的重復(fù)代碼。如果可以先執(zhí)行完通用的初始化代碼，再執(zhí)行每個(gè)頁面各自的 onLoad 多好，可惜小程序并沒有提供類似的鉤子函數(shù)，那就自己來吧。
代理 onLoad
按照前幾篇的方法，可以代理原有的 onLoad 事件：
var originPage = Page
function MyPage(config) {
this.lifetimeBackup = {
onLoad: config.onLoad
}
config.onLoad = function(options) {
// 自定義代碼
// 公共的初始化代碼
this.userData = getUserData()
wx.getLocation({
type: 'wgs84',
success (res) {
// 執(zhí)行 onLoad
this.lifetimeBackup.onLoad.call(this, options)
}
})
}
// ...
originPage(config)
}當(dāng)然，實(shí)際開發(fā)過程中的初始化代碼不可能這么少，可以用很多方式把它抽離出去，比如這樣：
// utils/initial.js
function initial(callback) {
this.userData = getUserData()
wx.getLocation({
type: 'wgs84',
success (res) {
callback()
}
})
}
// utils/wx.js
var initial = require('./initial')
var originPage = Page
function MyPage(config) {
this.lifetimeBackup = {
onLoad: config.onLoad
}
config.onLoad = function(options) {
initial(() => {
this.lifetimeBackup.onLoad.call(this, options)
})
}
// ...
originPage(config)
}也可以使用更多高級(jí)的方法抽離出去，比如 event bus 之類的，就不多贅述。
看似很簡單，但其實(shí)這樣忽略了一個(gè)問題 —— 生命周期順序被打亂了！如果初始化方法里有異步代碼，那首先執(zhí)行的可能就是 onShow ，而不是約定的 onLoad。
恢復(fù)生命周期順序
為了保證生命周期函數(shù)能夠按順序執(zhí)行，可以先臨時(shí)清空生命周期函數(shù)，然后再依次執(zhí)行，如下代碼所示：
// utils/wx.js
const LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady']
var initial = require('./initial')
var originPage = Page
function MyPage(config) {
LIFETIME_EVENTS.forEach((event) => {
// 備份生命周期函數(shù)
this.lifetimeBackup[event] = config[event]
// 臨時(shí)清空
config[event] = function() {}
})
config.onLoad = function(options) {
initial(() => {
// 依次執(zhí)行生命周期函數(shù)
LIFETIME_EVENTS.forEach((event) => {
this.lifetimeBackup[event].call(this, options)
})
})
}
// ...
originPage(config)
}注意上述代碼還是有問題的，當(dāng)小程序業(yè)務(wù)跳走再返回或者切后臺(tái)到前臺(tái)時(shí)，onShow 無法正常觸發(fā)，因?yàn)楸辉O(shè)置為空函數(shù)了。
為了保證 onShow 等生命周期函數(shù)的后續(xù)正常運(yùn)行，需要在依次執(zhí)行完生命周期函數(shù)后，再把它們恢復(fù)到 config 下，這是必不可少的。完整代碼如下：
// utils/wx.js
const LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady']
var initial = require('./initial')
var originPage = Page
function MyPage(config) {
LIFETIME_EVENTS.forEach((event) => {
// 備份生命周期函數(shù)
this.lifetimeBackup[event] = config[event]
// 臨時(shí)清空
config[event] = function() {}
})
config.onLoad = function(options) {
initial(() => {
// 依次執(zhí)行生命周期函數(shù)
LIFETIME_EVENTS.forEach((event) => {
this.lifetimeBackup[event].call(this, options)
// 執(zhí)行完后，恢復(fù)過來
config[event] = this.lifetimeBackup[event]
})
})
}
// ...
originPage(config)
}代理了 onLoad 后，就可以手動(dòng)控制其執(zhí)行的時(shí)機(jī)，可以折騰的事情就多了很多。比如當(dāng)初始化函數(shù)需要執(zhí)行（請求）的內(nèi)容比較多，耗時(shí)比較長時(shí)，可以統(tǒng)一給頁面增加一些 loading 提示等?？傊?，可以自由控制了。
以上是“小程序改變onLoad執(zhí)行時(shí)機(jī)的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文名稱：小程序改變onLoad執(zhí)行時(shí)機(jī)的方法
轉(zhuǎn)載來于：http://jinyejixie.com/article22/iicgcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
