Preface

I found that most of the articles on the Internet that introduce the sub-package of uni-app small programs in detail are problematic. There is no way to package it, even if it is packaged, it cannot be used. The main reason is that the third-party package version used is upgraded. , The version of uni-app is upgraded.

Through the study of official documents, it is found that the current subcontracting does not need to be so complicated and can be implemented simply.

Tip: The following is the content of this article, the following cases are for reference

1. According to the official documentation

subPackages

Sub-package loading configuration, this configuration is the sub-package loading mechanism of the applet.

Due to the size and resource loading limitations of applets, each applet platform provides subcontracting methods to optimize the download and start speed of applets.

The so-called main package is to place the default startup page/TabBar page, and some common resources/JS scripts are required for all sub-packages; and the sub-packages are divided according to the configuration of pages.json.

When the applet 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 corresponding sub-package will be automatically downloaded and displayed after the download is complete. There will be a waiting prompt on the terminal interface.

2. How to configure

1. Project Directory

The directory structure is as follows (example):

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json

We created package A and package B. At the same time, each package directory can create a static file directory static. This is very important. If we create this way, we don’t need to configure copy-webpack-plugin to package static files because it is easy Something went wrong.

2. Start configuring pages.json

The code is as follows (example):

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }]
}

This configuration is fine , the path of the page still needs to bring the package name such as: / pagesA/list/list to access

to sum up

Many online plug - ins that use the copy-webpack-plugin plug-in package to subpackage small programs are not very useful. Modifying the copy-webpack-plugin version to 5.0 will not report an error, but the same does not take effect. The static files are still not packaged.

It is recommended that you do not need to use this plug-in, you can directly use this form for subcontracting.

At the same time, note that the public static files used by multiple packages are best placed in one place, and there is no need to repackage

Expand

preloadRule

Sub-contract pre-loaded configuration.

After configuring the preloadRule, when entering a page of the applet, the framework will automatically pre-download the sub-packages that may be needed to improve the startup speed when entering the subsequent sub-package page

 "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }

How to subcontract the WeChat applet developed by uni-app (solve the problem of packaging errors)

table of Contents