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

小程序命令行工具

咱们开发小程序的时候，是否是每次都直接点开工具呢？直接使用小程序本身的编辑器呢？

小程序是提供了命令工具了的，使用命令行工具，可以带来不少开发上面的方便，使用命令工具，咱们在开发的时候，用咱们本身的工做流，使得开发流程更加顺畅。

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

小程序的命令行工具不是一个 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')
})
复制代码

总结

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