uniapp subPackages 微信分包与路由跳转

文章目录

1. 1. 分包开启与目录设置
2. 2. 页面配置与跳转
3. 3. 其他

今天有个微信小程序有点问题需要修复，结果问题是几下改好了，一点上传，提示我主包超2MB了……

之前处理小游戏分包就觉得很烦。终究还是躲不过学习小程序怎样分包呀。

包括官方在内还是看了好几个教程，有了自己的一点小心得。

分包开启与目录设置

首先在 manifest.json 源码中找到 mp-weixin 节点，增加 optimization 属性：

"optimization" : {
    "subPackages" : true
}

然后按自己的需要构建项目目录，例如：

┌─pages
│  └─index
│     └─index.vue
├─subpackages1
│  ├─components
│  └─subpage1
│     └─subpage1.vue
├─subpackages2
│  ├─static
│  └─subpage2
│     └─subpage2.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

由于一开始并没有看官方教程，所以稍微有点被其他文章误导了。说2个关键点，以防大家产生跟我一样困惑：

1、分包目录没有特定要求。强调这点是因为好几篇文章把分包目录放在pages下面，让我误以为这是一个必要的规范。但是官方示例已经很明确了，放在根目录就是最好的方式，虽然说其实放哪里都可以。（官方文档：https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages）

2、只被分包依赖的组件、静态资源，应放在分包目录中。这实际上也印证了上面的做法。因为分包目录实际上可以看做一个项目的根目录，这个目录中有页面，也可以有组件和静态资源。而作为“伪根目录”放在其他的pages目录下，就显得有点不合逻辑了。

页面配置与跳转

目录的改变肯定也带来了配置文件和路由的调整。

首先修改 pages.json ：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "navigationStyle": "custom"
      }
    }
  ],
  "subpackages1": [
    {
      "root": "subpackages1",
      "pages": [
        {
          "path": "subpage1/subpage1",
          "style": {
            "navigationBarTitleText": "分包页1"
          }
        }
      ]
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

然后对应路由跳转需要调整：

uni.navigateTo({
  url: '/subpackage1/subpage1/subpage1'
})
// 未分包前为:
// uni.navigateTo({
//   url: '/pages/subpage1/subpage1'
// })

其他

分包相关逻辑与优化策略：

• 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。
• js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）。
• 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。

完成配置分包文件后需要重启项目才能预览。