Learn more about subcontracting steps in uniapp and mini programs

How to subcontract uniapp and mini program? The following article will give you a detailed understanding of the subcontracting steps of uniapp and mini programs. I hope it will be helpful to you!

1. Mini program sub-packaging

Each mini program that uses sub-packaging 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.

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 exceed 2M Subcontracting mini programs can optimize the download time for the first launch of the mini program, and enable better decoupling and collaboration when multiple teams develop together.

Click here directly to see the official subpackaging tutorial which is easy to understand:

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic. html

2. uniapp subcontracting applet

App defaults to the whole 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. [Related recommendations: "uniapp tutorial"]

• components: Public components (for reference by the main package)
• page_followed by pinyin are all sub-packages
• The components in a subpackage are the component directories of a single subpackage. The reference to the subcontracted vue page can only be referenced in its own page_xxxx subcontracting directory.
• pages is the main package, which They are all startup pages/TabBar pages.
• static places public static resources, and image classes

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} to enable subpackage optimization

Currently only supports subpackage optimization for mp-weixin, mp-qq, and mp-baidu

• Static files: Sub-packaging supports copying of static resources such as static, that is, static resources placed in the sub-packaging directory will not be packaged into the main package, and
• js files cannot be used in the main package: When a certain js is only referenced by one sub-package, the js will be packaged into the sub-package, otherwise it will still be packaged in the main package (that is, 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 during compilation

2. Configuration pages .json

Create a new array "subPackages" in pages.json. The array contains two parameters: 1.root: the root directory of the subpackage, 2.pages: which pages the subpackage 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 sub-contracting;

3. Subcontracting preload configuration (preloadRule)

This step is mainly done to optimize the speed. If you don’t want to optimize the 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 subpackages that may be needed to improve the startup speed when entering subsequent subpackage pages.

In preloadRule, the key is the page path , value is the pre-downloaded configuration entering this page. Each configuration has the following items:

Field	Type	Required	Default value	Description
packages	StringArray	is	None	After entering the page, pre-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-download under wifi)

app subpackage, preloadRule is also supported, but the network rules are invalid.

You can view the official configuration items:

https://uniapp.dcloud.io/collocation/pages?id=subpackages

This article is reproduced from: https://juejin.cn/post/7003138257798037512

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Learn more about subcontracting steps in uniapp and mini programs. For more information, please follow other related articles on the PHP Chinese website!