微信公众号H5页面调用微信扫一扫

前言

最近写了一个简单的H5项目，主要功能是进行扫码验证产品，点击扫码页面的扫码图标按钮，调起微信扫一扫功能，对产品上的二维码进行扫码，成功之后跳转产品合规界面。

具体实现

实现页面布局(这里只展示了扫码按钮)，并引入微信JS-SDK的库文件(由于调用微信扫一扫，需要使用微信JS-SDK)

html 复制代码

<div class="search-btn">
    <img src="./image/code.png" alt="">
    <span>扫码查验</span>
</div>
  
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

微信JS-SDK使用需要绑定域名。因此登录微信公众号平台，进入"公众号设置"的"功能设置"里填写"JS接口安全域名"。

注：域名需要备案

通过wx.config接口注入权限验证配置，从服务端接口获取appId、随机数、时间戳、签名所需的配置参数

wx.config的相应参数说明：

debug: true 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。(功能实现之后，需要改成false,关闭调试模式)

appId: '' 必填，公众号的唯一标识

timestamp: '' 必填，生成签名的时间戳

nonceStr: '' 必填，生成签名的随机串

signature: '' 必填，签名

jsApiList: $'scanQRCode'$ // 必填，需要使用的JS接口列表
注：

a. 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。

b. config信息验证后会执行 wx.ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 wx.ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 wx.ready 函数中。

注：微信JS-SDK具体使用步骤和接口说明的官方文档

js 复制代码

$.ajax({
      url: 'xxx',
      type: "get",
      success: function (res) {
        let data = JSON.parse(res)
        wx.config({
          debug: true, 
          appId: 'xx', 
          timestamp: data.timestamp, 
          nonceStr: data.noncestr, 
          signature: data.sign,
          jsApiList: ['scanQRCode']  
        });

        wx.ready(function () {
          //判断当前客户端版本是否支持指定JS接口
          wx.checkJsApi({
            jsApiList: ['scanQRCode'],
            //配置完成，扫码前准备完成
            success: function (res) {}
          });

          //点击按钮,调用微信扫一扫功能,扫描二维码
          document.querySelector('.search-btn').addEventListener('click', function () {

            wx.scanQRCode({
              needResult: 1,  // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ['qrCode'],  // 只能扫描二维码
              success: function (res) {
                var result = res.resultStr;  // 扫码结果
                window.location.href = "http://xxx.com/"+ result ;    
              },
              // 失败处理
              fail: function (error) {
                
              }
            });
          });
        });

      },
      error: function (err) {}
    })

实现以上代码后，页面在调试模式下会出现下面图片中的错误提示：配置中签名错误

后面经后端处理，直接把页面弄到php文件中了，所有配置参数都由php变量获取。

处理扫描结果，在扫码成功函数中跳转到指定页面（产品上面展示的二维码就是一个页面，直接使用域名拼接就可以实现跳转到该页面了）