WeChat ミニ プログラムの基礎となる原則を分析する

#ページ レンダリングには主に 3 つの方法があります

推奨: 「小プログラム開発チュートリアル」

1.Web レンダリング

2.ネイティブ レンダリング

3.Web とネイティブが混在する、つまりハイブリッド レンダリングです。

ミニ プログラムは 3 番目の形式で表示されます。

ダブルスレッド通信方式

なぜデュアルスレッドが必要なのでしょうか? -> 制御のセキュリティを確保するため、DOM の操作は避けてください。

ミニ プログラムのレンダリング層とロジック層は、それぞれ 2 つのスレッドによって管理されます。レンダリング層のインターフェイスはレンダリングに WebView を使用し、ロジック層は JsCore スレッドを使用して JS スクリプトを実行します。

WeChat アプレットのフレームワークは、ビュー層と APP サービス ロジック層の 2 つの部分で構成されます。

ビュー レイヤーはページ構造のレンダリングに使用され、

AppService は論理処理、データ要求、インターフェイス呼び出しに使用されます。

2 つのプロセス (2 つの Web ビュー) で実行します。

ビュー層とロジック層はシステム層のJSBridageを介して通信します。

ロジック層: JavaScriptを実行するための別のスレッドを作成します。この環境では、ミニプログラムのビジネスロジックに関連するすべてのコードが実行されます。

レンダリング層: インターフェースのレンダリングに関連するすべてのタスクスレッドで実行されると、ロジック層のコードがどのインターフェイスをレンダリングするかを制御します。

小さなプログラムには複数のインターフェイスがあるため、レンダリング層には複数の Webview スレッドが存在します。

ロジック層とレンダリング層の間の通信はネイティブ (WeChat クライアント) によって中継されます。

ロジック層によって送信されたネットワーク リクエストもネイティブによって転送されます。

evaluate Javascript

ビュー層とロジック層の間のデータ送信は、実際には、両側から提供されるevaluateJavascriptを通じて実装されます。つまり、ユーザーが送信したデータを文字列に変換して渡す必要があるのと同時に、変換されたデータ内容をJSスクリプトにつなぎ合わせて、双方の独立した環境に渡す必要があります。 JS スクリプトの形式。

evaluateJavaScript の実行はさまざまな側面の影響を受けるため、ビュー層に到着するデータはリアルタイムではありません。 setData 関数は、ロジック層からビュー層にデータを非同期的に送信します。

テンプレート データ バインディング ソリューション

1. 構文を解析して AST を生成します

2. AST の結果に基づいて DOM を生成します

3. データを更新しますTemplateへのバインディング

抽象構文ツリー(abstract syntax Tree、略称AST)

パフォーマンス上の問題を引き起こす可能性が最も高いのは3番目の点です。データ更新の解決策については、 , React が最初に提案した仮想 DOM の設計は現在ではほとんどのフレームワークに基本的に吸収されており、ミニプログラムも例外ではありません。

仮想 DOM メカニズム virtual Dom

JS オブジェクトを使用して DOM ツリーをシミュレートする -> 2 つの DOM ツリーを比較する -> 2 つの DOM ツリーの違いを比較する -> 違いを実際の DOM ツリーに適用するDOM ツリー上で

##1. WXML をレンダリング層の対応する JS オブジェクトに変換します

#2. ロジック層でデータ変更が発生した場合、ホスト環境が提供する setData メソッドを使用して、ロジックからデータを変更する レイヤーはネイティブに渡され、その後レンダリングレイヤーに転送されます

3.前後の差分を比較した後、差分を元のDOMツリーに適用し、インターフェースを更新します

ミニ プログラムの基本ライブラリ

ミニ プログラムの基本ライブラリは JavaScript で書かれており、レンダリング層とロジック層に挿入して実行できます。主な用途:

レンダリング層では、ページの要素を組み立てるためのさまざまなコンポーネントを提供します。

ロジック層では、さまざまな要素を処理するためのさまざまな API を提供します。

データバインディング、コンポーネントシステム、イベントシステム、通信システムなどの一連のフレームワークロジックを処理します。

アプレットのレンダリング層とロジック層は2つのスレッドで管理され、 2 つのスレッドはそれぞれ Basic ライブラリを注入します。

ミニ プログラムの基本ライブラリは、ミニ プログラムのコードにはパッケージ化されず、事前に WeChat クライアントに組み込まれます。

##ビジネス アプレットのコード パッケージ サイズを削減します

#ビジネス アプレットのコード パッケージを変更せずに、基本ライブラリのバグを個別に修正できます

Exparser

Exparser は、WeChat ミニ プログラムのコンポーネント構成フレームワークであり、ミニ プログラムの基本ライブラリに組み込まれており、ミニ プログラムのさまざまなコンポーネントの基本サポートを提供します。組み込みコンポーネントやカスタム コンポーネントを含むミニ プログラム内のすべてのコンポーネントは、Exparser によって編成および管理されます。

デュアル スレッド レンダリング メカニズム

デュアル スレッド レンダリングは、実際には、以前の一連のメカニズムを組み合わせたものです。

1. アプレットは、テンプレート データ バインディングと仮想 DOM メカニズムを通じて、DSL にデータ バインディング構文とページ構造を記述するためのレンダリング レイヤを提供します。

<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>

2. アプレットは、ロジック層でページ データを設定するための API を提供します。

this.setData({
key : value
});

3. ロジック層がページを変更する必要がある場合、変更されたデータを渡すだけで済みます。 setData を介してレンダリング レイヤを取得します。

送信データは文字列に変換して送信されますので、大量のデータの送信は避けてください。

4. レンダリング レイヤーは、レンダリング メカニズムに従って仮想 DOM ツリーを再生成し、対応する DOM ツリーに更新して、インターフェイスの変更を引き起こします。

• ネイティブ コンポーネントの導入

• setData、データ通信、再レンダリング プロセスをバイパスして、レンダリング パフォーマンスを向上させます。

• Web の機能を拡張します。たとえば、入力ボックス コンポーネント (input、textarea) には、キーボードをより適切に制御する機能があります。

• エクスペリエンスが向上し、WebView のレンダリング作業も軽減されます。たとえば、マップ コンポーネントなどのより複雑なコンポーネントのレンダリング作業は WebView スレッドを占有せず、ネイティブ処理のためにより効率的なクライアントに引き渡されます。

ネイティブ コンポーネントのレンダリング プロセス:

• コンポーネントが作成され、コンポーネントのプロパティに順番に値が割り当てられます。

• コンポーネントが DOM ツリーに挿入されると、ブラウザ カーネルがすぐにレイアウトを計算します。このとき、位置 (x、y 座標)、幅、高さを読み取ることができます。ページに対するコンポーネントの相対的な位置。

• コンポーネントは、クライアントが幅と高さに応じて同じ位置にネイティブ領域を挿入することをクライアントに通知し、クライアントはこの領域にインターフェイスをレンダリングします。

• 位置または幅と高さが変更されると、コンポーネントはクライアントに対応する調整を行うように通知します。

以上がWeChat ミニ プログラムの基礎となる原則を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。