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

前言

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

具体实现

  1. 实现页面布局(这里只展示了扫码按钮),并引入微信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>
  1. 微信JS-SDK使用需要绑定域名。因此登录微信公众号平台,进入"公众号设置"的"功能设置"里填写"JS接口安全域名"。

注:域名需要备案

  1. 通过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变量获取。

  1. 处理扫描结果,在扫码成功函数中跳转到指定页面 (产品上面展示的二维码就是一个页面,直接使用域名拼接就可以实现跳转到该页面了)
相关推荐
晚星star9 分钟前
在 Web 前端实现流式 TTS 播放
前端·vue.js
huabuyu9 分钟前
基于 Taro 的 Markdown AST 渲染器实现
前端
薄雾晚晴10 分钟前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
本末倒置18310 分钟前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
狗头大军之江苏分军31 分钟前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github
秃顶老男孩.35 分钟前
web中的循环遍历
开发语言·前端·javascript
龙在天1 小时前
vue 请求接口快慢 覆盖 解决方案
前端
跟橙姐学代码1 小时前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_1 小时前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou1371 小时前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js