VUE中最简单的js调用微信扫一扫功能

之前以为扫码很复杂，后面找到了一个最简单的扫码功能，但是H5页面只能用微信打开，其他浏览器不支持。

• 原理：在本页跳转到第三方网站https://www.996315.com/api/scan/
  ，扫完后再跳转回到本页面，跳转回来的页面会带有二维码的路径参数。
• 例如：如果本页面是localUrl，可以用a元素跳转（href为https://www.996315.com/api/scan/?redirect_uri=本页面地址），也可以用location.href跳转（我用的就是这个），扫完后跳转回来的页面就是localUrl?qrresult=xxxx。路径参数qrresult，值xxxx就是二维码字符串。
  过程很简单，2步就可以了。
  步骤一：扫一扫
  我项目中用的是vue，点击扫一扫时调用scanCode方法，其中redirect_uri参数是自己本页面地址（去掉路径参数的），以确保扫码回来后准确跳到本页面（不传redirect_uri有可能跳错页面）。

is_weixn() {
      return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
    },
scanCode() {
      if (!this.is_weixn()) {
        alert('请用微信打开页面，扫码功能仅支持微信页面')
        return
      }
      sessionStorage.setItem('isInSerach', '1')
      let hrefStr = location.href
      let href = hrefStr
      if (hrefStr.indexOf('?') !== -1) {
        href = hrefStr.split('?')[0]
      }
      location.href = `https://www.996315.com/api/scan/?redirect_uri=${encodeURIComponent(href)}`
},

步骤二：获取扫到的二维码数据
我这里直接在mounted里调用initData方法，用获取vue-router的路径参数qrresult，其中code就是获取到的二维码。如果不用vue，也可以在页面刚加载完的时候，用原生的location获取本页面地址及和路径参数qrresult。

initData() {
      let isInSerach = sessionStorage.getItem('isInSerach')
      if (isInSerach) {
        let code = this.$route.query.qrresult
        if (code) {
          this.form.serialNumber = code
          this.searchInfo('ruleForm')
        }
        else {
          //没有扫码成功
          alert('二维码内容格式不对，请扫描正确的二维码')
        }
        sessionStorage.removeItem('isInSerach')
      }
},