进出码优化

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,80 +44,112 @@ export default {
 
   onPullDownRefresh() {
     console.log('onPullDownRefresh')
-    Taro.showNavigationBarLoading();
+    this.$nextTick(() => {
-    clearInterval(this.timeInterval);
+      this.refershData(() => {
-    this.isShow = 'none'
+        Taro.stopPullDownRefresh();
-    this.time = ''
+      });
-    this.userInfo = Taro.getStorageSync("userInfo");
+    });
-    if (!this.userInfo) {
+  },
-      Taro.redirectTo({
+
-        url: '/pages/index/login'
+  methods: {
-      })
+    refershData(callback) {
-    }
+      this.debugMode && console.log('this.refershData()')
-    Taro.showLoading({ title: '加载中' })
+      Taro.showNavigationBarLoading();
-    var that = this;
+      clearInterval(this.timeInterval);
-    Taro.request({
+      this.isShow = 'none'
-      url: `${this.baseUrl}/access/getCodeInfo`,
+      this.time = ''
-      method: "POST",
+      this.userInfo = Taro.getStorageSync("userInfo");
-      header: {
+      if (!this.userInfo) {
-        "Content-Type": "application/x-www-form-urlencoded" //用于post
+        Taro.redirectTo({
-      },
+          url: '/pages/index/login'
-      data: {
+        })
-        id: this.userInfo.id,
+      }
-      },
+      Taro.showLoading({ title: '加载中' })
-      success: function (d) {
+      var that = this;
-        Taro.hideLoading()
+      Taro.request({
-        let result = d.data;
+        url: `${this.baseUrl}/access/getCodeInfo`,
-        if (result.success) {
+        method: "POST",
-          console.log(result.data);
+        header: {
-          that.userText = `${that.userInfo.id} | ${that.userInfo.realname}`
+          "Content-Type": "application/x-www-form-urlencoded" //用于post
-          that.showText = result.data.infoText
+        },
-          that.showTextColor = result.data.infoTextColor
+        data: {
-          that.drawCode(`https://epp.cxyxiaomo.com/access/validCode?id=${result.data.id}&t=${Date.now()}`, result.data.qrcodeColor)
+          id: this.userInfo.id,
-        } else {
+        },
+        success: function (d) {
+          that.debugMode && console.log("begin success")
+          Taro.hideLoading()
+          let result = d.data;
+          if (result.success) {
+            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.$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,
+              icon: 'error',
+              duration: 2000
+            })
+          }
+          that.isShow = ''
+          that.debugMode && console.log("end success")
+        },
+        fail: function () {
+          that.debugMode && console.log("begin fail")
+          Taro.hideLoading()
           Taro.showToast({
-            title: result.msg,
+            title: "请求失败",
             icon: 'error',
             duration: 2000
           })
+          that.debugMode && console.log("end fail")
+        },
+        complete: function () {
+          that.debugMode && console.log("begin complete")
+          if (typeof (callback) === "function")
+            callback();
+          Taro.hideNavigationBarLoading();
+          that.debugMode && console.log("end complete")
         }
-        that.isShow = ''
+      })
-      },
+    },
-      fail: function () {
-        Taro.hideLoading()
-        Taro.showToast({
-          title: "请求失败",
-          icon: 'error',
-          duration: 2000
-        })
-      },
-      complete: function () {
-        Taro.stopPullDownRefresh();
-        Taro.hideNavigationBarLoading();
-      }
-    })
-  },
-  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,88 +53,73 @@ function drawQrcode(Taro, options, debug) {
 
   if (!options.paddingColor) options.paddingColor = options.background
 
-  if (debug) {
+  // createCanvas
-    var qrcode = new QRCode(options.typeNumber, options.correctLevel)
+  // create the qrcode itself
-    qrcode.addData(utf16to8(options.text))
+  var qrcode = new QRCode(options.typeNumber, options.correctLevel)
-    qrcode.make()
+  qrcode.addData(utf16to8(options.text))
+  qrcode.make()
 
-    return new Promise(function (resolve, reject) {
+  const dpr = Taro.getSystemInfoSync().pixelRatio
-      resolve(qrcode);
+  var canvas = options.canvas
-    })
+  const ctx = canvas.getContext('2d')
+  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)
 
-  } else {
+  // 填充背景色
+  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);
 
