【移動應(yīng)用開發(fā)技術(shù)】怎么讓你的小程序健步如飛

【移動應(yīng)用開發(fā)技術(shù)】怎么讓你的小程序健步如飛

這篇文章給大家分享的是有關(guān)怎么讓你的小程序健步如飛的內(nèi)容。在下覺得挺實用的，因此分享給大家做個參考，一起跟隨在下過來看看吧。通過這種技術(shù)，可以縮短用戶的等待時間，極大地提升用戶的使用體驗。由于那篇文章并未給出實現(xiàn)方式，只是講解了技術(shù)原理，因此本文就來為大家講下技術(shù)實現(xiàn)方式?？蚣軆?yōu)缺點(diǎn)優(yōu)點(diǎn)：預(yù)加載下一個頁面的數(shù)據(jù)，提高了頁面的加載速度，輕量級的協(xié)議（200~300ms左右就能接收到數(shù)據(jù)）能輕松讓小程序頁面打開后數(shù)據(jù)瞬間加載，幾乎不出現(xiàn)空頁面。讓同種業(yè)務(wù)的代碼保持在一個類中，不會破壞項目結(jié)構(gòu)。代碼量非常少，對原本業(yè)務(wù)影響非常少。實現(xiàn)預(yù)加載后想刪掉預(yù)加載？只需在實現(xiàn)的類中刪除一個字符串即可。缺點(diǎn)：需要你按情況替換setData為$setData需要開發(fā)者非常清楚各情況下的上下文是什么。如果你的協(xié)議非常耗時，達(dá)到400ms以上的，使用這種優(yōu)化方式效果就不明顯了。有網(wǎng)友發(fā)現(xiàn)，這個項目無法運(yùn)行在使用了組件的小程序中，所以大家如果使用了組件的話，就不要直接用這個項目了。不過還是推薦你吸收下這個項目的思想，畢竟工程師在工作中思想是很重要的。這里就不為大家展示最終效果了，感興趣的朋友可以自行嘗試下。如何集成重要聲明：我的小程序是遵循ES6標(biāo)準(zhǔn)寫的，里面用了classextends及解構(gòu)賦值等，如果看不懂的話，請學(xué)習(xí)下ES6??！如果你的項目是用的ES5，那就仔細(xì)閱讀后續(xù)文章，體會預(yù)加載技術(shù)的核心思想，如果核心思想理解了，分分鐘寫一個出來，對吧~~首先，你要有個基類CommonPage小程序中的每一個Page類都繼承該基類，這樣的話才方便統(tǒng)一管理。比如下面的IndexPage頁面//

pages/index/index.js

import

CommonPage

from

"../CommonPage";

class

IndexPage

extends

CommonPage

{

constructor(...args)

{

super(...args);

this.data

=

{

testStr:

'this

is

the

firstPage'

}

}

onLoad(options)

{

}

}

Page(new

IndexPage());IndexPage是第一個頁面，不需要預(yù)加載，SecondPage是第二個頁面，我們來模擬下SecondPage的預(yù)加載方式。接下來看到的this.$route()this.$put()this.$take()this.$resolve()this.$reject()等帶$符號的都是基類中實現(xiàn)的方法。1、給IndexPage頁面添加跳轉(zhuǎn)按鈕。<!--index.wxml-->

<view

class="container">

<view

bindtap="toSecondPage"

hover-class="press-style"

class="normal-style"

hover-stay-time="100">

閃電加載第二個頁面</view>

<view>300毫秒

閃電加載方式</view>

</view>注意：這里添加的class="normal-style"hover-stay-time="100"是非常重要的，如果不添加點(diǎn)擊態(tài)，會很影響體驗。2、給IndexPage頁面添加預(yù)加載專用跳轉(zhuǎn)方式。

toSecondPage

=

function

()

