HBuilder X打包小程序--分包

uniapp代码写的app项目，要分包改为小程序，需要哪些改动？

1、找到manifest.json文件，在app-plus里添加如下代码
"app-plus" : {
"optimization" : {
"subPackages" : true
},
"runmode" : "liberate", // 开启分包优化后，必须配置资源释放模式
}
2、在manifest.json文件里的 mp-weixin 里写上小程序的appid

image.png

image.png

3、分包，我的分包目录跟官网的路径不一样，觉得这样写清晰些，主要是在pages.json里配置好路径。所有的写法还是用uniapp的写法，只是加了subPackages,preloadRule写法如下图。tabBar菜单的路径要写在主包里。

image.png

image.png

tabBar菜单的路径要写在主包里

image.png

4、写完这些后，怎么验证自己的分包是否成功了呢？

小提示：你本地运行的时候选上这个

image.png

①在 HBuilder X工具运行小程序--》选择第一个，这是会有提示，需要在小程序开发者工具里操作，在小程序开发者工具里找到设置----安全设置----将服务开启。

image.png

image.png

②打开小程序找到设置--安全设置--服务端口打开，端口号默认就行。

image.png

③ 第②步操作完后，关闭小程序，再操作第①部，发现还是报错hbuilder启动小程序后，项目无法运行，这时发现我的微信号没有设置权限，需要管理人员把开发者的微信号添加到公司小程序的管理后台（微信开发者控制台），这时再在 HBuilder X运行小程序， HBuilder X会启动小程序，项目运行起来了，就说明一切都对了。

image.png

④看上图找到右上角详情--基本信息--可以看到主包和分包的大小，主包分包大小不能超过2M,代码总包不能超过20M，如果大小超过限制大小就无法上传成功，无法发版！想用小程序就要遵守小程序的规则。

image.png

④切记不要手动将uniapp项目添加到小程序开发者工具里，是无法运行起来的，小程序里不要出现.vue文件，同时也会报错，没有app.json文件

image.png

5、小程序运行起来之后，发现控制台会有提示 IP地址不在合法域名下，这时候有两种解决方法。

image.png

①临时解决方案，在开发者工具右上角找到详情--》本地设置--》勾选不校验合法域名，这时就可以跟后台顺畅的联调了，但是要发体验版时，就必须用域名。看②

image.png

②打开微信公众号官网https://mp.weixin.qq.com/，让有权限的人扫码登录，登录后在后台 左侧目录下 找到开发--》开发管理 下配置服务器域名，域名需要后台提供。域名配置好后同样需要在自己的代码中更改为配置好的域名

image.png

image.png

6、域名配置好就可以发体验版了，在开发者工具里右上角找到上传，标明自己的版本和备注就可以上传了

image.png

7、上传成功后，在微信公众号后台版本管理就可以看到上传的版本，如果是多人上传可以选择具体版本为体验版，也可以自定义首次打开小程序显示的页面路径，选为体验版后，就会出现体验版的二维码，这是扫码就可以体验并测试了。

image.png

image.png