前言

本文旨在打通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访问)都会失败。

首先登陆微信公众平台，选择开发管理->开发设置->服务器域名，配置自己的合法域名。

目录CONTENT

uniapp之微信小程序打包上线

前言

预准备