进出码优化

miniprogram/src/pages/index/index.config.js

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '首页',
+  "navigationStyle": "custom"
 })

miniprogram/src/pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <image src="../../image/home.jpg?t=1" style="width: 100vw; height: 41.5vw;"></image>
+    <image src="../../image/home.jpg" style="width: 100vw; height: 41.5vw;"></image>
     <view style="display: block; padding-left: 30px; padding-top: 12px;">
       <text>欢迎你，{{ displayUsername }}！</text>
     </view>

miniprogram/src/pages/residents/code.vue

@@ -10,6 +10,7 @@
 
 <script>
 import Taro from '@tarojs/taro'
+import md5 from 'blueimp-md5'
 import drawQrcode from '../../utils/qrcode/index'
 import utils from '../../utils/utils'
 
@@ -31,9 +32,7 @@ export default {
 
   onShow() {
     console.log('onShow')
-    setTimeout(() => {
+    setTimeout(this.refershData, 100)
-      Taro.startPullDownRefresh();
-    }, 100)
   },
 
   onHide() {
@@ -45,6 +44,16 @@ export default {
 
   onPullDownRefresh() {
     console.log('onPullDownRefresh')
+    this.$nextTick(() => {
+      this.refershData(() => {
+        Taro.stopPullDownRefresh();
+      });
+    });
+  },
+
+  methods: {
+    refershData(callback) {
+      this.debugMode && console.log('this.refershData()')
       Taro.showNavigationBarLoading();
       clearInterval(this.timeInterval);
       this.isShow = 'none'
@@ -67,14 +76,19 @@ export default {
           id: this.userInfo.id,
         },
         success: function (d) {
+          that.debugMode && console.log("begin success")
           Taro.hideLoading()
           let result = d.data;
           if (result.success) {
-          console.log(result.data);
+            console.log("result.data", result.data);
             that.userText = `${that.userInfo.id} | ${that.userInfo.realname}`
             that.showText = result.data.infoText
             that.showTextColor = result.data.infoTextColor
-          that.drawCode(`https://epp.cxyxiaomo.com/access/validCode?id=${result.data.id}&t=${Date.now()}`, result.data.qrcodeColor)
+            that.$nextTick(() => {
+              let t = Date.now();
+              let chksum = md5(JSON.stringify({ id: that.userInfo.id, t: t }));
+              that.drawCode(`https://epp.cxyxiaomo.com/access/validCode?id=${that.userInfo.id}&t=${t}&chksum=${chksum}`, result.data.qrcodeColor)
+            });
           } else {
             Taro.showToast({
               title: result.msg,
@@ -83,42 +97,59 @@ export default {
             })
           }
           that.isShow = ''
+          that.debugMode && console.log("end success")
         },
         fail: function () {
+          that.debugMode && console.log("begin fail")
           Taro.hideLoading()
           Taro.showToast({
             title: "请求失败",
             icon: 'error',
             duration: 2000
           })
+          that.debugMode && console.log("end fail")
         },
         complete: function () {
-        Taro.stopPullDownRefresh();
+          that.debugMode && console.log("begin complete")
+          if (typeof (callback) === "function")
+            callback();
           Taro.hideNavigationBarLoading();
+          that.debugMode && console.log("end complete")
         }
       })
     },
-  methods: {
     drawCode(text = 'https://www.baidu.com/', foreground = 'red') {
+      this.debugMode && console.log("drawCode was called.")
+      var that = this;
       const query = Taro.createSelectorQuery()
       query.select('#myQrcode')
         .fields({
           node: true,
           size: true
         })
-        .exec((res) => {
+        .exec(async (res) => {
+          that.debugMode && console.log("before drawQrcode")
           var canvas = res[0].node
-
+          if (!canvas) {
+            Taro.showToast({
+              title: "canvas获取失败",
+              icon: 'error',
+              duration: 2000
+            })
+            return
+          }
+          that.debugMode && console.log("canvas:", canvas, "res:", res)
           // 调用方法drawQrcode生成二维码
-          drawQrcode(Taro, {
+          await drawQrcode(Taro, {
             canvas: canvas,
             canvasId: 'myQrcode',
-            width: 260,
+            width: 150,
             padding: 0,
             background: '#ffffff',
             foreground: foreground,
             text: text,
           })
+          that.debugMode && console.log("end drawQrcode")
 
           this.updateTime();
           this.timeInterval = setInterval(this.updateTime, 1000);

miniprogram/src/utils/qrcode/index.js

@@ -25,16 +25,15 @@ function utf16to8(str) {
   return out
 }
 
-function drawQrcode(Taro, options, debug) {
+function drawQrcode(Taro, options) {
   options = options || {}
   options = extend(true, {
     canvasId: 'myQrcode',
-    // canvas: canvas,
+    canvas: null,
     text: '爱一个人就要勇敢说出来',
     width: 260,
-    height: 260,
     padding: 20,
-    // paddingColor: '#ffffff', // 默认与background一致
+    paddingColor: null, // 默认与background一致
     typeNumber: -1,
     correctLevel: QRErrorCorrectLevel.H,
     background: '#ffffff',
@@ -54,24 +53,7 @@ function drawQrcode(Taro, options, debug) {
 
   if (!options.paddingColor) options.paddingColor = options.background
 
-  if (debug) {
+  // createCanvas
-    var qrcode = new QRCode(options.typeNumber, options.correctLevel)
-    qrcode.addData(utf16to8(options.text))
-    qrcode.make()
-
-    return new Promise(function (resolve, reject) {
-      resolve(qrcode);
-    })
-
-  } else {
-
-    return new Promise(function (resolve, reject) {
-      return resolve(createCanvas(Taro));
-    })
-
-  }
-
-  function createCanvas(Taro) {
   // create the qrcode itself
   var qrcode = new QRCode(options.typeNumber, options.correctLevel)
   qrcode.addData(utf16to8(options.text))
@@ -83,15 +65,17 @@ function drawQrcode(Taro, options, debug) {
   canvas.width = options.width * dpr
   canvas.height = options.width * dpr
   const width = canvas.width
+  console.log(`canvas, ctx, width, dpr, qrcode, options`, canvas, ctx, width, dpr, qrcode, options)
 
-    // 背景色
+  // 填充背景色
   ctx.fillStyle = options.paddingColor
+  // ctx.clearRect(0, 0, width + options.padding * 2, width + options.padding * 2) // 绘制前清空画布
   ctx.fillRect(0, 0, width + options.padding * 2, width + options.padding * 2);
 
   var tileW = (width - options.padding * 2) / qrcode.getModuleCount()
   var tileH = (width - options.padding * 2) / qrcode.getModuleCount()
 
-    // 开始画二维码
+  // 绘制二维码
   for (var row = 0; row < qrcode.getModuleCount(); row++) {
     for (var col = 0; col < qrcode.getModuleCount(); col++) {
       ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background
@@ -101,6 +85,7 @@ function drawQrcode(Taro, options, debug) {
     }
   }
 
+  // 绘制中心图标
   if (options.image.imageResource) {
     const imgW = options.image.width * dpr
     const imgH = options.image.height * dpr
@@ -135,7 +120,6 @@ function drawQrcode(Taro, options, debug) {
   }
 
   return ctx
-  }
 }
 
 export default drawQrcode