H5页面调用扫一扫功能

2023-11-12

想要实现H5页面调用微信扫一扫功能,必须先了解微信JS-SDK接口

企业号开发接口文档地址:https://qydev.weixin.qq.com/wiki/index.php?title=%E9%A6%96%E9%A1%B5

我们来看下使用的大概步骤

1、在页面引入js文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js

2、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

 3、通过ready接口处理成功验证

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

 4、通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

5、接口调用说明

所有接口通过wx对象来调用,有以下通用参数:

(1)success:接口调用成功的回调

(2)fail:接口调用失败的回调

(3)complete:接口调用完成时执行,不论失败或成功都执行

(4)cancel:用户点击取消时执行

(5)trigger: 监听Menu中的按钮点击时触发的方法

6、项目实例:

<html>
    <head>
        <meta charset="utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <script src="../../js/jweixin-1.3.2.js"></script>
    </head>
    <body>
        <button v-on:click="scan()">扫描二维码</button>
        <script>
            ...
            ...
            doconfig() {
                let url = location.href.split('#')[0];
                let params = {
                    url: encodeURIComponent(url),
                    jsApiList: ['scanQRCode']
                }
                this.$http.post(this.baseUrl + '/api/wechat/jssdk', params, {
                    headers: {
                        Authorization: this.token
                    }
                }).then(function (res) {
                    let data = JSON.parse(res.body.message);
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,测试完成后需要关闭。
                        appId: data.appId, // 必填,公众号的唯一标识
                        timestamp: data.timestamp, // 必填,生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填,生成签名的随机串
                        signature: data.signature, // 必填,签名(加密后,下文有实现)
                        jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,开发文档上有所有接口名称,根据需要选用就好。
                    });
                }, function () {
                    console.log('请求失败处理');
                });
            },
            scan() {
                this.doconfig();
                let that = this;
                wx.scanQRCode({
                    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                    scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
                    success: function (res) {
                        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                        that.putscan(res.resultStr)
                    }
                });
            },
        </script>
    </body>
</html>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

H5页面调用扫一扫功能 的相关文章

  • 【android】数据库升级完整解决方案

    作者 飞翔的猫咪 http flyingcat2013 blog 51cto com 7061638 1537074 原创作品 允许转载 转载时请务必以超链接形式标明文章 原始出处 作者信息和本声明 否则将追究法律责任 http flyin

