扫码

src/api/wechat.js

@@ -68,3 +68,13 @@ export function checkWechatAuth(openid) {
     hideloading: true
   })
 }
+
+// 微信获取signature
+export function getSignature(data) {
+  return request({
+    url: api + 'wechat-get-signature',
+    method: 'GET',
+    params: data,
+    hideloading: true
+  })
+}

src/components/weChatQrcode.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="weChatQrCode" v-if="show"></div>
+</template>
+
+<script>
+import wx from 'weixin-js-sdk'
+import { getSignature } from '@/api/wechat'
+export default {
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    open() {
+      this.show = true
+      this.onScan()
+    },
+    onScan() {
+      this.getCofig()
+      const that = this
+      wx.ready(function() {
+        console.log('测试')
+        wx.checkJsApi({
+          // 需要使用的JS接口列表，在这里只需要用到scanQRCode
+          jsApiList: ['scanQRCode'],
+          success: function(res1) {
+            if (res1.checkResult.scanQRCode) {
+              // 当scanQRCode可使用时
+              wx.scanQRCode({
+                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
+                success: function(res2) {
+                  const result = res2.resultStr
+                  that.$emit('success', result)
+                  // console.log(res2.resultStr, '扫描的结果~')
+                  // window.location.href = result
+                },
+                error: function(response) {
+                  this.close()
+                  this.$nextTick(() => {
+                    that.$toast(response)
+                  })
+                }
+              })
+            }
+          }
+        })
+      })
+    },
+    async getCofig() {
+      const that = this
+      const res = await getSignature({ url: encodeURIComponent(window.location.href.split('#')[0]) })
+      console.log('res', res)
+      that.wxConfig(res.data.appId, res.data.params.timestamp, res.data.params.nonceStr, res.data.signature)
+    },
+    // wx.config的配置
+    wxConfig(appId, timestamp, nonceStr, signature) {
+      const that = this
+
+      const params = {
+        debug: false, // 开启调试模式,
+        appId: appId, // 必填，企业号的唯一标识
+        timestamp: timestamp, // 必填，生成签名的时间戳
+        nonceStr: nonceStr, // 必填，生成签名的随机串
+        signature: signature, // 必填，签名
+        jsApiList: ['scanQRCode', 'checkJsApi'] // 必填，需要使用的JS接口列表
+      }
+      wx.config(params)
+      wx.error(function(res) {
+        that.close()
+        that.$nextTick(() => {
+          alert('出错了👉' + res.errMsg) // wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
+        })
+      })
+    },
+    close() {
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.weChatQrCode {
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+}
+</style>

src/views/testDetail/components/punchQRcode.vue

@@ -26,6 +26,7 @@
     <!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess" @error="sweepError" /> -->
     <!-- <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess" @error="sweepError" /> -->
     <qrScanner ref="qrScannerRef" @success="sweepSuccess" />
+    <weChatQrcode ref="weChatQrcodeRef" @success="sweepSuccess" />
   </div>
 </template>
 
@@ -33,6 +34,7 @@
 // import sweepPage from '@/components/sweepPage.vue'
 // import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue'
 import qrScanner from '@/components/qrScanner.vue'
+import weChatQrcode from '@/components/weChatQrcode.vue'
 export default {
   props: {
     tindex: {
@@ -53,7 +55,8 @@ export default {
   components: {
     // sweepPage,
     // sweepPage_html5_qrcode
-    qrScanner
+    qrScanner,
+    weChatQrcode
   },
   data() {
     return {
@@ -80,14 +83,21 @@ export default {
       return JSON.parse(JSON.stringify(s))
     },
     sweepBtn() {
-      // this.$refs.sweepPageRef.open()
-      this.$refs.qrScannerRef.open()
+      if (this.isWechatBrowser) {
+        this.$refs.weChatQrcodeRef.open()
+      } else {
+        this.$refs.qrScannerRef.open()
+      }
     },
     sweepSuccess(result) {
       const _valueAndTime = this.extractValueAndTime(result)
 
       if (!_valueAndTime) {
-        this.$refs.qrScannerRef.close()
+        if (this.isWechatBrowser) {
+          this.$refs.weChatQrcodeRef.close()
+        } else {
+          this.$refs.qrScannerRef.close()
+        }
         return this.$toast.fail('扫码的格式不正确')
       }
 
@@ -108,7 +118,11 @@ export default {
       }
       console.log(_valueAndTime)
       // this.checkJson.answer2 = result;
-      this.$refs.qrScannerRef.close()
+      if (this.isWechatBrowser) {
+        this.$refs.weChatQrcodeRef.close()
+      } else {
+        this.$refs.qrScannerRef.close()
+      }
     },
     sweepError(error) {
       // this.$message.error(error)
@@ -167,6 +181,11 @@ export default {
         console.error('错误:', error.message)
         return null
       }
+    },
+    // 检查是否在微信浏览器中
+    isWechatBrowser() {
+      const ua = navigator.userAgent.toLowerCase()
+      return ua.indexOf('micromessenger') !== -1
     }
   },
   mounted() {

src/views/testDetail/components/sweep.vue

@@ -26,6 +26,7 @@
     <!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess"  @error="sweepError"/> -->
     <!-- <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess"  @error="sweepError"/> -->
     <qrScanner ref="qrScannerRef" @success="sweepSuccess" />
+    <weChatQrcode ref="weChatQrcodeRef" @success="sweepSuccess" />
   </div>
 </template>
 
@@ -33,6 +34,7 @@
 // import sweepPage from '@/components/sweepPage.vue';
 // import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue';
 import qrScanner from '@/components/qrScanner.vue'
+import weChatQrcode from '@/components/weChatQrcode.vue'
 export default {
   props: {
     tindex: {
@@ -53,7 +55,8 @@ export default {
   components: {
     // sweepPage
     // sweepPage_html5_qrcode
-    qrScanner
+    qrScanner,
+    weChatQrcode
   },
   data() {
     return {
@@ -80,11 +83,19 @@ export default {
       return JSON.parse(JSON.stringify(s))
     },
     sweepBtn() {
-      this.$refs.qrScannerRef.open()
+      if (this.isWechatBrowser) {
+        this.$refs.weChatQrcodeRef.open()
+      } else {
+        this.$refs.qrScannerRef.open()
+      }
     },
     sweepSuccess(result) {
       this.checkJson.answer2 = result
-      this.$refs.qrScannerRef.close()
+      if (this.isWechatBrowser) {
+        this.$refs.weChatQrcodeRef.close()
+      } else {
+        this.$refs.qrScannerRef.close()
+      }
       // this.$toast(result)
       this.$forceUpdate()
     },
@@ -105,6 +116,11 @@ export default {
       //   }else{
       //     this.$toast.fail(error.name)
       //   }
+    },
+    // 检查是否在微信浏览器中
+    isWechatBrowser() {
+      const ua = navigator.userAgent.toLowerCase()
+      return ua.indexOf('micromessenger') !== -1
     }
   },
   mounted() {