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.pngimage.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
6、域名配置好就可以发体验版了,在开发者工具里右上角找到上传,标明自己的版本和备注就可以上传了
image.png
7、上传成功后,在微信公众号后台版本管理就可以看到上传的版本,如果是多人上传可以选择具体版本为体验版,也可以自定义首次打开小程序显示的页面路径,选为体验版后,就会出现体验版的二维码,这是扫码就可以体验并测试了。
image.png image.png