How to subcontract uniapp and applet, detailed steps (illustration) ＃ yyds dry goods inventory ＃

One 、 Applet subcontracting

Each use subcontracting applet must contain a Main package . The so-called main package , That is, the default startup page /TabBar page , And some public resources are required for all subcontracts /JS Script ; and to subcontract It is divided according to the developer's configuration .

When the applet starts , By default, the main package will be downloaded and the page in the main package will be started , When the user enters a page in the subcontract , The client will download the corresponding subcontracting , After the download is completed, it will be displayed

At present, there are the following restrictions on the size of small package ：

• The size of all packets of the whole small program shall not exceed 20M
• Single subcontract / The main packet size cannot exceed 2M

Subcontracting the applet , Can optimize the download time of the first start of the applet , And better decouple and collaborate when multiple teams work together .

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

Two 、uniapp Subcontracting applet

App The default is the whole package . Subcontracting configuration compatible with applets . Its purpose is not to speed up download , And for the home page is vue Start up speed at .

This is the directory structure after I subcontract the applet

​

• components: Common components （ For main package reference ）
• page_ Those followed by pinyin are subcontractors
• In the subcontract components It is the component directory of a single subcontractor , to subcontract vue Page references can only be in their own page_zhaoshang Only in the subcontracting directory can reference
• pages It's the main package , There are startup pages /TabBar page
• static There are public static resources , Picture class

Subcontracting steps ：

1. To configure manifest.json

“mp-weixin”: {

“optimization”:{“subPackages”:true}

}

​

Optimize subcontracting ：

In the configuration of the corresponding platform (manifest.json) Add below "optimization":{"subPackages":true} Turn on subcontracting optimization

Currently only supported mp-weixin、mp-qq、mp-baidu Optimization of subcontracting

• Static files ： Subcontract support static And other static resource copies , That is, static resources placed in the subcontract directory will not be packaged into the main package , It can't be used in the main package
• js file ： When a js When referenced by only one subcontract , The js Will be packed into the subcontract , Otherwise, it still hits the main package （ It is referenced by the main package , Or be surpassed 1 Subcontracting references ）
• Custom components ： If a custom component is referenced by only one subcontract , And not put into the subcontract , Compile time will output prompt information

2. To configure pages.json

stay pages.json Create a new array in "subPackages", The array contains two parameters ：1.root： Is the root directory of the sub package ,2.pages： Which pages does the sub package consist of , The parameters are the same as pages;

Be careful ： The main package and subcontract cannot be in the same directory , In the build uniapp Project time , Consider the directory structure , For subcontracting later ;

​

3. Subcontract 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

To configure preloadRule after , When entering a page of the applet , The framework automatically pre downloads the subcontracts that may be required , Increase the startup speed when entering the subsequent subcontracting page

preloadRule  in ,key  It's the page path ,value  Is the pre download configuration to enter this page , Each configuration has the following items ：

Field	type	Required	The default value is	explain
packages	StringArray	yes	nothing	After entering the page, pre download the subcontracted  root  or  name.__APP__  Represents the main package .
network	String	no	wifi	Pre download under the specified network , Optional value is ：all（ It's not limited to the Internet ）、wifi（ only wifi Pre download ）

app Subcontracting of , Also supports preloadRule, But the network rules are invalid .

Example ：

​

  Finally, click enter uniapp View the configuration item in the official document  

Last

If it helps you , I hope I can give you a comment collection for three times ！

Bloggers are honest , Answer questions for free