如何使用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" 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官方文档｜分包