首頁 > 文章 > 微信小程式 > 如何讓你的小程式健步如飛

如何讓你的小程式健步如飛

王林轉載: 2021-03-15 09:52:221720瀏覽

如何讓你的小程式健步如飛

前言

以前看過一篇關於提高小程式應用程式速度的文章，文章主要講述如何實現小程式在觸發頁面跳轉前就請求協議，利用跳轉頁面的短短200~300ms的時間，取得到資料並渲染到頁面上，實現資料在小程式頁面中預先載入。

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

框架優缺點

優點：

預先載入下一個頁面的數據，提高了頁面的載入速度，輕量級的協定（ 200~300ms左右就能接收到資料）能輕鬆讓小程式頁面開啟後資料瞬間加載，幾乎不出現空白頁面。
讓同種業務的程式碼保持在一個類別中，不會破壞專案結構。
程式碼量非常少，對原本業務影響非常少。
實作預載入後想刪掉預載？只需在實作的類別中刪除一個字串即可。

缺點：

需要你按情況替換setData為$setData
需要開發者非常清楚各情況下的上下文是什麼。
如果你的協定非常耗時，達到400ms以上的，使用這種最佳化方式效果就不明顯了。
有網友發現，這個專案無法運作在使用了元件的小程式中，所以大家如果使用了元件的話，就不要直接用這個專案了。不過還是推薦你吸收下這個專案的思想，畢竟工程師在工作中思想是很重要的。

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

（免費學習影片分享：php影片教學）

如何整合

重要宣告：我的小程式是遵循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: &#39;this is the firstPage&#39;
        }
    }

    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: &#39;../second/second&#39;, query: {count: 10, title: &#39;这是第二个页面&#39;}, clazzName: &#39;SecondPage&#39;});
		
		// 这是小程序原生的普通加载方式
        // wx.navigateTo({
        //     url: &#39;../second/second?count=10&title=这是第二个页面&#39;
        // })
    }

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(&#39;闪电️加载时接收到的参数&#39;, query);
        this.$put(&#39;second-data&#39;, 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(&#39;second-data&#39;);
        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: &#39;SecondPage&#39;，与this.$route({path, query, clazzName});中的clazzName名称与其一致即可
Page(new SecondPage({clazzName: &#39;SecondPage&#39;}));

大概是這麼幾步：

這個類別需要在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即可！

如何讓你的小程式健步如飛

相關文章