{

//

this.$route是預(yù)加載的頁面跳轉(zhuǎn)方式，以wx.navigateTo方式跳轉(zhuǎn)。這個方法是在CommonPage中實現(xiàn)的。

this.$route({path:

'../second/second',

query:

{count:

10,

title:

'這是第二個頁面'},

clazzName:

'SecondPage'});

//

這是小程序原生的普通加載方式

//

wx.navigateTo({

//

url:

'../second/second?count=10&title=這是第二個頁面'

//

})

}this.$route({path,query,clazzName});這個方法的參數(shù)含義是：path：頁面路徑，支持絕對路徑和相對路徑。query：需要傳遞的參數(shù)。這是一個object類型的。clazzName：需要跳轉(zhuǎn)的頁面的類名。這個介紹SecondPage時再說。其實你可能會問，既然有path了，為什么還要clazzName？這個問題會在介紹技術(shù)原理時詳細(xì)說，那是下一篇的事兒了。到這里，如果你也是用ES6的規(guī)范來實現(xiàn)類的，可以看到，在IndexPage中，你只需將跳轉(zhuǎn)方式修改為this.$route({path,query,clazzName});即可。3、給SecondPage頁面添加預(yù)加載專用的初始化方法。//

pages/second/second.js

import

CommonPage

from

"../CommonPage";

class

SecondPage

extends

CommonPage

{

constructor(...args)

{

//super(...args)一定要寫，他會將clazzName與下面的data進(jìn)行合并。

super(...args);

//這個$init(obj)中注入的obj就是頁面初始時的data

super.$init({

arr:

[]

});

}

$onNavigator(query)

{

//這里的query是從this.$route中傳遞來的query

console.log('閃電?加載時接收到的參數(shù)',

query);

this.$put('second-data',

this.initData.bind(this),

query);

};

initData

=

function

(query,

resolve,

reject)

{

//這里的query是在this.$put()中傳遞過來的

//resolve在協(xié)議成功時回調(diào)

//reject在協(xié)議失敗時回調(diào)

//模擬網(wǎng)絡(luò)請求

setTimeout(()

=>

{

if

(typeof

query.count

===

"string")

{

query.count

=

parseInt(query.count);

}

this.data.arr.splice(0,

this.data.arr.length);

for

(let

i

=

0;

i

<

query.count;

i++)

{

this.data.arr.push({id:

i,

name:

`第${i}個`,

age:

parseInt(Math.random()

*

20

+

i)})

}

this.$setData(this.data);

this.$resolve(this.data);//或者

resolve(this.data);只有調(diào)用了resolve或者reject方法，才能在this.$take()的then()方法中獲取到值。

},

300);

};

onLoad(options)

{

const

lightningData

=

this.$take('second-data');

if

(lightningData)

{

lightningData.then((data)

=>

{

//成功回調(diào)，resolve(data)調(diào)用時觸發(fā)

data就是resolve傳遞的參數(shù)

this.$setData(data);

},(data,

error)=>{

//失敗回調(diào)，reject(data,

error)調(diào)用時觸發(fā)，data和error是reject傳遞的參數(shù)。

});

return;

}

this.initData(options);

}

}

//這里注入的clazzName:

'SecondPage'，與this.$route({path,

query,

clazzName});中的clazzName名稱與其一致即可

Page(new

SecondPage({clazzName:

'SecondPage'}));大概是這么幾步：這個類需要在new時，將clazzName注入，this.$route({path,query,clazzName});中的clazzName名稱與其一致即可。需要在SecondPage中注入新的生命周期函數(shù)，也就是預(yù)加載方法。在執(zhí)行this.$route時，你在this.$route中傳遞的clazzName是什么，這個框架就會自動去找匹配一致的類，調(diào)用該類的$onNavigator方法。在$onNavigator中調(diào)用this.$put(key,fun,query)參數(shù)分別是鍵、異步請求方法、異步請求方法的參數(shù)。在異步請求方法將this.setData替換為this.$setData()，使用this.$resolve(data)或者this.$reject(data,error)來回調(diào)成功或失敗。在onLoad中使用this.$take(key).then(success,fail)來獲取異步結(jié)果，分別對應(yīng)了resolve和reject回調(diào)。如果你沒有使用預(yù)加載，或者預(yù)加載失敗，那么this.$take(ke