WeChat ミニプログラムの基礎となる原則を分析する-ミニプログラム開発-php.cn

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

藏色散人

リリース： 2020-07-07 14:39:48

転載

3736 人が閲覧しました

#ページレンダリングには主に 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 サイトの他の関連記事を参照してください。