前提:使用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> { 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官方文档|分包