嘴對嘴，手摸手 ，10分鐘教你學會用 Jenkins +miniprogram-ci 自動生成微信小程序預覽二維碼

標題有點譁衆取寵，但內容字字都是乾貨。先看看效果:

要實現這樣的效果,須要下面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  登陸微信公衆平臺, 下載項目的privateKey+添加代碼上傳IP白名單

miniprogram-ci須要的privateKey參數,比較費周折，須要管理員帳號，登陸微信公衆平臺，下載下來，下載過的話，AppSecret右側的按鈕會顯示爲重置， 下載下來的小程序代碼祕鑰文件，建議不要提交到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

再附贈一段快速清除錯誤構建的腳本，執行的入口是 Jenkins --》 Manage Jenkins--》 Tools and Actions --》 Script Console

#以下代碼將刪除1到9999的歷史構建
#任務名稱
def jobName = "wx-ci-test" 
#最大行號
def maxNumber = 9999 

Jenkins.instance.getItemByFullName(jobName).builds.findAll {
  it.number <= maxNumber
}.each {
  it.delete()
}

最後，依次點擊 Build with Parameters--》開始構建，本文開頭的效果圖就出來啦，至此，大功告成。

 

本文的代碼已經託管到gitee, 點擊 下載

 

參考文章：

[1] 手摸手聊聊小程序持續集成Jenkins

[2] Jenkins安裝及入門配置