一、本地使用微信小程序開發(fā)者工具生成預(yù)覽二維碼
先安裝，只有mac和Windows版，下面地址下載對應(yīng)版本后安裝應(yīng)用，我這里下載賊慢，耐心點。。。
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安裝好之后，微信掃碼登錄客戶端，測試一下使用工具生成本地代碼的預(yù)覽二維碼，微信掃碼能夠訪問，安裝開發(fā)者工具的準(zhǔn)備工作就完成了。
完成后注意不要關(guān)閉應(yīng)用，保持登錄，以便腳本調(diào)用工具。
二、接入Jenkins實現(xiàn)一鍵生成二維碼
1、安裝下列Jenkins插件后重啟：
GIT plugin
Git Parameter:獲取所有分支名，作為參數(shù)列表
SSH Credentials Plugin
Git Changelog：獲取Git提交log
build-name-setter
description setter plugin：在build歷史記錄描述信息中增加二維碼顯示
PostBuildScript Plugin：編譯完成后執(zhí)行腳本
NodeJS Plugin:小程序構(gòu)建需要，在更改提交狀態(tài)時使用node技術(shù)
AnsiColor
5、參數(shù)化構(gòu)建過程中添加選項參數(shù)build_type，用來讀取指定環(huán)境的配置，后續(xù)腳本中有用到這個值；
6、參數(shù)化構(gòu)建過程中添加字符參數(shù)work_path，就是你的Jenkins拉下來的代碼路徑；
7、源碼管理中，添加代碼地址、賬號密碼，分支填上面Git Parameter傳過來的值$Branch;
8、構(gòu)建環(huán)境按照如下配置：
9、構(gòu)建操作，cd到Jenkins拉下來的代碼目錄下，執(zhí)行deploy腳本。
10、構(gòu)建后操作，把生成二維碼的HTML代碼寫到build歷史記錄中顯示二維碼圖片，具體內(nèi)容為：
舊的寫法：
（<img src="http://JenkinsIP端口或域名/jenkins/job/edu-wechat-mini/ws/${BUILD_ID}.png" alt="二維碼${BUILD_ID}" width="200" height="200" /><a href="http://JenkinsIP端口或域名/jenkins/job/edu-wechat-mini/ws/${BUILD_ID}.png">二維碼${BUILD_ID}</a>）
優(yōu)化了下：
<img src="${JOB_URL}ws/${BUILD_ID}.png" alt="二維碼${BUILD_ID}" width="200" height="200" /><a href="${JOB_URL}ws/${BUILD_ID}.png">二維碼${BUILD_ID}</a>
最后打包出來的結(jié)果：
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 "[執(zhí)行命令] $1"
$1
if [ "$?" != "0" ]; then
error_exit "命令執(zhí)行失敗: 錯誤碼為 $?"
fi
}
# sed匹配hosts.js內(nèi)容，替換服務(wù)端環(huán)境
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} 環(huán)境"
;;
"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} 環(huán)境"
;;
"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} 環(huán)境"
;;
esac
if [ "$?" != "0" ]; then
error_exit "切換環(huán)境失??！"
fi
else
error_exit "沒有找到hosts.js文件！"
fi
}
# 根據(jù)feature參數(shù)增加版本號，上傳到微信小程序后臺準(zhǔn)備提審
# 用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
}
# 生成開發(fā)版二維碼
# 這里直接執(zhí)行小程序cli的命令
upload_for_preview()
{
exec_cmd "/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o"
port=$(cat "/Users/min/Library/Application Support/微信web開發(fā)者工具/Default/.ide")
echo "微信開發(fā)者工具運行在${port}端口"
echo "調(diào)用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 "返回狀態(tài)碼200，devtool啟動成功！"
else
echo "返回狀態(tài)碼${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 "發(fā)布測試版！"
change_hosts
#生成二維碼
upload_for_preview
success "預(yù)覽成功！請掃描二維碼進(jìn)入測試版！"
elif [ "$build_type" == "dev" ]; then
info "發(fā)布開發(fā)版！"
change_hosts
#生成二維碼
upload_for_preview
success "預(yù)覽成功！請掃描二維碼進(jìn)入開發(fā)版！"
elif [ "$build_type" == 'prod' ]; then
info "準(zhǔn)備上傳！"
change_hosts
#提交代碼微信公眾平臺
upload_for_release
success "上傳成功！請到微信小程序后臺設(shè)置體驗版并提交審核！"
else
error_exit "需要設(shè)置合法的build_type！"
fi
（2）upload.js
var fs = require('fs');
var cp = require('child_process');
var args = process.argv; // 獲取命令行帶入的參數(shù) args[0]是程序執(zhí)行的目錄 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('執(zhí)行命令: ' + cmd)
// 使用child_process在終端執(zhí)行命令
cp.exec(cmd, function(err, stdout, stderr) {
var succ = true;
if (err) {
// 命令執(zhí)行異常，退出程序
err_msg(err);
if (stderr) {
err_msg(stderr);
}
succ = false;
} else {
// 打印所執(zhí)行命令的標(biāo)準(zhǔn)輸出
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);
// 根據(jù)feature參數(shù)確定版本號增加的邏輯
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('未設(shè)置正確的版本特性！');
process.exit(err_code);
}
// 生成version.js所需的文件內(nèi)容，方便小程序代碼直接讀取
var str = 'module.exports = {' + '\n\trefactor: ' + version_conf.refactor + ',\n\tupdate: ' + version_conf.update + ',\n\tdebug: ' + version_conf.debug + '\n}';
// 寫入文件（fs.writeFile() 以w模式打開文件，寫入的內(nèi)容會覆蓋原有內(nèi)容）
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;
// 寫入正常，執(zhí)行小程序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://測試環(huán)境IP或域名',
hostDc: 'https://.cn' //
},
dev: {
hostSmart: 'http://.具體環(huán)境(如:beta)..com',
hostDc: 'https://.cn' //
},
prod: {
hostSmart: 'http://.生成環(huán)境..com',
hostDc: 'https://.cn' //
}
}
module.exports = {
getHosts: function () {
return hosts[curr_env]
}
}
——————————————————————————-
打包命令優(yōu)化為官方命令，語句更簡單更穩(wěn)定：
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"
被小程序賬號權(quán)限問題坑了兩次：
1、一直遇到生成預(yù)覽二維碼圖片這一步報400錯誤，不懂為啥，最后拿開發(fā)者賬號掃碼登錄發(fā)現(xiàn)可以，才知道必須是開發(fā)者賬號登錄才行，我的賬號不是開發(fā)者賬號。。。所以需要在Jenkins機器上使用小程序開發(fā)者賬號登錄小程序開發(fā)者工具客戶端。。。
2、掃碼體驗的微信號也需要開權(quán)限，否則不能預(yù)覽。。。
