この記事では、uniapp クロスドメインに関する関連知識を提供します。ユニアプリおよびミニ プログラムの下請けに関連する問題が紹介されています。下請けを使用する各ミニ プログラムには、メイン パッケージが含まれている必要があります。いわゆるメイン パッケージには、デフォルトのスタートアップ ページ/TabBar ページと、すべてのサブパッケージが使用する必要があるいくつかのパブリック リソース/JS スクリプトが配置されます。一方、サブパッケージは開発者の構成に従って分割されます。皆さんのお役に立てば幸いです。
![uniapp とミニ プログラム (写真とテキスト) を下請けに出す方法を段階的に説明します。](https://img.php.cn/upload/article/000/000/067/6218a030d2609497.png)
推奨: 「uniapp チュートリアル 」
1. ミニ プログラムのサブパッケージ化
それぞれはサブパッケージ化 アプレットには、メイン パッケージが含まれている必要があります。いわゆるメイン パッケージには、デフォルトのスタートアップ ページ/TabBar ページが配置され、いくつかのパブリック リソース/JS スクリプトがすべてのサブパッケージに必要であり、サブパッケージは開発者の構成に従って分割されます。 。
ミニ プログラムが開始されると、デフォルトでメイン パッケージがダウンロードされ、メイン パッケージ内のページが起動されます。ユーザーがサブパッケージ内のページに入ると、クライアントは対応するパッケージをダウンロードします。表示
現在、ミニ プログラムのサブパッケージのサイズには次の制限があります:
- すべてのサブパッケージのサイズミニ プログラム全体のサイズは 2000 万個を超えてはなりません。
- 単一のサブパッケージ/メイン パッケージのサイズは 2000 万個を超えることはできません。
ミニ プログラムを下請けに出すと、ミニ プログラムの最初の起動時に、複数のチームが一緒に開発するときに、より適切な分離とコラボレーションが可能になります。
ここをクリックすると、わかりやすい公式の下請けチュートリアルが表示されます。
2. Uniapp 下請けアプレット
App のデフォルトはパッケージ全体です。ミニプログラムの下請け構成にも対応。その目的はダウンロードを高速化することではなく、ホームページが vue の場合の起動を高速化することです。
#これは、アプレットを再委託した後のディレクトリ構造です。
![](https://img.php.cn/upload/article/000/000/067/7297817817cd221b3ca35b38bc4fa2c6-0.png)
#コンポーネント: パブリック コンポーネント (メイン パッケージによる参照用)
- page_ に続くピンインはすべてサブパッケージです
- サブパッケージ内のコンポーネントは、単一のサブパッケージのコンポーネント ディレクトリです。サブパッケージの vue ページの参照は、独自のページでのみ参照できます。 page_zhaoshang サブコントラクト ディレクトリ
- pages はメイン パッケージで、スタートアップ ページ/TabBar ページが含まれます。
- static にはパブリック静的リソースとピクチャ クラス
- が含まれます。下請けの手順:
1.manifest.json の構成
"mp-weixin": {
"optimization":{"subPackages":true}
}
ログイン後にコピー
![](https://img.php.cn/upload/article/000/000/067/7297817817cd221b3ca35b38bc4fa2c6-1.jpg)
下請けの最適化:
対応するプラットフォーム (manifest.json) に、
"optimization":{"subPackages":true}
サブパッケージの最適化を有効にする
現在は
mp-weixin
のみをサポートします、mp-qq
、mp-baidu
の下請け最適化
静的ファイル: 下請けの static などの静的リソース、つまり静的リソースのコピーをサポートします。下請けディレクトリに配置されたファイルはメイン パッケージにはパッケージ化されず、
- js ファイルはメイン パッケージでは使用できません。js が 1 つのサブパッケージによってのみ参照される場合、js はメイン パッケージ (つまり、メイン パッケージによって参照されるか、複数のサブパッケージによって参照される)
- カスタム コンポーネント: カスタム コンポーネントが 1 つのサブパッケージによってのみ参照される場合-package であり、サブパッケージに配置されていない場合、コンパイル時にプロンプト メッセージが出力されます
- 2.pages.json
を構成する pages に新しい配列 "subPackages" を作成します.json. 配列には 2 つのパラメータが含まれます: 1.root: サブパッケージのルート ディレクトリ、2.pages: サブパッケージが構成されるページ、パラメータはページと同じです。
注: メイン パッケージとサブパッケージを同じディレクトリに置くことはできません。uniapp プロジェクトを構築するときは、後の下請け用にディレクトリ構造を考慮することができます。
3. プリロード構成 (preloadRule) のサブコントラクト
このステップは主に速度の最適化を目的として実行します。速度を最適化したくない場合は、この構成をスキップできます。
preloadRule を構成した後、ミニ プログラムの特定のページに入るとき、フレームワークは必要なサブパッケージを自動的に事前ダウンロードし、後続のサブパッケージ ページに進みます。 、
key
はページのパス、
value
はこのページに入る事前ダウンロード設定です。各設定には次の項目があります:
フィールド
タイプ
必須
デフォルト値
説明 |
|
| # #packages | StringArray | Yes
None
ページに入った後にプリセット サブパッケージ化されたルートまたは名前をダウンロードします。 __APP__ はメインパッケージを表します。 |
| network | String | No | wifi
指定されたネットワーク下での事前ダウンロード、オプションの値対象: すべて (ネットワークに限定されない)、Wi-Fi (Wi-Fi 環境下でのみ事前ダウンロード) |
|
アプリの下請けも preloadRule をサポートしていますが、ネットワーク ルールは無効です。
例:
![](https://img.php.cn/upload/article/000/000/067/6cc0211e2668669946f83489d510dea6-3.png)
最後にクリックして uniapp 公式ドキュメントに入り、設定項目を表示します
推奨事項: "uniapp チュートリアル"
以上がuniapp とミニ プログラム (写真とテキスト) を下請けに出す方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。