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

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

  • 原理:在本页跳转到第三方网站http://sao315.com/w/api/saoyisao,扫完后再跳转回到本页面,跳转回来的页面会带有二维码的路径参数。
  • 例如:如果本页面是localUrl,可以用a元素跳转(href为http://sao315.com/w/api/saoyisao?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 = `http://sao315.com/w/api/saoyisao?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')
      }
},

你可能感兴趣的:(最简单的js调用微信扫一扫功能)