小程序 - 分包加载上限8M（一） - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用分包

配置方法

假设支持分包的小程序目录结构如下

├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils开发者通过在 app.json subpackages 字段声明项目分包结构：
写成 subPackages 也支持。

{
"pages": ["pages/index", "pages/logs"],
"subpackages": [
{
"root": "packageA",
"pages": ["pages/cat", "pages/dog"]
},
{
"root": "packageB",
"name": "pack2",
"pages": ["pages/apple", "pages/banana"]
}
]
}

打包原则

声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包）中
app（主包）也可以有自己的 pages（即最外层的 pages 字段）
subpackage 的根目录不能是另外一个 subpackage 内的子目录
tabBar 页面必须在 app（主包）内

引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

低版本兼容

由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。

示例代码：分包使用主包js,其它的同理app.json

{
"pages": [
"pages/login/login"
],
"subPackages": [
{
"root": "package-aaa",
"pages": [
"pages/home/home"
]
},
{
"root": "package-bbb",
"pages": [
"pages/goods/goods",
"pages/order/order"
]
}
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "分包",
"navigationBarTextStyle": "black"
}
}

logon.xml

<button type="primary" bindtap="shopGoods"> shopGoods </button>

shopGoods: function (e) {
//
if (e) {
wx.navigateTo({
url: '/package-bbb/pages/goods/goods'
})
}
},

跳转分包，，分包获取公共数据goods.xml

goods.js

const util = require('../../../utils/util.js')
const _api = require('../../../utils/api.js')
Page({ /**
* 页面的初始数据
*/
data: {
time: '',
env:''
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let _time = new Date();
let t = util.formatTime(_time)
this.setData({
time: t
})
},