使用Jenkins打包生成微信小程序二维码进行测试

一、本地使用微信小程序开发者工具生成预览二维码

先安装,只有mac和Windows版,下面地址下载对应版本后安装应用,我这里下载贼慢,耐心点。。。
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装好之后,微信扫码登录客户端,测试一下使用工具生成本地代码的预览二维码,微信扫码能够访问,安装开发者工具的准备工作就完成了。
完成后注意不要关闭应用,保持登录,以便脚本调用工具。

二、接入Jenkins实现一键生成二维码

1、安装下列Jenkins插件后重启:
GIT plugin
Git Parameter:获取所有分支名,作为参数列表
SSH Credentials Plugin
Git Changelog:获取Git提交log
build-name-setter
description setter plugin:在build历史记录描述信息中增加二维码显示
PostBuildScript Plugin:编译完成后执行脚本
NodeJS Plugin:小程序构建需要,在更改提交状态时使用node技术
AnsiColor

2、在Jenkins系统管理——全局安全配置页面,将标记格式器在下拉列表中修改为Safe HTML然后保存,这个修改是为了在build历史记录中能够直接显示二维码图片;

3、在Jenkins系统管理——全局工具配置页面,新增nodejs配置,选择node版本,这一步是为了后面“NodeJS Installation”下拉选择中有版本可选。

4、创建自由风格Jenkins任务,参数化构建过程中添加Git Parameter,用来获取分支打包时选择;

配置成功后build效果:

5、参数化构建过程中添加选项参数build_type,用来读取指定环境的配置,后续脚本中有用到这个值;

6、参数化构建过程中添加字符参数work_path,就是你的Jenkins拉下来的代码路径;

7、源码管理中,添加代码地址、账号密码,分支填上面Git Parameter传过来的值$Branch;

8、构建环境按照如下配置:

9、构建操作,cd到Jenkins拉下来的代码目录下,执行deploy脚本。

10、构建后操作,把生成二维码的HTML代码写到build历史记录中显示二维码图片,具体内容为:
旧的写法:
(二维码${BUILD_ID}二维码${BUILD_ID}
优化了下:
二维码${BUILD_ID}二维码${BUILD_ID}

最后打包出来的结果:

11、附上使用到的脚本,需要加到项目代码根目录下:
(脚本需要用到wget,没有安装的自行安装,我是用homebrew安装的:brew install wget)
(1)deploy.sh:

#!/bin/bash
msg() {
    printf '%b\n' "$1" >&2
}

info()
{
    msg "[INFO] $1"
}

success() {
    msg "\e[1;32m[✔] ${1}${2} \33[0m "
}

notice() {
    msg "\e[1;33m ${1} \e[0m"
}

error_exit() {
    msg "\e[1;31m[✘] ${1}${2} \33[0m"
    exit 1
}

exec_cmd()
{
  echo "[执行命令] $1"
  $1
  if [ "$?" != "0" ]; then
    error_exit "命令执行失败: 错误码为 $?"
  fi
}

# sed匹配hosts.js内容,替换服务端环境
change_hosts() 
{
    if [ -f "hosts.js" ]; then
        case $build_type in 
            "test")
                target_env="test"
                echo "${work_path}"/hosts.js
                sed -i "" "s/^const curr_env = .*/const curr_env = '$target_env'/" ${work_path}"/hosts.js"
                info "切换到 ${target_env} 环境"
            ;;
            "dev")
                target_env="dev"
                echo "${work_path}"/hosts.js
                sed -i "" "s/^const curr_env = .*/const curr_env = '$target_env'/" ${work_path}"/hosts.js"
                info "切换到 ${target_env} 环境"
            ;;
            "prod")
                target_env="prod"
                echo "${work_path}"/hosts.js
                sed -i "" "s/^const curr_env = .*/const curr_env = '$target_env'/" ${work_path}"/hosts.js"
                info "切换到 ${target_env} 环境"
            ;;
        esac
        if [ "$?" != "0" ]; then
            error_exit "切换环境失败!"
        fi
    else
        error_exit "没有找到hosts.js文件!"
    fi
}

# 根据feature参数增加版本号,上传到微信小程序后台准备提审
# 用node程序直接读取version.js修改版本号
upload_for_release() 
{
    if [ -f ${work_path}"/version.js" ]; then
        exec_cmd "node /Users/min/.jenkins/workspace/ops-server/tmp/mp/upload.js ${work_path} $feature $desc"
    else
        error_exit "没有找到version.js文件!"
    fi
}

# 生成开发版二维码
# 这里直接执行小程序cli的命令
upload_for_preview()
{
    exec_cmd "/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o"
    port=$(cat "/Users/min/Library/Application Support/微信web开发者工具/Default/.ide")
    echo "微信开发者工具运行在${port}端口"
    echo "调用http://127.0.0.1:${port}/open"
    return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port} -o /open)
    if [ $return_code == 200 ]; then
        echo "返回状态码200,devtool启动成功!"
    else
    echo "返回状态码${return_code},devtool启动失败"
        exit 1
    fi
  exec_cmd "pwd"
    exec_cmd "wget  -O  ${work_path}/$BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=${work_path}"
}

