小程序-自动生成二维码-自动打码

作者: kyle背背要转运 | 来源:发表于2018-07-05 20:54 被阅读0次

小程序-自动生成二维码-自动打码
iOS 通过String生成二维码图片（swift）
上线的项目自动生成二维码失败
iOS第三方库
小程序内生成二维码并自动刷新
chrome常用插件
Chrome常用插件
Flask 返回openId和session_key
微信小程序生成分享海报（附带二维码生成）
小程序canvas相关问题

目前公司小程序是随M/pc/app一样正常版本迭代。开发小程序的流程也更加规范，人员也越多
每次 QA 或者PM 在钉钉群里 @前端 “给我生成个开发版的小程序二维码”，让前端很麻烦，要停止开发切分支编译，还要耗时。
因此有了这个自动打码的需求

先上图

编译完给个链接

jenkins上的配置

为什么要自动打码？

1 . 避免打包编译结果不一致（win/mac/node版本/本地代码不是最新等等)

避免可互相覆盖的问题，没有统一版本
QA/PM 不能自主控制，老是要等FE给我弄，你总不能让每个QA也安装开发者工具然后配环境吧。。
写代码写bug写开森呢，让我给你打码！？
编码一次半分钟，一会就要切换编译一次，累死了。。。
....等等问题

前期准备

翻了微信官方API，使用cli命令
https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html
找一台mac 安装上微信开发者工具，配置好项目，把【project.config.json】配置好
jenkins 配置好git项目，gitlab 上配置好基于事件的webhook，
这样只要合并过指定分支，就能触发jenkins编译啦

编译流程如下:

QA 点击 jenkins 立即构建或者 webhook触发编译
执行编译脚本，我们使用了 wepy ，需要先 npm run build
使用cli -p 判断是否需要登录
未登录的情况，需要使用 cli -l 执行登录，扫码
登录情况下，直接生成二维码
然后使用钉钉机器人这个东东，在群里反馈下
curl 发一个请求给钉钉机器人就完事儿啦

说明

如果是本地跑的话，不用这么麻烦，照着https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html一步步走下去就行了
主要是因为jenkins不会展示微信这个cli回调里面的图片，要不不会这么复杂
钉钉机器人里面的图片地址都要外网能解析的，所以我们选择了Link模式
下面的源码是没有放到 sy-cli 里面的，接下来会放到 sy-cli里面做统一维护
下面的源码没有经过测试，只是mac可以用嗷。。
wepy部分可以看 <<迷死氧身后的男人，踩坑小程序开发>> 这篇文章
其实做过jenkins做编译的都了解，就是个持续集成的思想。
把编译工作收敛，放在一个地方编译，减少上面那些问题，我司所有前端项目都在jenkins上编译啦

遇到问题

1.jenkins的编译机，必须要先配置好微信开发者工具和开发者工具里面的项目，还有一堆配置。简单说就是不通过微信的cli 是个正常开发环境。

微信的cli 生成二维码没有回调，只有扫码成功和扫码失败的回调，所以写了先删除目录，再setTimeout去发钉钉消息
微信的cli 不会生成目录，要自己mkdir
jenkins拿微信的cli 二维码回调，不会显示图片，所以才另存图片发送
jenkins上的图片，没有对外网解析，钉钉是拿不到的
必须要先编译，再预览/登录，才行，要不不能保证每次生成的代码都是最新
jenkins的打包机器为物理mac机器，所以不能在内部gitlab 使用webhook触发，需要主动触发
dist目录里面要有 project.config.json，wepy 1.7.0之前要手工生成下，1.7.0以后不需要，详见 wepy传送门

简化版本

使用 https://github.com/soyoung616/sy-cli


// 在你的项目中
npm install sy-cli -D
// 新建 sy-cli-qr.json
// 修改package.json的scripts

// package.json

...
"scripts": {
    "dev": "wepy build --watch",
    "build": "cross-env NODE_ENV=production wepy build --no-cache",
    "test": "echo \"Error: no test specified\" && exit 1",
    "qr": "sy-cli qr \"./sy-cli-qr.json\""
  },
...

// sy-cli-qr.json

{
 "path":{
// mac上的cli路径都一样
   "cli":"/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli",
// wepy生成后的路径
   "wx":"./dist"
 },
 "source":{
// wepy的编译
   "scripts":"npm run build"
 },
// jenkins的工作空间里面
 "jenkinsURL":"http://XXXX/job/XXXX/ws/XXXX/",
// 钉钉机器人的token
 "dingtalkToken":"XXXX"
}

