小編給大家分享一下小程序改變onLoad執(zhí)行時機的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司主要業(yè)務有網(wǎng)站營銷策劃、網(wǎng)站設計、成都做網(wǎng)站、微信公眾號開發(fā)、成都微信小程序、H5技術(shù)、程序開發(fā)等業(yè)務。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務的過程中，公司還積累了豐富的行業(yè)經(jīng)驗、成都全網(wǎng)營銷資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務和保障體系。 

也許在小程序所有生命周期里，我們用的最多的就是 onLoad，一大堆代碼都要在初始化的時候執(zhí)行。

很多時候，初始化的代碼是每個頁面共用的，比如獲取用戶信息、獲取定位等：

Page({
 onLoad() {
  this.userData = getUserData()
  wx.getLocation({
   type: 'wgs84',
   success (res) {
    // 業(yè)務代碼
    // ...
   }
  })
 }
 // ...
})

久而久之，每個頁面的 js 里都是如上的重復代碼。如果可以先執(zhí)行完通用的初始化代碼，再執(zhí)行每個頁面各自的 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)
}

當然，實際開發(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)
}

也可以使用更多高級的方法抽離出去，比如 event bus 之類的，就不多贅述。

看似很簡單，但其實這樣忽略了一個問題 —— 生命周期順序被打亂了！如果初始化方法里有異步代碼，那首先執(zhí)行的可能就是 onShow ，而不是約定的 onLoad。

恢復生命周期順序

為了保證生命周期函數(shù)能夠按順序執(zhí)行，可以先臨時清空生命周期函數(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]
  // 臨時清空
  config[event] = function() {}
 })
 config.onLoad = function(options) {
  initial(() => {
   // 依次執(zhí)行生命周期函數(shù)
   LIFETIME_EVENTS.forEach((event) => {
    this.lifetimeBackup[event].call(this, options)
   })
  })
 }
 // ...
 originPage(config)
}

注意上述代碼還是有問題的，當小程序業(yè)務跳走再返回或者切后臺到前臺時，onShow 無法正常觸發(fā)，因為被設置為空函數(shù)了。

為了保證 onShow 等生命周期函數(shù)的后續(xù)正常運行，需要在依次執(zhí)行完生命周期函數(shù)后，再把它們恢復到 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]
  // 臨時清空
  config[event] = function() {}
 })
 config.onLoad = function(options) {
  initial(() => {
   // 依次執(zhí)行生命周期函數(shù)
   LIFETIME_EVENTS.forEach((event) => {
    this.lifetimeBackup[event].call(this, options)
    // 執(zhí)行完后，恢復過來
    config[event] = this.lifetimeBackup[event]
   })
  })
 }
 // ...
 originPage(config)
}

代理了 onLoad 后，就可以手動控制其執(zhí)行的時機，可以折騰的事情就多了很多。比如當初始化函數(shù)需要執(zhí)行（請求）的內(nèi)容比較多，耗時比較長時，可以統(tǒng)一給頁面增加一些 loading 提示等。總之，可以自由控制了。

以上是“小程序改變onLoad執(zhí)行時機的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁題目：小程序改變onLoad執(zhí)行時機的方法-創(chuàng)新互聯(lián)
瀏覽路徑：http://chinadenli.net/article24/gceje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、服務器托管、網(wǎng)站設計公司、網(wǎng)站改版、搜索引擎優(yōu)化、網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)