微信小程序绘制二维码

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

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

miniprogram/src/pages/residents/code.css

@@ -2,7 +2,8 @@
   font-weight: bold;
 }
 
-#qrcode {
-  width: 70vw;
-  height: 70vw;
+#myQrcode {
+  display: block;
+  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%;">
-    <image src="../../image/home.jpg" style="width: 100%;height: 130px;"></image>
-  </view>
-  <view style="text-align: center; margin-top: 100px;">
-    <view><text>{{ stuId }} {{ name }}</text></view>
-    <image id="qrcode" src="{{imgUrl}}"></image>
-    <view><text class="time-text">{{ time }}</text></view>
+  <view>
+    <view>
+      <image src="../../image/home.jpg" style="width: 100%;height: 150px;"></image>
+    </view>
+    <view style="text-align: center; margin-top: 100px;">
+      <view><text>{{ id }} | {{ name }}</text></view>
+      <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)
+            }
+          })
+        })
     }
   }
 }