使用mpx框架滴滴给微信小程序分包

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

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序