-    return new Promise(function (resolve, reject) {
+  var tileW = (width - options.padding * 2) / qrcode.getModuleCount()
-      return resolve(createCanvas(Taro));
+  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
+      var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW))
+      var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW))
+      ctx.fillRect(Math.round(col * tileW) + options.padding, Math.round(row * tileH) + options.padding, w, h);
+    }
   }
 
-  function createCanvas(Taro) {
+  // 绘制中心图标
-    // create the qrcode itself
+  if (options.image.imageResource) {
-    var qrcode = new QRCode(options.typeNumber, options.correctLevel)
+    const imgW = options.image.width * dpr
-    qrcode.addData(utf16to8(options.text))
+    const imgH = options.image.height * dpr
-    qrcode.make()
+    const dx = (width - imgW) / 2
+    const dy = (width - imgH) / 2
+    if (options.image.round) {
+      // Logo边框
+      const imgW2 = options.image.width * dpr + 30
+      const dx2 = (width - imgW2) / 2
+      const r2 = imgW2 / 2
+      const cx2 = dx2 + r2;
+      ctx.beginPath();
+      ctx.arc(cx2, cx2, r2, 0, 2 * Math.PI);
+      ctx.fillStyle = '#ffffff'
+      ctx.fill();
+      ctx.restore();
 
-    const dpr = Taro.getSystemInfoSync().pixelRatio
+      // 画Logo
-    var canvas = options.canvas
+      const r = imgW / 2
-    const ctx = canvas.getContext('2d')
+      const cx = dx + r;
-    canvas.width = options.width * dpr
+      const cy = dy + r;
-    canvas.height = options.width * dpr
+      ctx.beginPath();
-    const width = canvas.width
+      ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+      ctx.clip();
 
-    // 背景色
+      ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgW);
-    ctx.fillStyle = options.paddingColor
+      ctx.restore();
-    ctx.fillRect(0, 0, width + options.padding * 2, width + options.padding * 2);
+    } else {
-
+      ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgH)
-    var tileW = (width - options.padding * 2) / qrcode.getModuleCount()
+      ctx.restore();
-    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
-        var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW))
-        var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW))
-        ctx.fillRect(Math.round(col * tileW) + options.padding, Math.round(row * tileH) + options.padding, w, h);
-      }
     }
-
-    if (options.image.imageResource) {
-      const imgW = options.image.width * dpr
-      const imgH = options.image.height * dpr
-      const dx = (width - imgW) / 2
-      const dy = (width - imgH) / 2
-      if (options.image.round) {
-        // Logo边框
-        const imgW2 = options.image.width * dpr + 30
-        const dx2 = (width - imgW2) / 2
-        const r2 = imgW2 / 2
-        const cx2 = dx2 + r2;
-        ctx.beginPath();
-        ctx.arc(cx2, cx2, r2, 0, 2 * Math.PI);
-        ctx.fillStyle = '#ffffff'
-        ctx.fill();
-        ctx.restore();
-
-        // 画Logo
-        const r = imgW / 2
-        const cx = dx + r;
-        const cy = dy + r;
-        ctx.beginPath();
-        ctx.arc(cx, cy, r, 0, 2 * Math.PI);
-        ctx.clip();
-
-        ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgW);
-        ctx.restore();
-      } else {
-        ctx.drawImage(options.image.imageResource, dx, dy, imgW, imgH)
-        ctx.restore();
-      }
-    }
-
-    return ctx
   }
+
+  return ctx
 }
 
 export default drawQrcode