源码:

新建 sy-cli-qr.json 和qr.js，跟package.json平级
把sy-cli-qr.json里面的值替换掉
node qr.js 或者 npm run qr

//qr.js

const shell = require('shelljs')
const path = require('path')
const config = require('./sy-cli-qr.json')
const cli = config.path.cli
const distProject = path.resolve(__dirname, config.path.wx)
const sourceProject = path.resolve(__dirname)
const sourceScripts = config.source.scripts
const dingtalkToken = config.dingtalkToken
const jenkinsURL = config.jenkinsURL

const QR = {
  picLogin: 'QR/login.png',
  picPreview: 'QR/preview.png',
  login() {
    let _this = this
    let _time = Date.parse(new Date())
    shell.rm('-rf','QR')
    shell.mkdir('QR')
    shell.exec(`${cli} -l --login-qr-output image@${path.resolve(__dirname, _this.picLogin)}`, (code, stdout, stderr) => {
      if (stdout.indexOf('login success') > -1) {
        _this.createQR()
      }
    })
    setTimeout(() => {
      let _txt = `小程序编译,请扫码登录,${_this.toDate(new Date())}`
      shell.exec(`curl 'https://oapi.dingtalk.com/robot/send?access_token=${dingtalkToken}' \
      -H 'Content-Type: application/json' \
      -d '
     {"msgtype": "actionCard",
       "actionCard": {
          "text": "${_txt}",
          "title": "${_txt}",
          "hideAvatar": "0",
          "btnOrientation": "1",
          "btns": [
              {
                  "title": "扫码登录",
                  "actionURL": "${jenkinsURL}${_this.picLogin}?t=${_time}"
              }
          ]
        }
     }'`)
    }, 2000)
  },
  createQR() {
    let _this = this
    let _time = Date.parse(new Date())
    shell.rm('-rf','QR')
    shell.mkdir('QR')
    shell.exec(`${cli} -p ${distProject} --preview-qr-output image@${path.resolve(__dirname, _this.picPreview)}`, (code, stdout, stderr) => {
      if (stderr.indexOf('需要重新登录') > -1) {
        _this.login()
      } else {
        let _txt = `小程序编译成功,请扫码查看,${_this.toDate(new Date())}`
        shell.exec(`curl 'https://oapi.dingtalk.com/robot/send?access_token=${dingtalkToken}' \
    -H 'Content-Type: application/json' \
    -d '
   {"msgtype": "actionCard",
     "actionCard": {
      "text": "${_txt}",
      "title": "${_txt}",
      "hideAvatar": "0",
      "btnOrientation": "1",
      "btns": [
          {
              "title": "扫码查看",
              "actionURL": "${jenkinsURL}${_this.picPreview}?t=${_time}"
          }
      ]
      }
   }'`)
      }
    })
  },
  build() {
    return new Promise((resolve, reject) => {
      shell.cd(`${sourceProject}`)
      shell.exec(`${sourceScripts}`, (code, stdout, stderr) => {
        if (code) {
          reject(stderr)
        } else {
          resolve(1)
        }
      })
    })
  },
  async init() {
    let _this = this
    let _build = await _this.build().catch((err) => {
      console.log(err)
      console.log('编译失败')
      process.exit(1)
    })
    if (_build) {
      _this.createQR()
    }
  },
  toDate (timeStamp, getMilliseconds) {
    let date = new Date(timeStamp)
    let time = [
      date.getFullYear(),
      date.getMonth() + 1,
      date.getDate(),
      date.getHours(),
      date.getMinutes(),
      date.getSeconds()
    ]

    getMilliseconds && time.push(date.getMilliseconds())

    for (var i = 0; i < time.length; i++) {
      var val = time[i]
      if (val <= 9) {
        time[i] = '0' + val
      }
    }
    if (getMilliseconds) {
      time = time.slice(0, 3).join('-') + ' ' + time.slice(3, time.length).join(':')
    } else {
      time = time.slice(0, 3).join('-') + ' ' + time.slice(3, 6).join(':')
    }
    return time
  }
}

QR.init()

// package.json

...
"scripts": {
    "dev": "wepy build --watch",
    "build": "cross-env NODE_ENV=production wepy build --no-cache",
    "test": "echo \"Error: no test specified\" && exit 1",
    "qr": "node qr.js"
  },
...