標題有點嘩眾取寵，但內容字字都是干貨。先看看效果:
要實現這樣的效果,需要下面3步：
1.下載 node 依賴包 miniprogram-ci，編寫預覽和上傳功能
2. 登錄微信公眾平台, 下載項目的privateKey+添加代碼上傳IP白名單
3. 安裝配置Jenkins
Step1 下載 node 依賴包 miniprogram-ci,編寫預覽和上傳功能,
在微信小程序項目下創建package.json，wxCI.js文件，package.json內容如下，執行yarn 或 npm install指令 ,安裝項目運行時需要的依賴
{ "scripts": { "wxci": "cross-env node ./wxCI.js" }, "dependencies": { "cross-env": "^7.0.2", "miniprogram-ci": "1.0.93" } }
wxCI.js內容如下: 有兩個方法，一個是生成預覽二維碼的方法，一個是上傳發布代碼的方法。從命令行接受參數，執行對應的操作。生成二維碼的操作是任何情況下都會執行的。代碼上傳發布是選擇執行的。
const ci = require('miniprogram-ci');
/**
* 獲取環境參數
* type 操作類型 preview | publish
* version:版本號 上傳操作必填
* desc:版本描述 上傳操作必填
* appid:應用id,測試人員有時需要切換應用Id
* buildId: 構建id
*/
const { type, version = '', desc = '', appid = '', buildId='' } = getEnvParams(process.argv);
console.log(process.argv);
if(!appid){
console.error('appid不能為空!!!');
process.exit(1);
}
// 微信小程序的私有key文件存儲路徑,每次新增appid時,需要找運維加私有key
const privateKeyPath = `/var/lib/jenkins/cert/private.${appid}.key`;
// 請求參數
const reqParams = {
appid,
type: 'miniProgram',
projectPath: './',
privateKeyPath,
ignores: ['node_modules/**/*', 'yarn.lock', '.*'],
};
// 上傳文件處理設置參數
const uploadParams = {
es6: true, // "es6 轉 es5"
es7: true, // "增強編譯"
minify: true, // "樣式自動補全"
codeProtect: true, // "代碼保護"
autoPrefixWXSS: true, // "樣式自動補全"
};
const project = new ci.Project({ ...reqParams });
// 任何時候都生成二維碼
(async () => {
const previewResult = await ci.preview({
project,
desc: '預覽', // 此備注將顯示在“小程序助手”開發版列表中
setting: uploadParams,
qrcodeFormat: 'image',
qrcodeOutputDest: `./qrcode-${buildId}.jpg`,
onProgressUpdate: console.log,
// pagePath: 'pages/index/index', // 預覽頁面
// searchQuery: 'a=1&b=2', // 預覽參數 [注意!]這里的`&`字符在命令行中應寫成轉義字符`\&`
});
console.log(previewResult);
})();
if (type == 'publish') {
(async () => {
const uploadResult = await ci.upload({
project,
version,
desc,
setting: uploadParams,
onProgressUpdate: console.log,
});
console.log(uploadResult);
})();
}
/**
* 獲取node命令行參數
* @param {array} options 命令行數組
*/
function getEnvParams(options) {
let envParams = {};
// 從第三個參數開始,是自定義參數
for (let i = 2, len = options.length; i < len; i++) {
let arg = options[i].split('=');
envParams[arg[0]] = arg[1];
}
return envParams;
}
要實現自動預覽和代碼上傳功能，最核心的一步是miniprogram-ci這個工具包，它是微信小程序官方提供的，點擊查看官方文檔 ，用它可以不打開微信開發者工具，就能實現和微信開發者工具的預覽，代碼上傳一樣的功能。這里有個大坑， 用命令行和HTTP調用的方式，都有一個很大的缺陷，就是要在Jenkins機器上安裝微信開發者工具，而Jenkins機器一般是Linux操作系統，微信小程序官方並沒有提供Linux操作系統的微信開發者工具安裝包，尤其是HTTP調用方式，每次使用的時候，還需要啟動微信開發者工具，才能獲取HTTP服務端口號，而啟動微信開發者工具，會彈出微信開發者工具可視化UI界面，根本無法做到靜默處理。而網上充滿了這兩者做法的文章，實在是誤導新手。如果你能看到這篇文章，可以少走一些彎路。
step2 登錄微信公眾平台, 下載項目的代碼上傳秘鑰+添加代碼上傳IP白名單
miniprogram-ci需要的小程序代碼上傳秘鑰,比較費周折，需要管理員賬號，登錄微信公眾平台，下載下來，下載過的話，右側的按鈕會顯示為重置， 下載下來的小程序代碼上傳秘鑰文件，建議不要提交到git倉里，放在Jenkins工作目錄下，防止密鑰泄露。
其次，要將Jenkins服務所在機器的IP地址，添加到小程序代碼上傳IP白名單列表中。
如果忘記把上傳代碼的Jenkins機器IP地址配置到小程序代碼上傳IP白名單中的話，會報下面的錯誤
Step3 安裝配置Jenkins
Jenkins的下載安裝參見 Jenkins安裝及入門配置 , 本文只介紹要實現用Jenkins自動構建微信小程序，生成預覽二維碼或上傳發布代碼該如何配置
1.創建一個自由風格的任務
2. 通用面板--填寫任務描述
3.參數設置面板--配置構建參數
操作路徑是 參數設置-->參數化構建過程-->添加參數，我們主要用到下面幾種參數：
創建選項參數action是用來讓用戶選擇預覽還是發布
創建Git Parameter參數 branch--是用來選擇構建git分支的，可以設置一個默認分支
創建選項參數appId是用來選擇構建哪一個微信小程序。
創建文本參數version和desc，是為了在發布時讓用戶輸入版本號和版本描述。
4. 源碼管理面板 -- 指定構建代碼分支，這里要寫成變量$branch,如果寫成常量，上面配置的git Parameter參數就不生效
5.構建面板 --需要配置構建執行操作
配置入口是： 構建----》增加構建后操作步驟----》執行 shell
配置執行的操作是，清理上一次構建生成的二維碼， 在Jenkins機器上下載npm依賴包，調用微信官方提供的小程序的預覽上傳工具miniprogram-ci ,傳入相關參數，執行預覽或預覽與代碼上傳發布操作，查看一下Jenkins 任務工作空間下，是否有二維碼生成。
為了在后面的build description中獲取到shell中的變量，需要安裝一個插件Environment Injector,用它配置自定義全局變量。 它的用法是配置一個文件路徑，向文件中寫入值，Jenkins在全局都能獲取到。這里先要計算微信預覽二維碼的生成時間，寫入到自定義環境變量中，然后在build description就能獲取到。
rm -rf qrcode*.jpg
yarn
#切換環境變量 yarn gen:config:custom appId=$appid corpId=$corpId navBarTitle=$navBarTitle #生成預覽二維碼 yarn wxci type=$action appid=$appid version=$version desc=$desc buildId=${BUILD_ID} #計算過期時間，並將過期時間寫進自定義環境變量 now=`date '+%Y-%m-%d %H:%M'` echo QRCode_Expires=`date -d "$now 25 minute" "+%Y-%m-%d %H:%M"` > wx-minipro-env.txt pwd && ls
6. 構建后操作面板--配置展示二維碼的HTML文檔片段
需要下載一個Jenkins插件description setter，在增加構建后操作步驟選項列表中，才有Set build description這個選項，其次，將下面的文本復制進去，https://域名:端口/job/任務名稱/ws/qrcode-${BUILD_ID}.jpg是生成的二維碼的文件路徑,用你實際的地址替換掉這個文件地址，可以把這個url復制到瀏覽器地址欄，看是否可以訪問到。如果可以訪問到，說明文件路徑沒問題。
<div style="color:green;font-size:16px">二維碼將於${QRCode_Expires}后過期</div> <div style="display: flex;justify-content: center;"> <img src="${JOB_URL}ws/qrcode-${BUILD_ID}.jpg" alt="預覽二維碼" width="200" height="200" /> </div> <div style="padding:5px 10px">構建分支----${branch}</div> <div style="padding:0 10px">企業AppID----${appid}</div>
還需設置將文本按照HTML標簽渲染，設置方法：系統管理 -> 全局安全配置 -> 標記格式器 -> 選擇Safe HTML
依次點擊 Build with Parameters--》開始構建，本文開頭的效果圖就出來啦，至此，大功告成。
本文的代碼已經托管到gitee, 點擊 下載
避坑指南
不要安裝miniprogram-ci的最新版本，有點時候不穩定比如說v1.1.5這個版本，有些API調用會出問題，比如說wx.getExtConfigSync，返回為空，導致生成二維碼之后，頁面邏輯不正確。建議將miniprogram-ci鎖定在某個穩定版本。
參考文章：
[2] Jenkins安裝及入門配置