微信小程序小结(4) — 分包加载及小程序间跳转

分包加载

某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~)。

在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示。

目前小程序分包大小有以下限制:

整个小程序所有分包大小不超过 8M

单个分包/主包大小不能超过 2M

使用如下:

{
  "pages":[         //主包
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [      //分包的集合
    {
      "root": "pages/task/",    //分包1:物理根目录
      "pages": [
        "index/index",          //pages/task/index/index
        "grade/grade"
      ]
    }, {                        //分包2
      "root": "pages/read/",
      "pages": [
        "index/index",
        "note/note",
        "comment/index"     //导航全路径:/pages/read/comment/index
      ]
    }
  ]
}

打包原则

声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目录将被打包到 app(主包) 中。

app(主包)也可以有自己的 pages(即最外层的 pages 字段)。

subPackage 的根目录不能是另外一个 subPackage 内的子目录。

首页的 TAB 页面必须在 app(主包)内。

微信小程序小结(4) -- 分包加载及小程序间跳转

引用原则

packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件。

packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template。

packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源。

注意:

  • 不管分包如何处理,跳转路径和之前一样正常跳转,一点都没变;加载分包时会有弹窗提示。
  • 如果分包的首页在TAB中,则文件必须不能放在分包的目录下;
  • 尽管做了分包处理,项目的素材,公共文件等若放在最外层依然会被分在主包中。可将图片等放在分包的目录下。

参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

跳转到同个公众号下的另一个小程序

<navigator target="miniProgram" open-type="navigate"
    app-id="xxxxxxxx" path="/pages/homework/index/index"
    extra-data="" version="release">
        打开绑定的小程序
</navigator>

target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版)trial(体验版)release(正式版),仅在当前小程序为开发版或体验版时此参数有效;

如果当前小程序是正式版,则打开的小程序必定是正式版。

UI效果:如打开一个新的小程序一样,有开始的加载效果;之后直接到指定页面(未指定时默认到首页),中间没有别的反应。

点击右上角的关闭按钮,只关闭当前小程序(即跳转到的),之后显示原来的小程序。