如何调用微信和支付宝的扫一扫扫描当前页面

 vue项目

业务场景如下，一个页面有一个二维码，希望调用微信或支付宝的扫一扫扫描当前的页面或二维码；

实际过程中，我弄明白了调用支付宝和微信扫一扫接口的各项步骤。

先说支付宝，

window.AlipayJSBridge.call('scan', {
        type: 'qr' // 扫描类型  qr 二维码  / bar 条形码
      }, function (result) {
        console.log('scanAndPay -> result', JSON.stringify(result), result)
      })

vue是这么调，实现了扫一扫接口调用。

scan是接口名字，type是参数配置，具体参数去查一下。

function 是扫描后回调。

支付宝就是这么简单，不过只能在支付宝浏览器中才有AlipayJSBridge这个对象，所以必须在支付宝中使用。

 

微信，比支付宝开放，但也复杂。

第一步，配置微信公众平台，域名啊，白名单啊，等等

第二步，后台弄好接口，向微信公众平台请求token，检验；不可能随随便便就能掉接口。

第三步，才是前端的代码，如下

  this.$post('', {
        url: window.location.href.split('#')[0]
      }).then(li => {
        console.log('scanAndPay -> li', li)
        // 后端返回的参数
        var timestamp = li.timestamp
        var noncestr = li.nonceStr
        var signature = li.signature
        var appId = li.appId
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名，见附录1
          jsApiList: [
            'scanQRCode'
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(function () {
          console.log('wxsdk配置成功')
          wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              console.log('scanAndPay -> res', res)
              var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
              // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
              console.log(result)
            },
            error: function (res) {
              console.log(res)
            }
          })
        })
      })

道理主要是，把当前的链接发到后台，拿到后台返回的参数；然后wx.config配置；ready里调用scanQRCode方法 ，在回调里处理。

 

然而，问题出在调用扫一扫接口后，触发摄像头，不能扫描当前页面。微信里不是有个长按识别图中二维码的功能吗，这就差不多一个意思，不知道那个识别图中二维码是怎么实现的。

请问大家有什么招，

虽然这个需求改了，但是这个问题该如何解决