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

孤舟蓑翁發表於2020-11-19
Jenkins微信小程式

先看看效果:

 

要實現這樣的效果,需要下面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這個工具包，它是微信小程式官方提供的，官方文件參見 https://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這個選項，其次，將下面的文字複製進去，https://域名:埠/job/任務名稱/ws/qrcode-${BUILD_ID}.jpg是生成的二維碼的檔案路徑,用你實際的地址替換掉這個檔案地址，可以把這個url複製到瀏覽器位址列，看是否可以訪問到。如果可以訪問到，說明檔案路徑沒問題。

<img src="https://域名:埠/job/任務名稱/ws/qrcode-${BUILD_ID}.jpg" alt="預覽二維碼" width="200" height="200" /><br /> <a href="https://域名:埠/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安裝及入門配置

相關文章