ミニプログラムを高速に実行する方法-ミニプログラム開発-php.cn

ミニプログラムを高速に実行する方法

王林

リリース： 2021-03-15 09:54:15

転載

1772 人が閲覧しました

ミニプログラムを高速に実行する方法

まえがき

以前、ミニプログラムアプリケーションの速度向上に関する記事を見たことがありますが、この記事では主に、トリガー前にリクエストするミニプログラムの実装方法について説明しています。ページジャンプ: このプロトコルは、200 ～ 300 ミリ秒という短い時間を使用してページにジャンプし、データを取得してページ上にレンダリングするため、データをミニプログラムページにプリロードできます。

この技術により、ユーザーの待ち時間が短縮され、ユーザーエクスペリエンスが大幅に向上します。この記事では実装方法が示されておらず、技術的な原理のみが説明されていたため、この記事では技術的な実装方法について説明します。

フレームワークの長所と短所

長所:

次のページのデータをプリロードすることで、ページの読み込み速度が向上し、軽量プロトコル (データは200～300ms程度で受信できるため、ミニプログラムページを開いてすぐにデータをロードでき、空きページがほとんどありません。
プロジェクト構造を破壊することなく、同じビジネスのコードを 1 つのクラスに保持します。
コードの量は非常に少なく、本来のビジネスへの影響はほとんどありません。
プリロードを実装した後にプリロードを削除したいですか?実装されたクラス内の文字列を削除するだけです。

欠点:

状況に応じて setData を $setData に置き換える必要があります
開発者が必要です各状況のコンテキストが何であるかを明確にしてください。
プロトコルに非常に時間がかかり、400 ミリ秒を超える場合、この最適化方法を使用した効果は明らかではありません。
一部のネチズンは、このプロジェクトはコンポーネントを使用する小さなプログラムでは実行できないことに気づきました。そのため、コンポーネントを使用する場合は、このプロジェクトを直接使用しないでください。ただし、エンジニアにとって考えることは仕事において非常に重要ですので、このプロジェクトのアイデアを吸収することをお勧めします。

最終的な効果はここでは紹介しませんので、興味のあるお友達は自分で試してみてください。

(無料の学習ビデオ共有: php ビデオチュートリアル)

統合方法

重要な声明: 私のアプレットは ES6 標準に従っています, クラスの拡張や代入の分割などを使用します。理解できない場合は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 は 2 番目のページです。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: ページパス。絶対パスとサポートをサポートします。相対パスパス。
クエリ: 渡す必要があるパラメータ。これはオブジェクトタイプです。
clazzName: ジャンプする必要があるページのクラス名。これについては、SecondPage を紹介するときに後で説明します。

実際、パスがあるのに、なぜ 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;}));

ログイン後にコピー

おそらく次の手順:

このクラスは、新規作成時に 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) を使用して、それぞれ解決コールバックと拒否コールバックに対応する非同期結果を取得します。プリロードを使用しない場合、またはプリロードが失敗した場合、 this.$take(key) メソッドは空を返すため、ページに入るためにプリロードが使用されているかどうかを判断できます。

こうすることで、ジャンプする前に次のページのプロトコルを送信し、プロジェクトの構造を壊すことなく、同じ業務のコードを一つのクラスに収めることができます!

Afterプリロードを実装する際、プリロードを使用したくない場合は、new SecondPage() のときに挿入された clazzName を削除するだけで済みます。

関連する推奨事項: ミニプログラム開発チュートリアル

以上がミニプログラムを高速に実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。