新手避坑 - 用 Jenkins +miniprogram-ci 自動構建微信小程序

新手避坑 — 用 Jenkins +miniprogram-ci 自動構建微信小程序

2020 年 11 月 19 日
筆記
開發工具

先看看效果:

要實現這樣的效果,需要下面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這個工具包，它是微信小程序官方提供的，官方文檔參見 //developers.weixin.qq.com/miniprogram/dev/devtools/ci.html，用它可以不打開微信開發者工具，就能實現和微信開發者工具的預覽，代碼上傳一樣的功能。這裡有個大坑，用命令行和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 任務工作空間下，是否有二維碼生成。

rm -rf qrcode*.jpg
yarn 

yarn wxci type=$action appid=$appid version=$version desc=$desc buildId=${BUILD_ID}

pwd && ls

6. 構建後操作面板–配置展示二維碼的HTML文檔片段

需要下載一個Jenkins插件description setter，在增加構建後操作步驟選項列表中，才有Set build description這個選項，其次，將下面的文本複製進去，//域名:端口/job/任務名稱/ws/qrcode-${BUILD_ID}.jpg是生成的二維碼的文件路徑,用你實際的地址替換掉這個文件地址，可以把這個url複製到瀏覽器地址欄，看是否可以訪問到。如果可以訪問到，說明文件路徑沒問題。

<img src="//域名:端口/job/任務名稱/ws/qrcode-${BUILD_ID}.jpg" alt="預覽二維碼" width="200" height="200" /><br /> <a href="//域名:端口/job/任務名稱/ws/qrcode-${BUILD_ID}.jpg" target="_blank">${branch}-${appid}-${BUILD_ID}-二維碼</a>

還需設置將文本按照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安裝及入門配置

Tags: 開發工具