前言
以前看到過(guò)一篇關(guān)于提高小程序應(yīng)用速度的文章，文章主要講述了如何實(shí)現(xiàn)小程序在觸發(fā)頁(yè)面跳轉(zhuǎn)前就請(qǐng)求協(xié)議，利用跳轉(zhuǎn)頁(yè)面的短短200~300ms的時(shí)間，獲取到數(shù)據(jù)并渲染到頁(yè)面上，實(shí)現(xiàn)數(shù)據(jù)在小程序頁(yè)面中預(yù)加載。
通過(guò)這種技術(shù)，可以縮短用戶的等待時(shí)間，極大地提升用戶的使用體驗(yàn)。由于那篇文章并未給出實(shí)現(xiàn)方式，只是講解了技術(shù)原理，因此本文就來(lái)為大家講下技術(shù)實(shí)現(xiàn)方式。
框架優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
-
預(yù)加載下一個(gè)頁(yè)面的數(shù)據(jù)，提高了頁(yè)面的加載速度，輕量級(jí)的協(xié)議（200~300ms左右就能接收到數(shù)據(jù)）能輕松讓小程序頁(yè)面打開(kāi)后數(shù)據(jù)瞬間加載，幾乎不出現(xiàn)空頁(yè)面。
-
讓同種業(yè)務(wù)的代碼保持在一個(gè)類中，不會(huì)破壞項(xiàng)目結(jié)構(gòu)。
-
代碼量非常少，對(duì)原本業(yè)務(wù)影響非常少。
-
實(shí)現(xiàn)預(yù)加載后想刪掉預(yù)加載？只需在實(shí)現(xiàn)的類中刪除一個(gè)字符串即可。
缺點(diǎn)：
-
需要你按情況替換setData為$setData
-
需要開(kāi)發(fā)者非常清楚各情況下的上下文是什么。
-
如果你的協(xié)議非常耗時(shí)，達(dá)到400ms以上的，使用這種優(yōu)化方式效果就不明顯了。
-
有網(wǎng)友發(fā)現(xiàn)，這個(gè)項(xiàng)目無(wú)法運(yùn)行在使用了組件的小程序中，所以大家如果使用了組件的話，就不要直接用這個(gè)項(xiàng)目 了。不過(guò)還是推薦你吸收下這個(gè)項(xiàng)目的思想，畢竟工程師在工作中思想是很重要的。
這里就不為大家展示最終效果了，感興趣的朋友可以自行嘗試下。
（免費(fèi)學(xué)習(xí)視頻分享：php視頻教程）
如何集成
重要聲明：我的小程序是遵循ES6標(biāo)準(zhǔn)寫(xiě)的，里面用了class extends及解構(gòu)賦值等，如果看不懂的話，請(qǐng)學(xué)習(xí)下ES6?。∪绻愕捻?xiàng)目是用的ES5，那就仔細(xì)閱讀后續(xù)文章，體會(huì)預(yù)加載技術(shù)的核心思想，如果核心思想理解了，分分鐘寫(xiě)一個(gè)出來(lái)，對(duì)吧 ~ ~
首先，你要有個(gè)基類CommonPage
小程序中的每一個(gè)Page類都繼承該基類，這樣的話才方便統(tǒng)一管理。
比如下面的IndexPage頁(yè)面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
IndexPage是第一個(gè)頁(yè)面，不需要預(yù)加載，SecondPage是第二個(gè)頁(yè)面，我們來(lái)模擬下SecondPage的預(yù)加載方式。
接下來(lái)看到的this.$route() this.$put() this.$take() this.$resolve() this.$reject()等帶$符號(hào)的都是基類中實(shí)現(xiàn)的方法。
1、給IndexPage頁(yè)面添加跳轉(zhuǎn)按鈕。
|
1 2 3 4 5 |
|
注意：這里添加的class="normal-style" hover-stay-time="100"是非常重要的，如果不添加點(diǎn)擊態(tài)，會(huì)很影響體驗(yàn)。
2、給IndexPage頁(yè)面添加預(yù)加載專用跳轉(zhuǎn)方式。
|
1 2 3 4 5 6 7 8 9 |
|
this.$route({path, query, clazzName});這個(gè)方法的參數(shù)含義是：
-
path：頁(yè)面路徑，支持絕對(duì)路徑和相對(duì)路徑。
-
query：需要傳遞的參數(shù)。這是一個(gè)object類型的。
-
clazzName：需要跳轉(zhuǎn)的頁(yè)面的類名。這個(gè)介紹SecondPage時(shí)再說(shuō)。
其實(shí)你可能會(huì)問(wèn)，既然有path了，為什么還要clazzName？這個(gè)問(wèn)題會(huì)在介紹技術(shù)原理時(shí)詳細(xì)說(shuō)，那是下一篇的事兒了。
到這里，如果你也是用ES6的規(guī)范來(lái)實(shí)現(xiàn)類的，可以看到，在IndexPage中，你只需將跳轉(zhuǎn)方式修改為this.$route({path, query, clazzName});即可。
3、給SecondPage頁(yè)面添加預(yù)加載專用的初始化方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
|
大概是這么幾步：
-
這個(gè)類需要在new時(shí)，將clazzName注入，this.$route({path, query, clazzName});中的clazzName名稱與其一致即可。
-
需要在SecondPage中注入新的生命周期函數(shù)，也就是預(yù)加載方法。在執(zhí)行this.$route時(shí)，你在this.$route中傳遞的clazzName是什么，這個(gè)框架就會(huì)自動(dòng)去找匹配一致的類，調(diào)用該類的$onNavigator方法。
-
在$onNavigator中調(diào)用this.$put(key,fun,query)參數(shù)分別是鍵、異步請(qǐng)求方法、異步請(qǐng)求方法的參數(shù)。
-
在異步請(qǐng)求方法將this.setData替換為this.$setData()，使用this.$resolve(data)或者this.$reject(data,error)來(lái)回調(diào)成功或失敗。
-
在onLoad中使用this.$take(key).then(success,fail)來(lái)獲取異步結(jié)果，分別對(duì)應(yīng)了resolve和reject回調(diào)。如果你沒(méi)有使用預(yù)加載，或者預(yù)加載失敗，那么this.$take(key)方法返回空，由此可以判斷是否使用了預(yù)加載進(jìn)入頁(yè)面！
這么做的話，實(shí)現(xiàn)了在跳轉(zhuǎn)前先把下一個(gè)頁(yè)面的協(xié)議發(fā)出去，而且還讓同種業(yè)務(wù)的代碼保持在一個(gè)類中，不會(huì)破壞項(xiàng)目結(jié)構(gòu)!
在實(shí)現(xiàn)了預(yù)加載后，如果不想用預(yù)加載了，只需要?jiǎng)h掉new SecondPage()時(shí)注入的clazzName即可！
返回列表
