vue調用微信掃一掃功能

因爲寫這個掃一掃百度了很久，最終終於寫完了，把自己好不容易寫出來的分享給大家，希望對大家有用！

1、先引入js文件，然後在使用的頁面導入

npm install weixin-js-sdk --save

2、配置域名（需要的信息有這麼多，一般由後端給）

切記：域名一定要備案，要不會有一堆問題

3、 具體代碼如下：（點擊另一個頁面的掃一掃按鈕直接跳到這個vue頁面）

scan.vue文件代碼如下：

<template>
  <div class="scanCode_info">
    <div class="score_header" v-if="ticketNum !== ''">
      <div class="return__icon" @click="returnBack">
        <i class="iconfont icon_lulufanhui"></i>
      </div>
      <div class="title">掃碼結果</div>
    </div>
    <div class="scanCode_second">{{ticketNum}}</div>
  </div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
  data () {
    return {
      ticketNum: '',
      configContent: []
    }
  },
  mounted () { // 剛進來頁面就檢查wx配置
    this.getSign()
  },
  methods: {
    returnBack () {
      this.$router.push('/home')
    },
    getSign () {
      const divI = document.getElementsByClassName('scanCode_info')[0] // 後續修改的樣式，可以不用
      divI.style.backgroundColor = '#9c9c9c'
      this.$vux.loading.show({
        text: '加載中...'
      })
      let url = encodeURIComponent(window.location.href.split('#')[0])
      // alert('url：' + url)
      this.$axios.get('http://www.com?url=' + url).then(res => { // url爲例子，根據自己的項目來
        if (res.data.code === 0) {
          this.configContent = res.data.data  // 接口返回的數據，用於下面的配置
          this.signWX()
        }
      })
    },
    signWX () {
      let _this = this
      wx.config({
        debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
        appId: this.configContent.appId, // 必填，公衆號的唯一標識
        timestamp: this.configContent.timestamp, // 必填，生成簽名的時間戳
        nonceStr: this.configContent.nonceStr, // 必填，生成簽名的隨機串
        signature: this.configContent.signature, // 必填，簽名
        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
      })
      wx.ready(function () {
        const divI = document.getElementsByClassName('scanCode_info')[0]
        divI.style.backgroundColor = ''
        _this.$vux.loading.hide()
        wx.scanQRCode({
          needResult: 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
          scanType: ['qrCode', 'barCode'], // 可以指定掃二維碼還是一維碼，默認二者都有
          success: function (res) {
            _this.ticketNum = res.resultStr // 當needResult 爲 1 時，掃碼返回的結果
          }
        })
        // alert('成功')
        // wx.checkJsApi({
        //   jsApiList: ['scanQRCode'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
        //   success: function (res) {
        //     // 以鍵值對的形式返回，可用的api值true，不可用爲false
        //     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //     console.log('成功：', res)
        //     alert('成功' + res)
        //   }
        // })
      })
      wx.error(function (res) {
        const divI = document.getElementsByClassName('scanCode_info')[0]
        divI.style.backgroundColor = ''
        _this.$vux.loading.hide()
        console.log('微信js-sdk 配置失敗000' + res.errMsg)
        alert('微信js-sdk 配置失敗000' + res.errMsg)
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .scanCode_info {
    height: 100%;
    position: relative;
  }
  .score_header {
    font-size: 16px;
    width: 100%;
    background-color: #42b983;
    color: #fff;
    line-height: 40px;
    flex: none;
    z-index: 1;
  }
  .return__icon{
    margin-left: 20px;
    width: 20px;
    height: 20px;
    position: absolute;
  }
  .iconfont {
    margin-top: 10px;
    font-size: 20px;
  }
  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .scanCode_second {
    margin-top: 18%;
    text-align: center;
    color: #3c3c3c;
  }
</style>

 遇到的問題：config of undefined（大概是這樣的）

解決方法：在index.html頁面引入的下面這個js文件刪除了就可以了

 

有哪裏寫的不對的，歡迎指正~