vue公衆號調用微信掃一掃

npm install weixin-js-sdk --save

<template>
  <div class="con">
    <header class="tit">請掃描需要識別的設備二維碼</header>
    <img id="scan" @click="onscan" :src="scan" style="margin: 2rem auto;display: block;" alt="">
  </div>
</template>

<script>
//  import qs from 'qs'
  import wx from 'weixin-js-sdk'
  //  監聽安卓返回鍵退出公衆號
    window.history.pushState(null, null, "#");
    window.addEventListener('popstate', function(e) {
      WeixinJSBridge.call('closeWindow');
    }, false);
  export default {
    name: 'login',
    data() {
      return {
        scan: require('../assets/scan.png'),
      }
    },
    mounted() {
      this.getSign()
    },
    methods: {
      getSign() {
        let url = location.href.split('#')[0]
        this.$post('wxMess/getSign', {
          url: url,
        })
          .then((r) => {
            console.log(r);
           let data=r.data
//            alert(data.timestamp)
            wx.config({
              debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
              appId: 'wxe5b999b346138cc6',
              timestamp: data.timestamp,
              nonceStr: data.nonceStr,
              signature: data.signature,
              jsApiList: ['checkJsApi', 'scanQRCode']
            });
            wx.ready(() => {
              console.log('配置成功')
            })
            wx.error(function (res) {
              console.log(res)
            });
          })
      },
      onscan() {
        var that = this
        wx.ready(function () {
          wx.checkJsApi({
            jsApiList: ['scanQRCode'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
            success: function (res) {
              var result = res.resultStr;
              console.log(result)
              // 以鍵值對的形式返回，可用的api值true，不可用爲false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
          });
          wx.scanQRCode({
            needResult: 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
            scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
            success: function (res) {
              var result = res.resultStr;
              console.log('結果:' + res.resultStr);
              that.$router.push({
                path: '/detail',
                query: {
                  resultStr: result
                }
              })
            }
          });
        })
        wx.error(function (res) {
          console.log(res)
          // console.log('失敗')
          // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .con {
    width: 100%;
    height: 100%;
  }

  #scan {
    /*background: url(js/scan.png) no-repeat;*/
    /*background-size: 100% 100%;*/
    margin: 4rem auto;
    width: 2rem;
    height: 2rem;
  }

  .tit {
    width: 100%;
    height: 0.8rem;
    background: #02A7F0;
    color: #fff;
    text-indent: 0.2rem;
    font-size: 0.32rem;
    line-height: .8rem;
  }
</style>