小程序命令行工具

我们开发小程序的时候，是不是每次都直接点开工具呢？直接使用小程序自己的编辑器呢？

小程序是提供了命令工具了的，使用命令行工具，能够带来很多开发上面的方便，使用命令工具，我们在开发的时候，用我们自己的工作流，使得开发流程更加顺畅。

如何使用微信小程序命令行工具

小程序的命令行工具不是一个 npm 包，而是安装了之后就一个本地的命令 cli.

cli 的位置

Mac：/Applications/wechatwebdevtools.app/Contents/MacOS/cli
Win：C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat

使用 yarn 命令和环境变量控制小程序命令行工具

// package.json
{
    "scripts":{
        "tool:open": "cross-env ACTION=OPEN node build/command/index.js",
        "tool:close": "cross-env ACTION=CLOSE node build/command/index.js",
        "tool:quit": "cross-env ACTION=QUIT node build/command/index.js",
        "tool:login": "cross-env ACTION=LOGIN node build/command/index.js",
        "tool:preview": "cross-env ACTION=PREVIEW node build/command/index.js",
        "tool:autopreview": "cross-env ACTION=AUTO-PREVIEW node build/command/index.js",
        "tool:upload": "cross-env ACTION=UPLOAD node build/command/index.js",
        "tool:npm": "cross-env ACTION=NPM node build/command/index.js",
        "tool:auto": "cross-env ACTION=AUTO node build/command/index.js",
    }
}

ACTION

action 就对应着小程序的动作，我们使用 yarn 或者 npm 的工作流来开发小程序，在vscode里面开发，小程序本身的工具起到调试的作用。

action = open 对应小程序的 -o 或者 --open
action = close 是关闭微信小程序开发工具
action = quit 是退出
action = login 是登录小程序开发工具
action = preview 是预览小程序，会在命令行生成一个二维码
action = autopreview 自动在手机上预览小程序。
action = upload 是上传小程序
action = npm 是 npm 构建微信小程序
action = auto 自动化

创建命令，使用 node 的 child-process 来执行命令

const utils = require('util')
// const exec = utils.promisify(require('child_process').exec)
const exec = require('child_process').exec

const cli = `/Applications/wechatwebdevtools.app/Contents/MacOS/cli`
// const cli = `/Applications/wechatwebdevtools.app/Contents/MacOS/cli`
const miniDir =
  '/Users/magnesium/Documents/mini-program/mini-work-flow-2/dist/YoungUI-development'
// const miniDir = '../../dist/YoungUI-development/'

// const p = exec(`npx ${cli} -o ${miniDir}`)
// const p = exec(`npx ${cli} -l`)
const action = process.env.ACTION
let p = ''
switch (action) {
  case 'OPEN':
    console.log('this is open')
    p = exec(`npx ${cli} -o`)
    break
  case 'CLOSE':
    p = exec(`npx ${cli} --close ${miniDir}`)
    break
  case 'QUIT':
    p = exec(`npx ${cli} --quit ${miniDir}`)
    break
  case 'LOGIN':
    p = exec(`npx ${cli} --login-qr-output terminal`)
    break
  case 'PREVIEW':
    p = exec(`npx ${cli} -p ${miniDir}`)
    break
  case 'AUTO-PREVIEW':
    p = exec(`npx ${cli} --auto-preview ${miniDir}`)
    break
  case 'UPLOAD':
    p = exec(`npx ${cli} -u ${miniDir}`)
    break
  case 'NPM':
    p = exec(`npx ${cli} --build-npm ${miniDir}`)
    break
  case 'AUTO':
    p = exec(`npx ${cli} --auto ${miniDir}`)
    break
  default:
    break
}

p.stdout.on('data', data => {
  console.log(data.toString())
})

p.stderr.on('data', data => {
  console.error(data.toString())
})

p.on('error', function(err) {
  console.log(err)
})

p.on('exit', function(err) {
  console.log('on exit event')
})

总结

使用 node.js 的子进程来运行 cli 命令
更具环境 npm scripts 传递的环境变量 process.env.ACTION 的来判断执行小程序命令行的那个命令。
http 来控制小程序其实本质是一样的，我们使用http来请求命令行工具执行
上传预览版之后，我们可以使用小程序助手来体验，体验版的功能，不在需要导出法二维码，给测试，项目经理等等！

@小程序命令行工具和http工具