小程序开发上线流程

发表于

这里记录了小程序从建分支开始开发到上线的流程，方便以后查阅。

第一步：基于master新建一个属于自己的功能分支，如20250103-gzx-settlement

第二步：开发完毕后，如果不涉及到打包h5，那么在自己的功能分支上面，使用微信开发者工具进行预览，生成一个预览的二维码给到测试同学，让他们扫码测试。如果涉及到打包h5，那么就要先合到dev分支上，然后使用微信开发者工具预览，生成一个预览的二维码给到测试同学，让他们扫码测试。
感谢晶哥提醒：也可以通过微信小程序“小程序助手”里面的版本管理找到自己发布的那个开发版，告诉测试，他们就可以进行测试了。
这里要注意的是，测试环境的接口要通过config/host.js中的代码来进行切换，如下所示：

1
2
3
4
5
6
7
// 快速切换环境功能 通过切掉hosts数组前n项来切换，修改slice参数即可
// 发布时注释--------
// config/host.js
HOSTS.forEach(host => {
  host.hosts = host.hosts.slice(2)
})
// 发布时注释--------

第三步：测试没有问题的话，接下来就是上预发。预发的话我们只需要找到config/host.js，通过如下代码进行环境的切换即可：

1
2
3
4
5
6
7
// 快速切换环境功能 通过切掉hosts数组前n项来切换，修改slice参数即可
// 发布时注释--------
// config/host.js
HOSTS.forEach(host => {
  host.hosts = host.hosts.slice(1)
})
// 发布时注释--------

完成了接口地址的切换以后，可以再次按照第二步生成一个预览的二维码给测试同学。

第四步：测试和预发环境都没有问题的话，将master分支合并到自己的功能分支，使用自己的功能分支，使用hbuilder的发行，发行微信小程序版本。将代码通过微信开发者工具上传到微信小程序的后台。然后设置体验版，进行审核，审核通过的话，提交上线。
打开config/host.js，将如下代码注释：

1
2
3
4
5
6
7
// 快速切换环境功能 通过切掉hosts数组前n项来切换，修改slice参数即可
// 发布时注释--------
// config/host.js
// HOSTS.forEach(host => {
//   host.hosts = host.hosts.slice(2)
// })
// 发布时注释--------

master合并到自己的功能分支，然后找到config/config.js中做版本号的修改

1
2
3
4
5
// config/config.js
// 版本号
export const CONFIG = {
  appVersion: '7.20.3',
}

如果遇到发行失败的报错，根据报错信息来解决就好了，我这次就遇到了，重新安装了一下依赖，再次点击发行，发行成功了。随后，通过微信开发者工具进行上传，这里记得找到本地设置，勾选一下将代码编译为es5.编译完成后，我们通过上传按钮，填写一下本次修改的内容，点击确定即可。

第五步：打开微信小程序后台，找到我们上传的这一版，设置为体验版，将体验版的二维码给测试同学，没有问题的话，点击提交审核，交由微信小程序官方来审核，审核通过的话，就可以切换为线上版本了。

最后再次感谢我晶哥的耐心指导我~

20250305补充

云商小程序发布为h5

  • 使用HBUilderX将云商小程序发布为h5
  • 找到sh目录，里面有几个环境的配置文件，在终端找到sh目录，执行./deploy-h5-test.sh命令，即可发布为h5测试环境。
  • 找到sh目录，里面有几个环境的配置文件，在终端找到sh目录，执行./deploy-h5-pre.sh命令，即可发布为h5预发环境。
  • 找到sh目录，里面有几个环境的配置文件，在终端找到sh目录，执行./deploy-h5.sh命令，即可发布为h5生产环境。

同福直播小程序发布为h5

  • 使用HBUilderX将云商小程序发布为h5
  • 找到sh目录，里面有几个环境的配置文件，在终端找到sh目录，执行./deploy-h5-test.sh命令，即可发布为h5测试环境。
  • 找到sh目录，里面有几个环境的配置文件，在终端找到sh目录，执行./deploy-h5-pre.sh命令，即可发布为h5预发环境。
  • 找到sh目录，里面有几个环境的配置文件，在终端找到sh目录，执行./deploy-h5.sh命令，即可发布为h5生产环境。

20250306补充

感谢晶哥提醒，供应商小程序如何打不同环境的包给测试用：

  • npm run dev:dev:mp-weixin (开发环境)
  • npm run dev:mp-weixin (测试环境)
  • npm run dev:pre:mp-weixin (预发环境)
  • npm run dev:prod:mp-weixin (线上环境)

本文完。