微信小程序是一种轻量级的应用程序，可以在微信内部直接运行，无需下载安装。然而常规的开发流程是往往需要借助微信开发者工具来进行调试、编译、预览，每次发体验版或预览还得登录工具点击上传，非常麻烦，也很繁琐，有点浪费时间和精力。还好微信小程序官方提供了命令行工具miniprogram-ci

miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。开发者可以不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

先看效果

预览动画.gif 上传

动画2.gif

前期准备

环境要求：已安装 node.js

安装以下工具

miniprogram-ci
path 目录管理
yargs 命令行接受参数
readline 命令行流程控制
@nuintun/qrcode 生成二维码
jimp 操作图片
qrcode-terminal 命令行输出二维码

npm i miniprogram-ci
npm i path
npm i yargs
npm i readline
npm i @nuintun/qrcode
npm i jimp
npm i qrcode-terminal

小程序上传密钥和白名单

密钥下载下来名称一般为 private.*******.key ，放到项目根目录备用

项目更目录下创建 qrcode文件用于保存二维码图片

完成生成二维码方法

创建 qr.js

const { Decoder } = require('@nuintun/qrcode')
const Jimp = require('jimp')
var terminal = require('qrcode-terminal')
const qrcode = new Decoder()
module.exports = async function (imagePath) {
  var imgSrc = await Jimp.read(imagePath)
  var result = qrcode.decode(
    new Int32Array(imgSrc.bitmap.data),
    imgSrc.getWidth(),
    imgSrc.getHeight()
  )

  terminal.generate(result.data, { small: true }, function (qrcode) {
    console.log(qrcode)
  })
}

编写上传和预览脚本

新建upload.js文件

// 小程序发版
const ci = require('miniprogram-ci');
const path = require('path');
const argv = require('yargs').argv;
const readline = require('readline');
console.qr = require('./util/qr.js')
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});
// 同步执行流程控制
function rlPromisify(fn) {
  return async (...args) => {
    return new Promise(resolve => fn(...args, resolve));
  };
}

const question = rlPromisify(rl.question.bind(rl));
const appid = '******************'
let versions = '1.0.1'
let descs = '1.0.1'
let projectPath = './dist/dev/mp-weixin'

return (async () => {
  if (argv.type == 'upload') {
    versions = await question("请输入新版本号：");
    console.log(`新版本号：${versions}`);
    descs = await question("请输入项目备注：");
    console.log(`备注：${descs}`);
    rl.close();
  }

  // 注意： new ci.Project 调用时，请确保项目代码已经是完整的，避免编译过程出现找不到文件的报错。
  const project = new ci.Project({
    appid: appid,
    type: 'miniProgram',
    projectPath: path.join(__dirname, projectPath), // 项目路径
    privateKeyPath: path.join(__dirname, './private.********.key'), // 密钥的路径
    ignores: ['node_modules/**/*'],
  })

  if (argv.type == 'preview') {
    const previewResult = await ci.preview({
      project,
      desc: 'hello', // 此备注将显示在“小程序助手”开发版列表中
      setting: {
        es6: true,
      },
      qrcodeFormat: 'image',
      qrcodeOutputDest: path.join(__dirname, '/qrcode/destination.jpg'),
      onProgressUpdate: console.log,
      pagePath: 'pages/index/index', // 预览页面
      searchQuery: 'a=1&b=2', // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
    })
    console.log('previewResult', previewResult)
    console.qr(path.join(__dirname, '/qrcode/destination.jpg'))
  } else {
    // 测试 打包完 需要等待一会才能读到文件，所以加个定时器
    console.log('等待5秒后 开始上传')
    let s = 5
    let timer = setInterval(async () => {
      --s
      console.log(`${s}秒`)
      if (s == 0) {
        clearInterval(timer);
        timer = undefined
        const uploadResult = await ci.upload({
          project,
          version: versions,
          desc: descs,
          setting: {
            es6: false, // es6 转 es5
            disableUseStrict: true,
            autoPrefixWXSS: true, // 上传时样式自动补全
            minifyJS: true,
            minifyWXML: true,
            minifyWXSS: true,
          }
        })
        console.log('uploadResult', uploadResult)
      }
    }, 1000)
  }
})()

package.json中配置命令

...
"scripts": {
    "wx:preview": "node upload --type=preview",
    "build:mp-weixin": "uni build -p mp-weixin",
    "wx:up": "npm run build:mp-weixin && node upload --type=upload",
}
...

因为我用的uniapp 脚手架搭建的项目所以是在 package.json配置的命令具体搭建流程可以看我这篇文章 # 用Vue打造微信小程序，让你的开发效率翻倍！

原生项目，配置好项目目录 projectPath，可以直接执行

node upload --type=preview 
node upload --type=upload

都看到这了，还不给个一键三连（点赞、关注、加收藏）

图片.png

也欢迎评论区留言哦

命令行秒传：一键上传微信小程序和生成二维码预览

前期准备

完成生成二维码方法

编写上传和预览脚本