随机推荐

  • 如何计算c++中开数组中占的内存

    如何计算c 中开数组中占的内存 引入 在比赛中一般都会有数组的身影 但是比赛时内存是一定的 若是操作不当 那么正解也会被数组而拖累 可是如何确保自己的数组占的内存的呢 首先要知道你自己开数组是的类型是不一样的内存的 也就是说类型不一样 内存
  • Android Studio操作SQLite数据库简要示例

    Android Studio操作SQLite数据库 主要分三步 1 创建数据库及数据表 2 写数据库表 3 读数据库表 下面用例子进行介绍 我们做一个简单的登记用户名及电话号码并进行显示的例子 首先创建EmptyActivity工程Test
  • [深入研究4G/5G/6G专题-34]: URLLC-5-《中国联通5G URLLC技术白皮书3.0版本》解读-1-业务场景

    目录 第1章 背景与URLLC的发展历程 1 1 URLLC的应用场景 1 2 URLLC的业务特点 第2章 URLLC的业务需求
  • 南京邮电大学操作系统复试

    目录 第 1 章 计算机系统概述 多道运行的特征 第 2 章 进程与线程 2 1 进程与线程 1 进程与程序 2 PID Process ID 进程ID 3 PCB Process Control Block 进程控制快 4 进程的特征 5
  • 【NAS工具箱】Pytorch中的Buffer

    Parameter 模型中的一种可以被反向传播更新的参数 第一种 直接通过成员变量nn Parameter 进行创建 会自动注册到parameter中 def init self super MyModel self init self p
  • 垃圾收集器知识点4:Java中垃圾收集器的实现

    目录 java8垃圾收集器组合一览 serial GC 串行GC 的实现 串行gc日志分析 Minor GC 小型GC Full GC 完全GC Parallel GC 并行GC 的实现 并行GC日志分析 Minor GC 小型GC Ful
  • 第二十九章、containers容器类部件QFrame框架部件详解

    一 概述 容器部件就是可以在部件内放置其他部件的部件 在Qt Designer中可以使用的容器部件有如下 容器中的Frame为一个矩形的框架对象 对应类QFrame QFrame类是PyQt中带框架部件的所有类的基类 如菜单 进度条 Lab
  • SQLServer 数据加密解密:常用的加密解密(一)

    都是基本示例 更多参考官方文档 1 Transact SQL 函数 2 数据库密钥 3 证书 4 非对称密钥 5 对称密钥 sql view plain copy drop table EnryptTest create table Enr
  • Win10 WSL运行docker报错:Cannot connect to the Docker daemon at unix:///var/run/docker.sock.

    我安装的子系统是Ubuntu 1804 安装docker步骤如下 sudo apt update 更新软件源 sudo apt install y docker io 安装docker sudo usermod aG docker leo
  • 3个技术男搞恋爱版ChatGPT,估值10亿美元

    过去几个月 我们见证了GPT从3 5到4 0 从只能做结构化搜索整合到接近人类思维的对话 我们还看到了 GPT逐步掌握画画 写作 剪辑 制表 做 PPT 等技能 最可怕的是AI的迭代速度 简直是一天一个样 这股这股前所未有的技术浪潮 一时间
  • sklearn中的LogisticRegression

    sklearn中的逻辑回归接口如下 sklearn linear model LogisticRegression penalty l2 dual False tol 0 0001 C 1 0 fit intercept True inte
  • [专利与论文-14]:研究员级(正高)高级工程师评审不通过的常见原因(实际案例)

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 专利与论文 14 研究员级 正高 高级工程师评审不通过的常见原因 实际案例 文火冰糖 王文兵 的博客 CSDN博客 作者主页 文火冰糖的硅基
  • 策略模式+工厂模式的使用

    在项目开发过程中 经常会遇到项目代码中充斥着大量的if else 每次增加类型都要整体代码逻辑看一遍才可以修改 如下代码 if wx equals type do else if zfb equals type do else if ban
  • JSONObject 与 JSON 互转

    使用目的 目前数据交互大多以 JSON 字符串为信息传输 主要格式有 age 22 name 李四 age 21 name 张三 最常见的应用场景是前后端对接 第三方平台文档对接 下面展示转换使用 一 引入 jar 此处引入 com ali
  • IMAU鸿蒙北向开发-2023年9月5日学习日志

    1 5种调试方式 1 1 Previewer 在侧边 Previewer 选项卡内可以预览Entry 如果要单独预览组件 可以在给组件加 Preview 装饰器 1 2 Local Emulator 本地模拟 1 3 Remote Emul
  • 测试框架pytest教程(6)钩子函数hook开发pytest插件

    pytest hook 函数也叫钩子函数 pytest 提供了大量的钩子函数 可以在用例的不同生命周期自动调用 比如 在测试用例收集阶段 可利用 hook 函数修改测试用例名称的编码 pytest的hook是基于Python的插件系统实现的
  • mac mini u盘安装系统_2020年mac系统下制作win10引导安装盘,亲测可用

    一 背景 最近组装了一台电脑 需要安装系统 由于家里只有一台Macbook pro 在网上找了很多关于mac环境下制作支持win10启动盘教程 尝试过下面几种方式都失败 即u盘插入后主板不会识别 无法自动安装 1 利用终端指令拷贝iso镜像
  • Linux提权之内核漏洞提权篇

    前言 在渗透过程中 有时利用某些漏洞可以获取一个低权限的用户 然后想办法提权 提升到root用户权限 从而控制整个系统 在获取到低权限shell后 通常会检查操作系统的发行版本 内核版本 老版本的系统可能会存在一些漏洞 于是我们可以利用这些
  • 点云处理,点云处理算法程序

    点云处理 算法程序代编 top5硕博团队 高质量的服务 基于pcl cgal程序代编 联系方式 q 958417691 或闲鱼id专业点云处理 1 点云分割 单木分割 林下地形提取 DEM制作 等高线制作 地形补洞 2 点云重建 多种方法点
  • H5页面调用扫一扫功能

    想要实现H5页面调用微信扫一扫功能 必须先了解微信JS SDK接口 企业号开发接口文档地址 https qydev weixin qq com wiki index php title E9 A6 96 E9 A1 B5 我们来看下使用的大