Historical summary:

  • Wechat applets custom component – table component is coming
  • Realize “Dingdingclocking” through wechat mini program
  • Micro channel small program actual combat

Project background

The technology stack selected for our wechat applet project is: native + embedded H5, the current local code package is 1494 KB, and the uploaded one is 1121 KB.

The size of each small program cannot exceed 2M. If the small program is too large, it can be loaded by subcontracting. However, the size of each subcontracting is 2M, and the total package size cannot exceed 12M.

However, we need to add a larger functional module this time, and the package of the project is getting bigger and bigger. In line with the principle that it is better to have pain as soon as possible, subcontracting is adopted to load the new module this time.

The subcontract

Restrictions on Subcontracting

Due to the limitation of subcontract, tabBar page must be in APP (main package). However, the home page of the new module is in tabBar, so except the home page of the new module is put in the main package, its pages are put in the new packageWork package.

Use of the subcontract

├ ─ ─ app. Js ├ ─ ─ app. Json ├ ─ ─ app. WXSS ├ ─ ─ packageWork │ └ ─ ─ pages │ ├ ─ ─ field_clock │ └ ─ ─ field_object ├ ─ ─ pages │ ├ ─ ─ Work │ ├─ ├─ garbage ├─Copy the code

The developer declares the project subpackage structure in the app.json subpackages field:


{

 "pages": [

  "pages/index/index"."pages/volunteer-index/index"."pages/my/index"."pages/work/index"... ] ."tabBar": {

  "list": [{..."pagePath": "pages/work/index"."text": "Work"."iconPath": "/img/bar/appeal.png"."selectedIconPath": "/img/bar/appeal_cur.png"

   },

   {

​    "pagePath": "pages/my/index"."text": "I"."iconPath": "/img/bar/my.png"."selectedIconPath": "/img/bar/my_cur.png"}},"subpackages": [{"root": "package-work"."pages": [

​    "pages/field_object/index"."pages/add_field_object/index"."pages/field_clock/index"]]}}Copy the code

In subpackages, each subpackage has the following configurations:

field type instructions
root String Subcontract root
name String Subcontract alias,Subcontract predownloadCan be used
pages StringArray The subcontract page path, as opposed to the subcontract root directory
independent Boolean Is subcontractingIndependent of the subcontract

We don’t use independent subcontracting here

Use subcontracted pre-download

In tabBar, when the main package work home page is opened, the work module subcontract is pre-downloaded.

"preloadRule": {
    "pages/work/index": {
      "network": "all"."packages": [
        "package-work"]}}Copy the code

How to jump from the main package page to the subcontract page

After we have configured all the above, we have completed the relevant configuration of subcontracting. Next, we will develop the page of the main package to jump to the subcontracting page, how to jump?

<navigator class="btn" url=".. /.. /package-work/pages/field_clock/index">Jump to the subcontracting page</navigator>
Copy the code

Try uploading, divided into two packages: main package + packageWork.

The configuration of subcontracting is very simple. What we need to focus on is, how does subcontracting work? As a question, feel free to leave a comment.