アプレットのアーキテクチャと構成ファイル

1. ミニプログラムとは何ですか? また、どのような開発モデルがあるのでしょうか?

1.1. ミニプログラムとは何ですか?

• WeChat アプレット

• 百度アプレット

• Alipay アプレット

• 抖音アプレット

• 頭条ミニプログラム

• QQアプレット

• 美団ミニプログラム

1.2. 開発モード

• ネイティブアプレット開発

  • WeChat アプレット開発: wxml、wxss、JavaScript

  • Alipay アプレット開発: axml、acss、JavaScript

• フレームワーク開発アプレット

  • ムプエ

    • mpvue は、Vue を使用してアプレットを開発するためのフロントエンド フレームワークです。

    • WeChat ミニ プログラム、Baidu Smart Mini プログラム、Toutiao ミニ プログラム、Alipay ミニ プログラムをサポート

    • このフレームワークは 2018 年以降維持および更新されなくなり、放棄されました。

  • 泣く

    • Tencent がオープンソース化したフレームワークで、小さなプログラムがコンポーネントベースの開発をサポートできるようにします。

    • プリコンパイルにより、開発者は好みの開発スタイルを選択して小規模なプログラムを開発できます。

    • このフレームワークは現在あまりメンテナンスされていないため、推奨されません

• ユニアプリ

  • DCloud チームによって開発および保守されています

  • uni-app は、Vue を使用してすべてのフロントエンド アプリケーションを開発するためのフレームワークです。開発者は、iOS、Android、Web (レスポンシブ)、およびさまざまな小さなプログラム (WeChat/Alipay/Baidu/Toutiao/Flying) に公開できるコードのセットを作成します。書籍) /QQ/Kuaishou/DingTalk/淘宝網)、Quick App およびその他のプラットフォーム

  • uni-app は現在、多くの企業、特にモバイル アプリに適応したい企業に選ばれているテクノロジーです。

• タロイモ

  • JD チームによって開発および保守されています

  • taro は、WeChat/JD/Baidu/Alipay/ByteDance/QQ/Flying Book Mini Program/H5/RN などのアプリケーションを開発するための React/Vue/Nerv などのフレームワークの使用をサポートする、オープンなクロスターミナルおよびクロスフレームワーク ソリューションです。

  • taro 自体が React と Vue の選択をサポートしているため、より柔軟な選択肢が得られます。

  • 特に Taro3.x 以降は、Vue3、React Hook などをサポートしています。

  • taro ['tɑ:roʊ]、タロウ・ウルトラマン、宇宙警備隊の首席教官、最強のウルトラマン

2. 小規模プログラムのデュアルスレッド モデル アーキテクチャについて理解していますか? (インタビュー)

• アプレットのホスト環境は次のとおりです: WeChat クライアント

  • ホスト環境ではアプレットのさまざまなファイルを実行できます

• アプレットを WebView 環境で実行すると何が問題になりますか?

  • JS ロジック、DOM ツリーの作成、CSS 解析、スタイル計算、レイアウト、ペイント (コンポジット) はすべて同じスレッドで行われます。

  • WebView で JS ロジックを実行しすぎるとレンダリングがブロックされ、インターフェイスがフリーズする可能性があります

• パフォーマンスとセキュリティの問題を考慮して、アプレットは「デュアルスレッド モデル」のアーキテクチャを採用しています。

  • WXML モジュールと WXSS スタイルはレンダリング レイヤで実行され、レンダリング レイヤは WebView スレッドを使用してレンダリングします。

    • プログラムに複数のページがある場合、複数の WebView スレッドが使用されます

  • JS スクリプト (app.js/home.js など) はロジック、ロジック層は JsCore を使用して JS スクリプトを実行します。

    • これら 2 つのスレッドは WeChat クライアント (ネイティブ) を通じて転送され、対話されます。

3. アプレットにはどのような設定ファイルがあり、どのような設定に使用されますか?

• sitemap.json 公式ドキュメントの説明

  • WeChat はあなたのページのコンテンツをクロールし、ユーザーが自分の WeChat 内を検索すると、あなたが開発したミニ プログラムを検索できます。

• project.private.config.json:
    いくつかの構成情報

  • 例: プロジェクト名、ホット リロードを有効にするかどうか、アドレス チェックを有効にするかどうか、現在のバージョン ライブラリのバージョン番号

  • このファイルに設定された内容は、project.config.json ファイル内の同じ設定をオーバーライドします。

  • このファイルの設定が project.config.json の設定と異なる場合は変更されます。

• project.config.json: 基本的な設定の  公式ドキュメント

  • プロジェクト名、アプリIDなど

  • 通常、このファイルは変更されません 

• app.json: グローバル設定の  公式ドキュメントの説明

  • ページ: ページ パスのリスト

    • アプレットがどのページで構成されているかを指定するために使用され、各項目はページのパス（ファイル名を含む）に対応します。

    • アプレット内のすべてのページはページに登録する必要があります

  • window: グローバルなデフォルトのウィンドウ表示

    • ユーザーはウィンドウの表示方法を指定します。ウィンドウには他の多くのプロパティも含まれます。

  • tabBar: 下部のタブバーの表示

• page.json:  ページの個別構成の公式ドキュメントの説明

  • 各アプレット ページでは、.json ファイルを使用してこのページのウィンドウ パフォーマンスを構成することもできます。

  • ページ内の構成項目は、現在のページの app.json のウィンドウ内の同じ構成項目を上書きします。

 4. Appインスタンスを登録する機能と、インスタンス登録時に通常どのような操作が可能ですか?   公式文書の説明

• アプレットの進入シーンの判定

  • 一般的な開始シナリオ: グループ チャット セッションで開く、アプレット リストで開く、WeChat をスキャンして開く、別のアプレットを開く

  • ライフサイクル関数には、onLaunch と onShow にパラメータオプションがあり、sceneどのシーンからアプレットに入るかを記録します。

  • シーン リスト アドレスWeChatオープン ドキュメント

• ライフサイクル関数のリスニング

  • 初期化中のログインやグローバル ネットワーク データの要求など、対応するライフサイクル関数で初期ビジネス ロジックを実行します。

  • App() インスタンスは 1 つだけなので、globalData オブジェクトを作成してグローバル共有データを保存できますが、データが変更されるとページが応答しなくなります。

5. Pageインスタンスの機能を登録します。インスタンス登録時に通常どのような操作が可能ですか? 公式文書の説明

1. ライフサイクル関数でネットワーク要求を送信して、サーバーからデータを取得します。

2. wxml で参照および表示できるようにデータを初期化します。

3. wxml でイベントをリッスンし、対応するイベント関数をバインドします

4. ページのスクロール、プルダウンの読み込み、プルアップの更新のイベント監視