二维码

ybf_wx/package.json

@@ -15,6 +15,7 @@
     "core-js": "^3.4.4",
     "js-md5": "^0.7.3",
     "jssdk": "^0.0.1",
+    "qrcode": "^1.4.4",
     "vant": "^2.3.3",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",

ybf_wx/src/router/index.js

@@ -122,6 +122,11 @@ const routes = [
     name: 'VoucherInfo',
     component: () => import('@/views/voucherInfo/index')
   },
+  {
+    path: '/qrCode',
+    name: 'qrCode',
+    component: () => import('@/views/qrCode/index')
+  },
   // {
   //   path: '/about',
   //   name: 'about',

ybf_wx/src/views/qrCode/index.vue

+<template>
+    <div class="qr-code">
+        <canvas id="QRCode_header"></canvas>
+    </div>
+</template>
+
+<script>
+  import QRCode from 'qrcode'
+  export default {
+    name: 'index',
+    data(){
+      return{
+        QRCodeMsg:''
+      }
+    },
+    mounted(){
+      this.creatQrCode()
+    },
+    methods:{
+      creatQrCode(){
+        let opts = {
+          errorCorrectionLevel: "H",//容错级别
+          type: "image/png",//生成的二维码类型
+          quality: 0.3,//二维码质量
+          margin: 12,//二维码留白边距
+          width: 200,//宽
+          height: 180,//高
+          color: {
+            dark: "#333333",//前景色
+            light: "#fff"//背景色
+          }
+        };
+        // this.QRCodeMsg = window.location.href; //生成的二维码为URL地址js
+        // this.QRCodeMsg = window.location.href; //生成的二维码为URL地址js
+        alert(`${window.location.origin}/voucherInfo`)
+        this.QRCodeMsg = `${window.location.origin}/voucherInfo`; //生成的二维码为URL地址js
+        let msg = document.getElementById("QRCode_header");
+        // 将获取到的数据（val）画到msg（canvas）上
+        QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
+          console.log(error)
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+</style>

ybf_wx/src/views/voucherInfo/index.vue

 <template>
-  <div class="main">
-    <div>Hola World.</div>
-    <img src="../../assets/qrcode.jpeg" alt="Please Scan QRCode." />
-    <button @click="redirect">redirect</button>
+  <div>
+    <span>正在跳转中...</span>
   </div>
 </template>
 
 <script>
 const zlog = console.log.bind(console);
-
 export default {
   name: "voucherInfo",
   data() {
-    return {};
+    return {
+      QRCodeMsg:''
+    };
   },
   created() {
-    alert("--->voucherInfo: Created.");
+    // alert("--->voucherInfo: Created.");
     // wx.miniProgram.navigateTo({url: '/path/to/page'})
     // wx.miniProgram.navigateTo({url: '/pages/coupon/detail/detailid=100000338&actionid=97'})
   },
-  mounted() {},
+  mounted() {
+    wx.miniProgram.navigateTo({url: '/pages/coupon/detail/detailid=100000338&actionid=97'})
+
+  },
   methods: {
     redirect() {
       //  wx.miniProgram.navigateTo({url: '/pages/coupon/detail/detailid=100000338&actionid=97'})
@@ -50,6 +52,10 @@ export default {
 </script>
 
 <style scoped>
+  #qrcode{
+    width: 100px;
+    height: 100px;
+  }
 .main {
   display: flex;
   flex-direction: column;