嘴對嘴，手摸手 ，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這個工具包，它是微信小程式官方提供的，官方檔案參見 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安裝及入門配置

標籤：其他

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

下一篇：如何呼叫動態庫里面的類