微信小程序绘制二维码

backend-mock/index.js

@@ -23,7 +23,7 @@ server.on("request", (req, res) => {
                 userInfo: {
                     "id": 1,
                     "username": "root",
-                    "realname": "管理员",
+                    "realname": "真实姓名",
                     "idNumber": null,
                     "phoneNumber": null,
                     "role": 1,

miniprogram/src/pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <view style="background-color: #F6F6F6;height: 100%;">
+  <view>
-    <image src="../../image/home.jpg" style="width: 100%;height: 130px;"></image>
+    <image src="../../image/home.jpg" style="width: 100%;height: 145px;"></image>
     <view style="display: block; padding-left: 30px; padding-top: 12px;">
       <text>欢迎你，{{ displayUsername }}！</text>
     </view>
@@ -94,9 +94,8 @@
         </view>
       </view>
     </view>
-  </view>
-
     <DebugComp />
+  </view>
 </template>
 
 <script>

miniprogram/src/pages/residents/code.config.js

@@ -1,4 +1,3 @@
 export default definePageConfig({
   navigationBarTitleText: '身份码'
-  })
+})
-  

miniprogram/src/pages/residents/code.css

@@ -2,7 +2,8 @@
   font-weight: bold;
 }
 
-#qrcode {
+#myQrcode {
-  width: 70vw;
+  display: block;
-  height: 70vw;
+  margin: 0 auto;
+  /* border: 20px solid red; */
 }

miniprogram/src/pages/residents/code.vue

@@ -1,20 +1,88 @@
 <template>
-  <view style="background-color: #F6F6F6;height: 100%;">
+  <view>
-    <image src="../../image/home.jpg" style="width: 100%;height: 130px;"></image>
+    <view>
+      <image src="../../image/home.jpg" style="width: 100%;height: 150px;"></image>
     </view>
     <view style="text-align: center; margin-top: 100px;">
-    <view><text>{{ stuId }} {{ name }}</text></view>
+      <view><text>{{ id }} | {{ name }}</text></view>
-    <image id="qrcode" src="{{imgUrl}}"></image>
+      <canvas type="2d" style="width: 70vw; height: 70vw;" id="myQrcode"></canvas>
       <view><text class="time-text">{{ time }}</text></view>
     </view>
+  </view>
 </template>
 
 <script>
+import Taro from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
+import drawQrcode from '../../utils/qrcode/index'
+
 import './code.css'
 
 export default {
   data() {
     return {
+      userInfo: null,
+      id: 'id',
+      name: '姓名',
+      time: 'time',
+    }
+  },
+  mounted() {
+    eventCenter.once(getCurrentInstance().router.onShow, () => {
+      console.log('onShow')
+      this.userInfo = Taro.getStorageSync("userInfo");
+      if (this.userInfo) {
+        console.log(this.userInfo)
+        this.id = this.userInfo.id
+        this.name = this.userInfo.realname
+        this.drawCode()
+      } else {
+        Taro.redirectTo({
+          url: '/pages/index/login'
+        })
+      }
+    })
+  },
+  methods: {
+    drawCode() {
+      const query = wx.createSelectorQuery()
+      query.select('#myQrcode')
+        .fields({
+          node: true,
+          size: true
+        })
+        .exec((res) => {
+          var canvas = res[0].node
+
+          // 调用方法drawQrcode生成二维码
+          drawQrcode({
+            canvas: canvas,
+            canvasId: 'myQrcode',
+            width: 260,
+            padding: 30,
+            background: '#ffffff',
+            foreground: 'red', // '#000000',
+            text: '大王顶真帅',
+          })
+
+          // 获取临时路径（得到之后，想干嘛就干嘛了）
+          wx.canvasToTempFilePath({
+            canvasId: 'myQrcode',
+            canvas: canvas,
+            x: 0,
+            y: 0,
+            width: 260,
+            height: 260,
+            destWidth: 260,
+            destHeight: 260,
+            success(res) {
+              console.log('二维码临时路径：', res.tempFilePath)
+            },
+            fail(res) {
+              console.error(res)
+            }
+          })
+        })
     }
   }
 }

miniprogram/src/utils/qrcode/index.js

@@ -0,0 +1,141 @@
+import extend from 'extend'
+import {
+  QRCode,
+  QRErrorCorrectLevel
+} from './qrcode'
+
+// support Chinese
+function utf16to8(str) {
+  var out, i, len, c
+  out = ''
+  len = str.length
+  for (i = 0; i < len; i++) {
+    c = str.charCodeAt(i)
+    if ((c >= 0x0001) && (c <= 0x007F)) {
+      out += str.charAt(i)
+    } else if (c > 0x07FF) {
+      out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F))
+      out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F))
+      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F))
+    } else {
+      out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F))
+      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F))
+    }
+  }
+  return out
+}
+
+function drawQrcode(options, debug) {
+  options = options || {}
+  options = extend(true, {
+    canvasId: 'myQrcode',
+    // canvas: canvas,
+    text: '爱一个人就要勇敢说出来',
+    width: 260,
+    height: 260,
+    padding: 20,
+    // paddingColor: '#ffffff', // 默认与background一致
+    typeNumber: -1,
+    correctLevel: QRErrorCorrectLevel.H,
+    background: '#ffffff',
+    foreground: '#000000',
+    image: {
+      imageResource: '',
+      width: 80,
+      height: 80,
+      round: true
+    }
+  }, options)
+
+  if (!options.canvasId && !options.canvas) {
+    console.warn('please set canvasId or canvas!')
+    return
+  }
+
+  if (!options.paddingColor) options.paddingColor = options.background
+
+  if (debug) {
+    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());
+    })
+
+  }
+
+  function createCanvas() {
+    // create the qrcode itself
+    var qrcode = new QRCode(options.typeNumber, options.correctLevel)
+    qrcode.addData(utf16to8(options.text))
+    qrcode.make()
+
+    const dpr = wx ? wx.getSystemInfoSync().pixelRatio : 1 // 兼容支付宝小程序
+    var canvas = options.canvas
+    const ctx = canvas.getContext('2d')
+    canvas.width = options.width * dpr
+    canvas.height = options.width * dpr
+    const width = canvas.width
+
+    // 背景色
+    ctx.fillStyle = options.paddingColor
+    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
+        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
+  }
+}
+
+export default drawQrcode

miniprogram/src/utils/qrcode/refer.txt

@@ -0,0 +1 @@
+https://github.com/DoctorWei/weapp-qrcode-canvas-2d