uniapp之微信小程序打包上线
前言
本文旨在打通uniapp上线微信小程序之任督二脉，其实之前在uniapp专题学习中已经打包过一次。这一次算是复习，复习的同时也以博客的方式记录一下。😎
预准备
首先进入微信公众平台，注册自己的微信小程序，完成个人信息配置，做好准备工作。
其次是准备好自己的uniapp工程文件，打开自己的HbuilderX，准备打包！
发布流程
1.获取微信小程序AppID
登录微信公众平台，查看自己微信小程序的AppId并复制
2.填写微信AppID
打开uniapp自己的工程文件，选择 manifest.json文件->微信小程序配置，黏贴自己的小程序id：
3.发布
选择发行->小程序-微信
之后出现下面的弹窗，此时微信小程序名称随便填不影响，真正名称在于你自己在公众平台设置的那个，之后点击发行即可：
接下来，HbuilderX会自动调开微信开发者工具(没有的朋友先安装)，我们选中右上角的上传按钮：
然后就上传失败了😥。
遇到问题不要慌，首先我们来分析失败原因：
1.主包体积过大
解决方法：uniapp分包
首先我们来看看分包有哪些限制
大小限制
- 微信小程序每个分包的大小是2M，总体积一共不能超过20M。
- 百度小程序每个分包的大小是2M，总体积一共不能超过8M。
- 支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。
- QQ小程序每个分包的大小是2M，总体积一共不能超过24M。
- 字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）
分包注意事项
subPackages里的pages的路径是root下的相对路径，不是全路径。- 分包下支持独立的
static目录，用来对静态资源进行分包。 - 针对
vendor.js过大的情况可以使用运行时压缩代码HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
目录结构如下
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─pagesA
│ ├─static
│ └─list
│ └─list.vue
├─pagesB
│ ├─static
│ └─detail
│ └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
分包步骤
- 开启分包优化
manifest.json->源码视图->mp-weixin添加配置开启分包优化
"optimization" : {
"subPackages" : true //是否启用分包优化
}
page文件夹的页面分一部分到pageA文件夹
个人建议是page文件夹只放tabBar页面，非tabBar页面都分包至pageA或者pageB
注意：分包之后注意检查页面跳转或者图片路径，有可能分包之后导致页面跳转失败或者图片路径不正确
2.图片等静态资源超过200kb
解决方法：将静态资源上传至CDN
3.未启用组件按需注入
解决方法：manifest.json->源码视图->mp-weixin添加配置开启组件按需引入
"lazyCodeLoading" : "requiredComponents" //按需注入
再次扫描代码质量通过
然后再次上传项目，上传成功！
4.公众平台提交审核
最后一步，登录微信公众平台，选择版本管理，会发现上一步自己提交的版本，之后点击提交审核即可，如果是首发可以尝试来一个加速审核，能节省一些时间。
补充：【配置域名】
发布自己的小程序之前，务必先配置一下域名，这样小程序才能使用网络功能，不配置域名，任何互联网的访问功能(api访问)都会失败。
首先登陆微信公众平台，选择开发管理->开发设置->服务器域名，配置自己的合法域名。
这里要注意，ip地址是不可以的，必须是域名，因而没有域名的请先注册域名，而后备案，之后用域名进行配置。
