Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to subcontract uniapp and Mini Program". The content is simple and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn how to subcontract uniapp and Mini Program.

I. Mini Program subcontracting

Each use of subpackage Mini Program must contain a main package. The so-called main package is to place the default startup page / TabBar page, and some subpackages need to use common resources / JS scripts, while the subpackages are divided according to the developer's configuration.

When Mini Program starts, it downloads the main package and launches the page within the main package by default. When the user enters a page within the subpackage, the client downloads the corresponding subpackage and displays it after the download is completed.

Currently, there are the following restrictions on the size of Mini Program subcontracts:

The size of all subcontracts of the whole Mini Program does not exceed 20m.

The size of a single subcontract / main package cannot exceed 2m

The subcontracting of Mini Program can optimize the download time for the first launch of Mini Program, and better decouple and cooperate in multi-team development.

Click here to see the official subcontracting tutorial is easy to understand.

II. Uniapp subcontract Mini Program

App defaults to the whole package. Compatible with Mini Program subcontract configuration. Its purpose is not for download acceleration, but for startup acceleration when the home page is vue.

This is the directory structure after I subcontracted Mini Program.

Components: common component (referenced by the main package)

Both page_ and Pinyin are subcontracted.

The components in the subpackage is the component directory of a single subpackage, and the reference to the vue page of the subpackage can only be referenced under your own page_zhaoshang subpackage directory.

Pages is the main package, which is full of startup pages / TabBar pages

In static, there are public static resources and picture classes.

Subcontracting steps: 1. Configure manifest.json "mp-weixin": {"optimization": {"subPackages": true}}

Optimize subcontracting:

Add "optimization": {"subPackages": true} under the configuration (manifest.json) of the corresponding platform to enable subcontracting optimization.

Currently, only subcontracting optimization of mp-weixin, mp-qq and mp-baidu is supported.

Static files: copies of static resources such as static are supported under the subpackage, that is, static resources placed in the subcontract directory are not packaged into the main package, nor can they be used in the main package.

Js file: when a js is referenced by only one subpackage, the js will be packaged into the subpackage, otherwise it will still be called to the main package (that is, referenced by the main package or by more than 1 subpackage)

Custom component: if a custom component is referenced by only one subpackage and is not placed in the subpackage, a prompt will be output at compile time

two。 Configure pages.json

Create a new array "subPackages" in pages.json, which contains two parameters: 1.root: the root directory of the subpackage, and 2.pages: which pages the subpackage consists of. The parameters are the same as pages.

Note: the main package and subpackage cannot be in the same directory. When building a uniapp project, you can consider the directory structure for later subcontracting.

3. Subcontract preload configuration (preloadRule)

This step is mainly to optimize the speed. If you don't want to optimize the speed, you can skip this configuration.

After preloadRule is configured, when entering a page of Mini Program, the framework automatically pre-downloads the subpackages that may be needed to improve the startup speed when entering the subsequent subcontracting page.

In preloadRule, key is the page path, and value is the pre-download configuration to enter this page. Each configuration has the following items:

The default value required for the field type indicates that packagesStringArray is a root or name that is not pre-downloaded after entering the page. _ _ APP__ represents the main package. NetworkString No wifi is pre-downloaded on the specified network. Available values are: all (not limited to network), wifi (pre-download under wifi only)

The subcontracting of app also supports preloadRule, but the network rules are invalid.

Example:

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

The above is all the contents of the article "how to subcontract uniapp and Mini Program". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.