前提:使用mpx框架。核心包:@mpxjs/core、@mpxjs/webpack-plugin等 mpx开发文档
一 需要的微信小程序分包原生配置(打包后的结果)
//app.json
{
"pages": [
"pages/index/index"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/recruit/recruit-main",
"pages/recruit/recruit-form"
]
},
{
"root": "packageB",
"pages": [
"pages/other/other"
]
}
]
}
二 项目如何配置
//app.mpx
...
<script type="application/json" lang="json">
{
"pages": [...],/*主包文件*/
"packages": [/*分包文件*/
"./packages/index?root=packageA",
"./packageB/index?root=packageB"
],
}
</script>
主要是在app.mpx中配置packages,mpx 中会将 app.mpx(入口文件,也不一定非要叫app.mpx) 中 packages 域下的路径带 root 为 key 的 query 则被解析认为是使用分包加载。
root后的packageA、packageB会打包编译在微信小程序原生配置app.json中(即步骤一中“subPackages"中的“root”分包)
mpx项目目录结构(对应上方配置,仅供参考)
分包路由配置
分包路由分别配置在packages和packageB各自的index.mpx中
//packages/index.mpx
<script type="application/json">
{
"pages": [
"./pages/recruit/recruit-main",
"./pages/recruit/recruit-form"
]
}
</script>
//packageB/index.mpx
<script type="application/json">
{
"pages": [
"./pages/other/other"
]
}
</script>
三 打包后文件
四 跳转路径
使用分包跳转路径应该写成
/packageA/pages/recruit/recruit-main
/packageB/pages/other/other
官方文档对分包的注意事项:
五 其他
分包中的页面(比如other.mpx)要用template填充模板,不然打包时会报错,认为没有该页面为路由匹配
更多请自行查阅 mpx官方文档|分包