if [ "$build_type" == "test" ]; then
  info "发布测试版!"
  change_hosts
  #生成二维码
  upload_for_preview
  success "预览成功!请扫描二维码进入测试版!"
elif [ "$build_type" == "dev" ]; then
  info "发布开发版!"
  change_hosts
  #生成二维码
  upload_for_preview
  success "预览成功!请扫描二维码进入开发版!"
elif [ "$build_type" == 'prod' ]; then
  info "准备上传!"
  change_hosts
  #提交代码微信公众平台
  upload_for_release
  success "上传成功!请到微信小程序后台设置体验版并提交审核!"
else
    error_exit "需要设置合法的build_type!"
fi

(2)upload.js

var fs = require('fs');
var cp = require('child_process');
var args = process.argv;  // 获取命令行带入的参数 args[0]是程序执行的目录 args[1]是文件名

const succ_code = 0;
const err_code = 1;

function err_msg(str) {
    console.log('[NODE ERR] ', str);
}

function info_msg(str) {
    console.log('[NODE INFO] ', str);
}

function exec_cmd(cmd, cb) {
    info_msg('执行命令: ' + cmd)
    // 使用child_process在终端执行命令
    cp.exec(cmd, function(err, stdout, stderr) {
        var succ = true;
        if (err) {
            // 命令执行异常,退出程序
            err_msg(err);
            if (stderr) {
                err_msg(stderr);
            }
            succ = false;
        }   else {
            // 打印所执行命令的标准输出
            info_msg(stdout);
            if (stderr) {
                err_msg(stderr);
            }
        }
        typeof cb === 'function' && cb(succ);
    })
}

try {
    var path = args[2];
    var feature = args[3];
    var desc = '【RELEASE】' + args[4];

    var ver_path = path + '/version.js';
    var version_conf = require(ver_path);

    // 根据feature参数确定版本号增加的逻辑
    switch(feature) {
        case 'debug': {
            version_conf.debug++;
            break;
        }
        case 'update': {
            version_conf.update++;
            version_conf.debug = 0;
            break;
        }
        case 'refactor': {
            version_conf.refactor++;
            version_conf.update = 0;
            version_conf.debug = 0;
            break;
        }
        default:
            err_msg('未设置正确的版本特性!');
            process.exit(err_code);
    }
    // 生成version.js所需的文件内容,方便小程序代码直接读取
    var str = 'module.exports = {' + '\n\trefactor: ' + version_conf.refactor + ',\n\tupdate: ' + version_conf.update + ',\n\tdebug: ' + version_conf.debug + '\n}';
    // 写入文件(fs.writeFile() 以w模式打开文件,写入的内容会覆盖原有内容)
    fs.writeFile(ver_path, str, function(err) {
        if (err) {
            err_msg(err);
            process.exit(err_code);
        } else {
            info_msg('UPDATE VERSION SUCCESS!');
            info_msg('Build feature is: ' + feature);
            info_msg('Current version is: ' + version_conf.refactor + '.' + version_conf.update + '.' + version_conf.debug);
            var ver = version_conf.refactor + '.' + version_conf.update + '.' + version_conf.debug;
            // 写入正常,执行小程序cli命令上传
            var upload_cmd = '/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u ' + ver + '@' + path + ' --upload-desc ' + desc;
            exec_cmd(upload_cmd, function(ok) {
                process.exit(ok ? succ_code : err_code);
            });
        }
    });
} catch(error) {
    // 捕获异常,退出程序
    err_msg(error);
    process.exit(err_code);
}

(3)hosts.js

const curr_env = 'test'
const hosts = {
test: {
hostSmart: 'http://测试环境IP或域名', 
hostDc: 'https://.cn' // 
},
dev: {
hostSmart: 'http://.具体环境(如:beta)..com', 
hostDc: 'https://.cn' // 
},
prod: {
hostSmart: 'http://.生成环境..com', 
hostDc: 'https://.cn' // 
}
}
module.exports = {
getHosts: function () {
return hosts[curr_env]
}
}

——————————————————————————-
打包命令优化为官方命令,语句更简单更稳定:

exec_cmd "rm -if $WORKSPACE/*.png"
exec_cmd "/Applications/wechatwebdevtools.app/Contents/MacOS/cli preview --project $WORKSPACE --qr-output $WORKSPACE/$BUILD_ID.png --qr-format image"

被小程序账号权限问题坑了两次:

1、一直遇到生成预览二维码图片这一步报400错误,不懂为啥,最后拿开发者账号扫码登录发现可以,才知道必须是开发者账号登录才行,我的账号不是开发者账号。。。所以需要在Jenkins机器上使用小程序开发者账号登录小程序开发者工具客户端。。。

2、扫码体验的微信号也需要开权限,否则不能预览。。。

你可能感兴趣的:(使用Jenkins打包生成微信小程序二维码进行测试)