feat: support script to generate qrcode (#917)

* fix: update demo

* feat: support script to generate qrcode

* feat: update qrcode

package.json

@@ -39,7 +39,8 @@
     "prepare": "husky install",
     "generate": "gulp generate --gulpfile script/gulpfile.js --cwd ./",
     "changelog": "node script/generate-changelog.js",
-    "robot": "publish-cli robot-msg"
+    "robot": "publish-cli robot-msg",
+    "qrcode": "node script/qrcode/index.js"
   },
   "author": "tdesign",
   "license": "MIT",
@@ -57,6 +58,7 @@
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
     "@vue/compiler-sfc": "^3.2.4",
+    "axios": "^1.1.3",
     "babel-jest": "^26.6.3",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.2",
@@ -120,4 +122,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}

script/qrcode/api.js

@@ -0,0 +1,35 @@
+const { get, post } = require('./httpRequest');
+
+/**
+ * 获取access_token， 网页调试工具：https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token&token=&lang=zh_CN
+ * @api https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
+ * @method GET
+ * @parameter grant_type
+ * @parameter appid
+ * @parameter secret
+ * @return Object
+ */
+const getAccessToken = (appId, appSecret) => {
+  const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;
+  return get(url);
+};
+
+/**
+ * 获取小程序码，适用于需要的码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制。
+ * @api https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
+ * @method POST
+ * @parameter access_token
+ * @parameter body
+ * @parameter scene //跳转带参
+ * @parameter path  //跳转页面
+ * @return 二成功时返回的是 Buffer ，失败时返回 JSON
+ */
+const getUnlimitedQRCode = (token, parameter, config) => {
+  const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`;
+  return post(url, parameter, config);
+};
+
+module.exports = {
+  getAccessToken,
+  getUnlimitedQRCode,
+};

script/qrcode/httpRequest.js

@@ -0,0 +1,74 @@
+/** axios封装
+ * 请求拦截、响应拦截、错误统一处理
+ */
+const axios = require('axios');
+
+// axios.defaults.timeout = 10000; // 超时抛出异常
+// axios.defaults.withCredentials = true;
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; // post请求头
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 默认异步请求
+
+// 请求拦截
+axios.interceptors.request.use(
+  (config) => config,
+  (error) => Promise.error(error),
+);
+// 响应拦截
+axios.interceptors.response.use(
+  (response) => {
+    if (response.status === 200) {
+      return Promise.resolve(response);
+    }
+    return Promise.reject(response);
+  },
+  // 服务器状态码不是200的情况
+  (error) => {
+    if (error.response.status) {
+      return Promise.reject(error.response);
+    }
+  },
+);
+
+/**
+ * @description get请求
+ * @parameter {String} url [请求的url地址]
+ * @parameter {Object} parameter [请求时携带的参数]
+ * @parameter {Object} config [其他配置信息]
+ */
+const get = (url, parameter, config) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .get(url, parameter, config)
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err.data);
+      });
+  });
+};
+
+/**
+ * @description post请求
+ * @parameter {String} url [请求的url地址]
+ * @parameter {Object} parameter [请求时携带的参数]
+ * @parameter {Object} config [其他配置信息]
+ */
+
+const post = (url, parameter, config) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(url, parameter, config)
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err.data);
+      });
+  });
+};
+
+module.exports = {
+  get,
+  post,
+};

script/qrcode/index.js

@@ -0,0 +1,69 @@
+const fs = require('fs');
+const path = require('path');
+const { getAccessToken, getUnlimitedQRCode } = require('./api');
+
+// 去读 app.json 中 pages 字段
+const { pages } = require('../../example/app.json');
+
+const APP_ID = process.argv[process.argv.indexOf('--APP_ID') + 1]; // 在 --APP_ID 后面
+const APP_SECRET = process.argv[process.argv.indexOf('--APP_SECRET') + 1]; // --APP_SECRET 后面
+
+const getUnlimitedQRCodeImage = (appid, appSecret) => {
+  getAccessToken(appid, appSecret).then((e) => {
+    if (e.access_token) {
+      const token = e.access_token;
+      // eslint-disable-next-line no-console
+      console.log('==access_token 2h内有效=', token);
+      const baseParameter = {
+        width: 280, // 小程序码大小
+        // check_path: false,
+      };
+      const baseConfig = {
+        responseType: 'arraybuffer',
+      };
+
+      // 循环 pages, 获取相应小程序码
+      pages.forEach((item, index) => {
+        const temp = [...new Set(item.split('/').slice(1))];
+        const fileName = temp.join('-');
+
+        const specialParameter = {
+          page: item, // 扫码进入的小程序页面路径
+          scene: `name=${temp[0]}`, // 标识
+        };
+        getUnlimitedQRCode(token, { ...specialParameter, ...baseParameter }, { ...baseConfig }).then((res) => {
+          // 因为微信接口 getwxacodeunlimit 成功时返回的是 Buffer ，失败时返回 JSON 结构。这里把返回数据全部当成 Buffer 处理，所以 res.length < 200， 则表示获取失败。
+          if (res.length < 200) {
+            const { errcode, errmsg } = JSON.parse(res.toString());
+            // eslint-disable-next-line no-console
+            console.log('===小程序码获取失败===', item, { errcode, errmsg });
+            return;
+          }
+
+          const buffer = Buffer.from(res, 'base64');
+          const destPath = path.resolve(__dirname, `../../site/public/assets/qrcode/${fileName}.png`);
+
+          fs.writeFile(
+            destPath,
+            buffer,
+            {
+              encoding: 'binary',
+              flag: 'w+',
+            },
+            (err) => {
+              if (err) {
+                // eslint-disable-next-line no-console
+                console.log('===小程序码图片存储错误===', err);
+              }
+            },
+          );
+        });
+      });
+    }
+  });
+};
+
+/**
+ * @description 命令行生成小程序码 npm run qrcode -- --APP_ID xxx --APP_SECRET xxx
+ */
+getUnlimitedQRCodeImage(APP_ID, APP_SECRET);

site/plugin-tdoc/component.vue

@@ -7,17 +7,24 @@
         <div name="DEMO" v-html="info.demoMd"></div>
         <td-doc-phone>
           <div class="qrcode__wrapper" slot="qrcode">
-            <img class="qrcode" :src="`https://tdesign.gtimg.com/miniprogram/qrcode/${name}.png`" />
+            <img class="qrcode" :src="qrcode" />
+            <!-- <img class="qrcode" :src="`https://tdesign.gtimg.com/miniprogram/qrcode/${name}.png`" /> -->
           </div>
-          <iframe :src="liveUrl" frameborder="0" width="100%" height="100%" style="box-sizing: border-box; border-radius: 0 0 6px 6px; overflow: hidden; border-top: 8px solid #f8f8f8;"></iframe>
+          <iframe
+            :src="liveUrl"
+            frameborder="0"
+            width="100%"
+            height="100%"
+            style="box-sizing: border-box; border-radius: 0 0 6px 6px; overflow: hidden; border-top: 8px solid #f8f8f8"
+          ></iframe>
         </td-doc-phone>
         <td-contributors platform="miniprogram" framework="wx" :component-name="name"></td-contributors>
       </div>
       <div v-show="tab === 'api'" name="API" v-html="info.apiMd"></div>
       <div v-show="tab === 'design'" name="DESIGN" v-html="info.designMd"></div>
     </template>
     <div name="DOC" :class="info.docClass" v-else v-html="info.docMd"></div>
-    <div style="margin-top: 48px;">
+    <div style="margin-top: 48px">
       <td-doc-history :time="info.lastUpdated"></td-doc-history>
     </div>
     <td-doc-footer slot="doc-footer" platform="mobile"></td-doc-footer>
@@ -52,24 +59,28 @@ export default defineComponent({
     },
     name() {
       const { path } = this.$route;
-      return path.slice(path.lastIndexOf('/') + 1)
+      return path.slice(path.lastIndexOf('/') + 1);
     },
     liveUrl() {
-      return `//tdesign.tencent.com/miniprogram-live/m2w/program/miniprogram/#!pages/${this.name}/${this.name}.html`
-    }
+      return `//tdesign.tencent.com/miniprogram-live/m2w/program/miniprogram/#!pages/${this.name}/${this.name}.html`;
+    },
+    qrcode() {
+      const { path } = this.$route;
+      const name = path.slice(path.lastIndexOf('/') + 1);
+      // new URL(): https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
+      return new URL(`../public/assets/qrcode/${name}.png`, import.meta.url).href;
+    },
   },
 
   mounted() {
     const { info } = this;
     const { tdDocContent, tdDocHeader, tdDocTabs } = this.$refs;
 
     if (info.isComponent) {
-      tdDocTabs.onchange = ({ detail: currentTab }) => this.tab = currentTab;
+      tdDocTabs.onchange = ({ detail: currentTab }) => (this.tab = currentTab);
       tdDocHeader.componentName = info.componentName;
     }
-    
     Prismjs.highlightAll();
-    
     tdDocHeader.spline = info.spline;
     tdDocHeader.docInfo = { title: info.title, desc: info.description };
 
@@ -92,17 +103,17 @@ export default defineComponent({
     text-align: center;
     background-color: #fff;
     border-radius: 6px 6px 0 0;
-    border: 1px solid #DCDCDC;
-    
+    border: 1px solid #dcdcdc;
+
     &--gray {
       background-color: #eee;
     }
 
-    :root[theme-mode="dark"] & img {
+    :root[theme-mode='dark'] & img {
       filter: unset;
     }
 
-    div[name=DEMO] & + pre {
+    div[name='DEMO'] & + pre {
       margin-top: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;

src/calendar/_example/calendar.js

@@ -1 +1 @@
-Component({});
+Page({});

src/calendar/_example/calendar.json

@@ -1,5 +1,4 @@
 {
-  "component": true,
   "usingComponents": {
     "base": "./base",
     "multiple": "./multiple",

src/loading/_example/loading.ts

@@ -1,7 +1,7 @@
 Page({
   goToProgress() {
     wx.redirectTo({
-      url: '/pages/loading/loadingProgress/loadingProgress',
+      url: '/pages/loading/loadingProgress/index',
     });
   },
 });