ユニアプリとミニプログラム（画像とテキスト）を下請けする方法を教えます

1. ミニプログラム下請け

サブパッケージを使用する各アプレットには、メインパッケージが含まれている必要があります。いわゆるメインパッケージには、デフォルトのスタートアップページ/タブバーページと、すべてのサブパッケージに必要ないくつかの共通リソース/JS スクリプトが配置されます。サブパッケージは、開発者の構成に応じて分割されます。

ミニプログラムを起動すると、デフォルトでメインパッケージがダウンロードされ、メインパッケージ内のページが起動されます。ユーザーがサブパッケージ内のページに入ると、クライアントは対応するサブパッケージをダウンロードし、ダウンロードが完了したらそれを表示します。

現在、ミニプログラムサブパッケージのサイズには次の制限があります。

ミニプログラム全体のすべてのサブパッケージのサイズは20Mを超えません
1つのサブパッケージ/メインパッケージのサイズは2Mを超えることはできません。

ミニプログラムをサブパッケージ化すると、ミニプログラムを初めて起動したときのダウンロード時間を最適化でき、複数のチームが共同で開発しているときにコラボレーションをより適切に分離できます。

わかりやすいサブパッケージの公式チュートリアルを見るにはここをクリックしてください

2. Uniapp 下請けアプレット

アプリのデフォルトはパッケージ全体です。ミニプログラムのサブパッケージ構成に対応しています。その目的はダウンロードを高速化することではなく、ホームページが vue の場合の起動を高速化することです。

これはアプレットをサブパッケージ化した後のディレクトリ構造です

コンポーネント: パブリックコンポーネント (メインパッケージによる参照用)
Page_の後にピンインが続くのはサブパッケージです
サブパッケージ内のコンポーネントは、単一のサブパッケージのコンポーネントディレクトリです。サブパッケージ Vue ページの参照は、そのサブパッケージの page_zhaoshang ディレクトリ内でのみ参照できます。
Pagesはメインパッケージで、スタートアップページ/タブバーページが含まれています。
Static には、画像などのパブリックな静的リソースが含まれます。

下請けの手順:

1. manifest.json を設定する

"mp-weixin": {

"最適化":{"サブパッケージ":true}

}

下請けを最適化:

サブパッケージの最適化を有効にするには、対応するプラットフォーム構成 (manifest.json) に"optimization":{"subPackages":true}を追加します。

現在、 mp-weixin 、 mp-qq 、 mp-baiduのサブパケット最適化のみをサポートしています。

静的ファイル: サブパッケージは、staticなどの静的リソースのコピーをサポートしています。つまり、サブパッケージディレクトリに配置された静的リソースはメインパッケージにパッケージ化されず、メインパッケージで使用することもできません。
js ファイル: js ファイルが 1 つのサブパッケージのみによって参照されている場合、そのファイルはサブパッケージにパッケージ化されます。それ以外の場合は、メインパッケージに含まれます (つまり、メインパッケージによって参照されているか、複数のサブパッケージによって参照されています)。
カスタムコンポーネント: カスタムコンポーネントが1つのサブパッケージによってのみ参照され、サブパッケージに配置されていない場合、コンパイル時にプロンプトメッセージが出力されます。

2. pages.jsonを設定する

pages.json に新しい配列「subPackages」を作成します。配列には 2 つのパラメータが含まれます: 1.root: サブパッケージのルートディレクトリ、2.pages: サブパッケージがどのページで構成されているか。パラメータは pages と同じです。

注: メインパッケージとサブパッケージを同じディレクトリに配置することはできません。uniapp プロジェクトをビルドするときに、後でサブパッケージを容易に作成できるようにディレクトリ構造を検討できます。

3. サブパッケージのプリロード設定（preloadRule）

この手順は主に速度の最適化を目的としています。速度を最適化したくない場合は、この設定をスキップできます。

preloadRule を設定すると、ミニプログラムの特定のページに入るときに、フレームワークは必要なサブパッケージを自動的に事前ダウンロードし、後続のサブパッケージページに入るときの起動速度が向上します。

preloadRuleでは、 keyはページパス、 valueこのページに入るための事前ダウンロード構成であり、各構成には次の項目があります。

フィールド	タイプ	必須	デフォルト値	例示する
パッケージ	文字列配列	はい	なし	ページにアクセスした後、ルートまたはサブパッケージの名前を事前にダウンロードします。 __APP__ はメインパッケージを示します。
ネットワーク	弦	いいえ	Wi-Fi	指定したネットワークで事前ダウンロードします。オプションの値: all (無制限のネットワーク)、wifi (wifi でのみ事前ダウンロード)

アプリのサブパッケージ化も preloadRule をサポートしますが、ネットワークルールは無効です。

例：

最後に、クリックしてuniappの公式ドキュメントに入り、設定項目を確認します。

ユニアプリとミニプログラムの下請けについて段階的に説明するこの記事はこれで終わりです（画像とテキスト付き）。ユニアプリとミニプログラムの下請けに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: