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

1. Mini Program Subcontracting

Each applet that uses sub-packages must contain a main package . The so-called main package is where the default startup page/TabBar page is placed, as well as some common resources/JS scripts required by all sub-packages; and the 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 started. When the user enters a page in a sub-package, the client will download the corresponding sub-package and display it after the download is complete.

Currently, the size of a Mini Program subpackage is subject to the following restrictions:

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

Subpackaging the mini program can optimize the download time when the mini program is first launched, and can better decouple collaboration when multiple teams are jointly developing.

Click here to watch the official subpackaging tutorial, which is easy to understand

2. Uniapp subcontracting applet

The default for App is the whole package. Compatible with the sub-package configuration of mini-programs. Its purpose is not to speed up downloading, but to speed up startup when the home page is vue.

This is the directory structure after I subpackaged the applet

• Components: public components (for reference by the main package)
• Page_ followed by pinyin is a sub-package
• The components in the subpackage are the component directories of a single subpackage. The reference of the subpackage Vue page can only be referenced in its own page_zhaoshang subpackage directory.
• Pages is the main package, which contains the startup page/TabBar page
• Static contains public static resources, such as pictures.
  

Subcontracting steps:

1. Configure manifest.json

"mp-weixin": {

"optimization":{"subPackages":true}

}

Optimize subcontracting:

Add "optimization":{"subPackages":true} to the corresponding platform configuration (manifest.json) to enable sub-package optimization.

Currently only supports the sub-packet optimization of mp-weixin , mp-qq , and mp-baidu

• Static files: The subpackage supports the copying of static resources such as static, that is, the static resources placed in the subpackage directory will not be packaged into the main package, nor can they be used in the main package
• js file: When a js file is referenced by only one sub-package, it will be packaged into the sub-package, otherwise it will still be included in the main package (that is, it is referenced by the main package, or referenced by more than one sub-package)
• Custom components: If a custom component is only referenced by one subpackage and is not placed in the subpackage, a prompt message will be output during compilation
  

2. Configure 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 a uniapp project, you can consider the directory structure to facilitate sub-packages later;

3. Subpackage preload configuration (preloadRule)

This step is mainly for speed optimization. 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 sub-packages that may be needed, which will improve the startup speed when entering the subsequent sub-package pages.

In preloadRule , key is the page path, value is the pre-download configuration for entering this page, and each configuration has the following items:

App subpackaging also supports preloadRule, but network rules are invalid.

example:

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

This is the end of this article about teaching you step by step about uniapp and mini program subcontracting (with pictures and text). For more relevant content about uniapp and mini program subcontracting, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!