微信小程序本地上传

在开发小程序时,如果需要本地打包上传,就需要经过运行打包命令、打开开发者工具、点击上传、输入版本号等信息等步骤,如果碰到需要同时打包多个小程序的情况,这些步骤就会显得很繁琐和混乱。

命令行调用

微信开发者工具提供了命令行HTTP 服务两种接口供外部调用,可以一部分解决预览、上传等操作较为繁琐的问题,这里主要介绍下命令行调用的方式。

启用命令行工具

要使用命令行工具,需要在开发者工具的设置 -> 安全设置中开启服务端口

验证工具

先到命令行工具所在位置

macOS: <安装路径>/Contents/MacOS/cli

Windows: <安装路径>/cli.bat

以开发工具默认安装路径为例 (注释的是 win 平台,后面类似)

bash
cd /Applications/wechatwebdevtools.app/Contents/MacOS
# cd C:/Program Files (x86)/Tencent/微信web开发者工具
bash
./cli islogin
# cli islogin

Untitled

如果成功启用了命令行工具,结果应该类似图片的

命令行登录

命令行后续操作都行先进行登录,一般只需要登录一次,后续即使重启机器也不需要重新登录。

bash
./cli login
# cli login

打包脚本

知道命令行指令后,我们可以与打包命令一起集成为一个脚本。这里的项目例子是uni-app的默认模版。

zx

考虑到跨平台需求,这里不考虑 shell。node 的 child_process 虽然可以跨平台执行命令,但略显繁琐,比较方便的是使用第三方包,比较比较知名的有shelljszx,综合考虑这里使用的zx

需要先在项目或者全局安装 zx

bash
npm i -g zx

脚本

在项目目录下新建一个文件upload.mjs

jsx
#!/usr/bin/env zx
const cliPath = "/Applications/wechatwebdevtools.app/Contents/MacOS/cli";
// win 默认路径
//  const cliPath = 'C:/Program Files (x86)/Tencent/微信 web 开发者工具/cli.bat'
let cliCmd = cliPath;
// 打包
await $`git checkout main`;
await $`git pull`;
// await $`yarn install`;
await $`yarn build:mp-weixin`;

// 项目打包路径
const projectPath = path.resolve(__dirname, "./dist/build/mp-weixin");
// 项目描述
const desc = "描述";
// 项目版本,可以记录在外部文件中
const version = "1.0.0";

// 因为 zx 在 win 使用的 bash,需要用 cmd 执行 cli.bat
if (os.platform() === "win32") {
  cliCmd = `/mnt/c/Windows/System32/cmd.exe /c "${cliPath}"`;
  $.quote = (str) => {
    return str;
  };
}
// 运行 cli 命令
await $`${cliCmd} upload --project ${projectPath} -v ${version} -d ${desc}`;

运行

直接在项目目录下运行

zx upload.mjs

运行完成后最后的输出结果应该类似于

Untitled-1