Teach you step by step how to subcontract uniapp and mini programs (pictures and text)

This article brings you relevant knowledge about uniapp cross-domain, which introduces the issues related to subcontracting of uniapp and mini programs. Each mini program that uses subcontracting must contain a main package. . The so-called main package is where the default startup page/TabBar page is placed, and some public resources/JS scripts are required for all sub-packages; while sub-packages are divided according to the developer's configuration. I hope it will be helpful to everyone.

Recommended: "uniapp tutorial"

1. Mini program sub-packaging

Each use sub-packaging The applet must contain a main package. The so-called main package is where the default startup page/TabBar page is placed, and some public resources/JS scripts are required for all sub-packages; and sub-packages are divided according to the developer's configuration.

When the mini program is started, the main package will be downloaded by default and the page in the main package will be launched. When the user enters a page in the sub-package, the client will download the corresponding sub-package and proceed after the download is completed. Display

Currently, the sub-package size of the mini program has the following restrictions:

• The size of all sub-packages of the entire mini program does not exceed 20M
• The size of a single sub-package/main package cannot More than 2M

Subcontracting the mini program can optimize the download time for the first startup of the mini program, and enable better decoupling and collaboration when multiple teams develop together.

Click here directly to see the official subcontracting tutorial, which is easy to understand

2. Uniapp subcontracting applet

App defaults to the entire package. Compatible with subcontracting configuration of mini programs. Its purpose is not to speed up downloads, but to speed up startup when the homepage is vue.

This is the directory structure after I subcontract the applet

• components: public components (for reference by the main package)
• page_followed by pinyin are all sub-packages
• The components in a sub-package are the component directories of a single sub-package. The reference of the sub-package vue page can only be referenced in its own page_zhaoshang sub-contract directory
• pages is the main package, which contains the startup page/TabBar page
• static contains public static resources, and the picture class

Subcontracting steps:

1. Configure manifest.json

"mp-weixin": {

"optimization":{"subPackages":true}

}

Optimize subcontracting:

In the configuration of the corresponding platform (manifest. json), add "optimization":{"subPackages":true}Enable subpackage optimization

Currently only supports mp-weixin, mp-qq , mp-baidu's subcontracting optimization

• Static files: support copying of static resources such as static under subcontracting, that is, static resources placed in the subcontracting directory will not Be packaged into the main package, and
• js files cannot be used in the main package: When a js is only referenced by one sub-package, the js will be packaged into the sub-package, otherwise it will still be hit. Main package (i.e. referenced by the main package, or referenced by more than 1 sub-package)
• Custom component: If a custom component is only referenced by one sub-package and is not placed in the sub-package , a prompt message will be output when compiling

2. Configure pages.json

Create a new array "subPackages" in pages.json. The array contains two parameters: 1.root: is the root directory of the sub-package, 2.pages: which pages the sub-package consists of, the parameters are the same as pages;

Note: the main package and sub-package cannot be in the same directory, when building the uniapp project , you can consider the directory structure for later subcontracting;

3. Subcontracting preload configuration (preloadRule)

Do this step Mainly for optimizing speed, if you don’t want to optimize speed, you can skip this configuration

After configuring preloadRule, when entering a certain page of the mini program, the framework will automatically pre-download the sub-packaging that may be required, and then enter the subsequent sub-packaging page. In

preloadRule, key is the page path, value is the pre-download configuration to enter this page, each configuration has The following items:

Field	Type	Required	Default value	Description
packages	StringArray	Yes	None	Preset after entering the page Download the subpackaged root or name. __APP__ represents the main package.
network	String	No	wifi	Pre-download under the specified network, optional value For: all (not limited to network), wifi (only pre-downloaded under wifi)

App subcontracting also supports preloadRule, but the network rules are invalid.

Example:

Finally click to enter the uniapp official document to view the configuration items

Recommendation: "uniapp tutorial"

The above is the detailed content of Teach you step by step how to subcontract uniapp and mini programs (pictures and text). For more information, please follow other related articles on the PHP Chinese website!