微信小程序開發者工具生成預覽二維碼

由於項目測試人員越來越多，經常需要開發提供二維碼測試，所以需要一種動態生成小程序預覽二維碼的工具。

開發前需要一個無人使用的開發者賬號，用於生成二維碼。（使用測試的微信號就行）

具體流程為

可以直接使用mpvue taro 等框架直接打包的代碼，或者小程序原生未打開增強編譯的代碼。如果有一下ES新特性的代碼，需要編譯一下才能打包使用。

第一步是打包 這里使用的是開發工具的源碼

./pack.js

  "use strict";
  const a = require("glob"),
    b = require("fs"),
    c = require("path"),
    d = require("crypto");
  module.exports = async (e, f, g = {}) => {
    const h = [
      Buffer.alloc(1),
      Buffer.alloc(4),
      Buffer.alloc(4),
      Buffer.alloc(4),
      Buffer.alloc(1),
    ];
    (h[0][0] = 190), h[1].writeInt32BE(0, 0), (h[4][0] = 237);
    let i,
      j,
      k,
      l = 0;
    const m = [],
      n = [];
    return new Promise((o, p) => {
      const q = Object.assign({ nodir: !0 }, g),
        r = {};
      let s = 0;
      a(`${e}/**`, q, (a, q) => {
        if (!a) {
          q.forEach((a) => {
            const f = b.readFileSync(a),
              h = c.relative(e, a);
            if (g.needMd5) {
              const a = d.createHash("md5");
              a.update(f);
              const b = a.digest("hex");
              if (((r[h] = b), g.ignoreFileMd5 && g.ignoreFileMd5[h] === b))
                return;
            }
            const i = Buffer.from(`/${h.replace(/\\/g, "/")}`);
            l++,
              m.push(i),
              n.push(f),
              /\.js\.map$/.test(a) ||
                ((s += f.length), (s += i.length), (s += 12));
          });
          let a = 18 + 12 * l + Buffer.concat(m).length;
          k = m.map((b, c) => {
            const d = Buffer.alloc(4);
            d.writeInt32BE(b.length, 0);
            const e = Buffer.alloc(4),
              f = n[c].length,
              g = a;
            e.writeInt32BE(g, 0), (a += f);
            const h = Buffer.alloc(4);
            return h.writeInt32BE(f, 0), Buffer.concat([d, b, e, h]);
          });
          const p = Buffer.alloc(4);
          p.writeInt32BE(l, 0),
            k.unshift(p),
            (i = Buffer.concat(k)),
            (j = Buffer.concat(n)),
            h[2].writeInt32BE(i.length, 0),
            h[3].writeInt32BE(j.length, 0);
          const t = Buffer.concat(h),
            u = Buffer.concat([t, i, j]);
            (s += 18),
            o({ destPath: f, data: u, totalSize: s, fileMd5Info: r });
        } else p(a);
      });
    });
  };

　　第二步是上傳打包數據

const zlib = require("zlib");
const request = require("request");
const readFile = require("./pack");

exports.testsource =  (src, config) =>{
  return new Promise((resolve, reject) => {
    const params = [
      "_r=" + Math.random(),
      "newticket=" + config.newticket,
      "appid=" + config.appid,
      "path="+config.path,
      "debug_launch_info=" + encodeURIComponent(config.launchInfo),
      "platform=0&ext_appid=&os=win&clientversion=1032006090&gzip=1&is_game_engine_app=1&devplugin=0",
    ];
    readFile(src).then(({ data }) => {
      const url =
        "https://servicewechat.com/wxa-dev/testsource?" + params.join("&");
      request(
        { url, body: zlib.gzipSync(data), method: "post" },
        (error, response, body) => {
          if (error) {
            reject(error);
            return;
          }
          if(response.statusCode != 200){
              reject({statusCode:response.statusCode})
              return;
          }
          resolve(JSON.parse(body));
        }
      );
    });
  });
};

其中src為源代碼的根目錄的路徑。

config為配置項，config.newticket為開發工具的令牌，具體獲取和更新查看《微信小程序開發者工具獲取和更新newticket》

config.appid：當前小程序的appid

config.path：小程序入口的路徑

config.launchInfo：入口數據的配置 是一個json字符串 {"scene":1001,"path":"pages/index/index","query":{}} 分別對應的是場景值 入口路徑和參數

 

最后通過上傳，微信服務器會返回一個base64字符串的圖片，解析查看即為預覽的二維碼。