怎么讓你的小程序健步如飛

這篇文章給大家分享的是有關怎么讓你的小程序健步如飛的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

通過這種技術，可以縮短用戶的等待時間，極大地提升用戶的使用體驗。由于那篇文章并未給出實現方式，只是講解了技術原理，因此本文就來為大家講下技術實現方式。

框架優缺點

優點：

• 預加載下一個頁面的數據，提高了頁面的加載速度，輕量級的協議（200~300ms左右就能接收到數據）能輕松讓小程序頁面打開后數據瞬間加載，幾乎不出現空頁面。

• 讓同種業務的代碼保持在一個類中，不會破壞項目結構。

• 代碼量非常少，對原本業務影響非常少。

• 實現預加載后想刪掉預加載？只需在實現的類中刪除一個字符串即可。

缺點：

• 需要你按情況替換setData為$setData

• 需要開發者非常清楚各情況下的上下文是什么。

• 如果你的協議非常耗時，達到400ms以上的，使用這種優化方式效果就不明顯了。

• 有網友發現，這個項目無法運行在使用了組件的小程序中，所以大家如果使用了組件的話，就不要直接用這個項目 了。不過還是推薦你吸收下這個項目的思想，畢竟工程師在工作中思想是很重要的。

這里就不為大家展示最終效果了，感興趣的朋友可以自行嘗試下。

如何集成

重要聲明：我的小程序是遵循ES6標準寫的，里面用了class extends及解構賦值等，如果看不懂的話，請學習下ES6！！如果你的項目是用的ES5，那就仔細閱讀后續文章，體會預加載技術的核心思想，如果核心思想理解了，分分鐘寫一個出來，對吧 ~ ~

首先，你要有個基類CommonPage

小程序中的每一個Page類都繼承該基類，這樣的話才方便統一管理。

比如下面的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是第一個頁面，不需要預加載，SecondPage是第二個頁面，我們來模擬下SecondPage的預加載方式。

接下來看到的this.$route() this.$put() this.$take() this.$resolve() this.$reject()等帶$符號的都是基類中實現的方法。

1、給IndexPage頁面添加跳轉按鈕。

<!--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"是非常重要的，如果不添加點擊態，會很影響體驗。

2、給IndexPage頁面添加預加載專用跳轉方式。

 toSecondPage = function () {
        // this.$route是預加載的頁面跳轉方式，以wx.navigateTo方式跳轉。這個方法是在CommonPage中實現的。
        this.$route({path: '../second/second', query: {count: 10, title: '這是第二個頁面'}, clazzName: 'SecondPage'});
		
		// 這是小程序原生的普通加載方式
        // wx.navigateTo({
        //     url: '../second/second?count=10&title=這是第二個頁面'
        // })
    }

this.$route({path, query, clazzName});這個方法的參數含義是：

• path：頁面路徑，支持絕對路徑和相對路徑。

• query：需要傳遞的參數。這是一個object類型的。

• clazzName：需要跳轉的頁面的類名。這個介紹SecondPage時再說。

其實你可能會問，既然有path了，為什么還要clazzName？這個問題會在介紹技術原理時詳細說，那是下一篇的事兒了。

到這里，如果你也是用ES6的規范來實現類的，可以看到，在IndexPage中，你只需將跳轉方式修改為this.$route({path, query, clazzName});即可。

3、給SecondPage頁面添加預加載專用的初始化方法。

// pages/second/second.js
import CommonPage from "../CommonPage";
class SecondPage extends CommonPage {
    constructor(...args) {
	    //super(...args)一定要寫，他會將clazzName與下面的data進行合并。
        super(...args);
        //這個$init(obj)中注入的obj就是頁面初始時的data
        super.$init({
            arr: []
        });
    }

    $onNavigator(query) {
	    //這里的query是從this.$route中傳遞來的query
        console.log('閃電?加載時接收到的參數', query);
        this.$put('second-data', this.initData.bind(this), query);
    };
	
    initData = function (query, resolve, reject) {
	    //這里的query是在this.$put()中傳遞過來的
	    //resolve在協議成功時回調
	    //reject在協議失敗時回調
	    //模擬網絡請求
        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);只有調用了resolve或者reject方法，才能在this.$take()的then()方法中獲取到值。
        }, 300);
    };

    onLoad(options) {
        const lightningData = this.$take('second-data');
        if (lightningData) {
            lightningData.then((data) => {
	            //成功回調，resolve(data)調用時觸發 data就是resolve傳遞的參數
                this.$setData(data);
            },(data, error)=>{
	            //失敗回調，reject(data, error)調用時觸發，data和error是reject傳遞的參數。
            });
            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中注入新的生命周期函數，也就是預加載方法。在執行this.$route時，你在this.$route中傳遞的clazzName是什么，這個框架就會自動去找匹配一致的類，調用該類的$onNavigator方法。

• 在$onNavigator中調用this.$put(key,fun,query)參數分別是鍵、異步請求方法、異步請求方法的參數。

• 在異步請求方法將this.setData替換為this.$setData()，使用this.$resolve(data)或者this.$reject(data,error)來回調成功或失敗。

• 在onLoad中使用this.$take(key).then(success,fail)來獲取異步結果，分別對應了resolve和reject回調。如果你沒有使用預加載，或者預加載失敗，那么this.$take(key)方法返回空，由此可以判斷是否使用了預加載進入頁面！

這么做的話，實現了在跳轉前先把下一個頁面的協議發出去，而且還讓同種業務的代碼保持在一個類中，不會破壞項目結構!

在實現了預加載后，如果不想用預加載了，只需要刪掉new SecondPage()時注入的clazzName即可！

感謝各位的閱讀！關于“怎么讓你的小程序健步如飛”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！