ミニプログラムの起源を理解しましょう

WeChat ミニプログラムがどのように構成されているかを完全に理解した後、静かに気づくかもしれません。すべてのイノベーションは先人に基づいています。 React は効率的な仮想 DOM を実装し、これに基づいて、小規模なプログラム実行環境である WeChat ブラウザを構築します。

まず、次のツールが必要です

1. Mac コンピューター

2. WeChat Web 開発者ツール

3. WebStorm / 他のプログラマまたは IDE (できれば名前の変更をサポートするもの)

WeChat Web Developer Tools.app を右クリックし、パッケージの内容を表示する必要があります

Contents/Resources/app.nw の内容がコードです。これをコピーします。

簡単な説明:

app。 / アプリのコードはディレクトリ

modified_modules/ に配置されます。つまり、いくつかの変更されたモジュール

node_modules/ 地球上の誰もが知っています

package.json あはは、NW 関連のコンテンツが

で構成されていることを知っておく必要がありますmodules ディレクトリには 2 つのサブモジュールがあります:

anyproxy 名前から、これはプロキシ モジュール

weinre、リモート デバッグ ツール

IDE

によってカプセル化された Web アプリケーションであることがわかります。ノードウェブキット。

package.jsonの「main」:「app/html/index.html」は、このAPPの入り口が他のファイルではなく、このindex.htmlであることを定義します。

正常に、彼らが呼び出したファイルが見つかりました:

その中には、NodeWebkit に関連するエントリと思われる init メソッドがあります。 WebStorm の shift + f6RENAME 変数を十数回使用し、最終的に次のコードを確認しました:

これは React アプリケーションです。幸いなことに、私は 1 年以上前によく学びました。コードをスキャンした後、最終的に次の文を見つけました:

ContainController.js に直接ジャンプし、render メソッドにジャンプして、これを見つけました:

案の定、メインの入り口はメインの入り口です

対応するインターフェイスは次のとおりです:

edit はエディターとその関連事項です

detail はプロジェクトの構成です

付け加えておきますが、編集環境は Monaco に基づいています

WeAPP 実行メカニズム

ゆっくりとパッケージ化とその実行時プロセスを調べました。私はクローズドベータの参加資格がなかったので、見ながら推測する必要がありました。

前の記事では、wxml と wxss という 2 つの非常に興味深いことについて説明しました。これら 2 つのファイルは、wxml -> html、wxss -> css として個別に変換されます。対応する変換がいくつかあります:

transWxmlToJs

transWxssToCss

transConfigToPf

transWxmlToHtml

transManager

ここでの PF は PageFrame を指し、pageFrame には対応するテンプレート ファイルがあります:

一見すると、このスタイル文字列置換は生成され、その後、wcc という名前のツールと wcsc という名前のツールが作成されました。

1. wcc は、wxml のカスタムタグを virtual_dom に変換するために使用されます

2. 私が観察した現象は、wxss を css に変換することです

この場合、WeChat ミニ アプリケーションもある程度似ていることがわかります。 Virtual Dom + WebView の場合は、結局のところ、WAWebView ファイルと webviewSDK ファイルがあります。

もちろん、React + WebView か Vue + WebView かは関係ありません。今は WA + WebView があります (笑)。

WeApp は以下の図に示すような送信方法を使用します:

ローカルで作成した WeApp は WeChat サーバーに送信され、パッケージ化されてサーバーにアップロードされ、CDN に渡されます。配布用です。

アップロード プロセスは大まかに次のとおりです:

1. APP は日付に基づいた名前の .wx ファイルにパッケージ化されます

2. IDE がパッケージのサイズを検出し、「コード パッケージのサイズは xx です」というメッセージが表示されます。 xx kb の制限を超えています。ファイルを削除して再試行してください。このxxは1024のようですので、APPのサイズは1Mです。

3. APPはservicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xxにアップロードされます

さらに、今日からパブリックの「アソシエイトミニプログラム」機能が追加されます。アカウント完全オープン

1. ミニプログラムに関連付けられる対象の制限がなくなりました

2. 各公式アカウントは最大 13 個のミニプログラムに関連付けることができます

3. 同じミニプログラムは最大 3 つの公式アカウントに関連付けることができますアカウント

詳細については、リンクを参照してください。一言で言えば、詳細はオープンしています。複数の排水が許可されます。

--

以上がミニプログラムの起源を理解しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。