美文网首页
HBuilder X打包小程序--分包

HBuilder X打包小程序--分包

作者: 小楠的代码生涯 | 来源:发表于2021-03-03 23:34 被阅读0次

    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

    相关文章

      网友评论

          本文标题:HBuilder X打包小程序--分包

          本文链接:https://www.haomeiwen.com/subject/psvcqltx.html