@小程序命令行工具和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. 上傳預覽版以後，咱們能夠使用小程序助手來體驗，體驗版的功能，不在須要導出法二維碼，給測試，項目經理等等！