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

ホームページ

ウェブフロントエンド

uni-app

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 22, 2022 pm 04:55 PM

実戦uniapp電子商取引

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

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

推奨: 「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) に、

"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

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

フィールドタイプ

必須デフォルト値# #packagesStringArrayYesNone ページに入った後にプリセットサブパッケージ化されたルートまたは名前をダウンロードします。 __APP__ はメインパッケージを表します。 networkStringNowifi指定されたネットワーク下での事前ダウンロード、オプションの値対象: すべて (ネットワークに限定されない)、Wi-Fi (Wi-Fi 環境下でのみ事前ダウンロード)

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

例: