uniapp とミニ プログラム (写真とテキスト) を下請けに出す方法を段階的に説明します。

この記事では、uniapp クロスドメインに関する関連知識を提供します。ユニアプリおよびミニ プログラムの下請けに関連する問題が紹介されています。下請けを使用する各ミニ プログラムには、メイン パッケージが含まれている必要があります。いわゆるメイン パッケージには、デフォルトのスタートアップ ページ/TabBar ページと、すべてのサブパッケージが使用する必要があるいくつかのパブリック リソース/JS スクリプトが配置されます。一方、サブパッケージは開発者の構成に従って分割されます。皆さんのお役に立てば幸いです。

推奨: 「uniapp チュートリアル 」

1. ミニ プログラムのサブパッケージ化

それぞれはサブパッケージ化 アプレットには、メイン パッケージが含まれている必要があります。いわゆるメイン パッケージには、デフォルトのスタートアップ ページ/TabBar ページが配置され、いくつかのパブリック リソース/JS スクリプトがすべてのサブパッケージに必要であり、サブパッケージは開発者の構成に従って分割されます。 。

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

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

• すべてのサブパッケージのサイズミニ プログラム全体のサイズは 2000 万個を超えてはなりません。
• 単一のサブパッケージ/メイン パッケージのサイズは 2000 万個を超えることはできません。

ミニ プログラムを下請けに出すと、ミニ プログラムの最初の起動時に、複数のチームが一緒に開発するときに、より適切な分離とコラボレーションが可能になります。

ここをクリックすると、わかりやすい公式の下請けチュートリアルが表示されます。

2. Uniapp 下請けアプレット

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

• page_ に続くピンインはすべてサブパッケージです
• サブパッケージ内のコンポーネントは、単一のサブパッケージのコンポーネント ディレクトリです。サブパッケージの vue ページの参照は、独自のページでのみ参照できます。 page_zhaoshang サブコントラクト ディレクトリ
• pages はメイン パッケージで、スタートアップ ページ/TabBar ページが含まれます。
• static にはパブリック静的リソースとピクチャ クラス
• が含まれます。下請けの手順:

1.manifest.json の構成

"mp-weixin": {

"optimization":{"subPackages":true}

}

対応するプラットフォーム (manifest.json) に、

サブパッケージの最適化を有効にする現在は

のみをサポートします、mp-qq 、mp-baidu の下請け最適化

• js ファイルはメイン パッケージでは使用できません。js が 1 つのサブパッケージによってのみ参照される場合、js はメイン パッケージ (つまり、メイン パッケージによって参照されるか、複数のサブパッケージによって参照される)
• カスタム コンポーネント: カスタム コンポーネントが 1 つのサブパッケージによってのみ参照される場合-package であり、サブパッケージに配置されていない場合、コンパイル時にプロンプ​​ト メッセージが出力されます
• 2.pages.json

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

このステップは主に速度の最適化を目的として実行します。速度を最適化したくない場合は、この構成をスキップできます。

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

はページのパス、

はこのページに入る事前ダウンロード設定です。各設定には次の項目があります:

フィールドタイプ

アプリの下請けも preloadRule をサポートしていますが、ネットワーク ルールは無効です。

例:

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

推奨事項: "uniapp チュートリアル"

以上がuniapp とミニ プログラム (写真とテキスト) を下請けに出す方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。