js中调用微信的扫描二维码功能的实现代码


Posted in Javascript onApril 11, 2020

关键代码

<html>
<head>
  <title>
    js调用微信扫一扫功能测试
  </title>
   <!--引用微信JS库-->
  <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <!--引用jQuery库-->
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
  <input type="button" value="扫一扫" id="scanQRCode">
<script type="text/javascript">
  //这里【url参数一定是去参的本网址】
  $.get("获取微信认证参数的网址?url=当前网页的网址", function(data){
    var jsondata=$.parseJSON(data);
    wx.config({
      // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      debug: false,
      // 必填,公众号的唯一标识
      appId: jsondata.model.appId,
      // 必填,生成签名的时间戳
      timestamp: "" + jsondata.model.timestamp,
      // 必填,生成签名的随机串
      nonceStr: jsondata.model.nonceStr,
      // 必填,签名
      signature: jsondata.model.signature,
      // 必填,需要使用的JS接口列表
      jsApiList: ['checkJsApi', 'scanQRCode']
    });
  });
  wx.error(function (res) {
    alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
  });
 
  wx.ready(function () {
    wx.checkJsApi({
      jsApiList: ['scanQRCode'],
      success: function (res) {
 
      }
    });
 
    //点击按钮扫描二维码
    document.querySelector('#scanQRCode').onclick = function () {
      wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
          var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
          alert("扫描结果:"+result);
          window.location.href = result;//因为我这边是扫描后有个链接,然后跳转到该页面
        }
      });
    };
 
  });
</script>
</body>
</html>

注意事项:

“获取微信认证参数”
这个的前提是您能够有自己的微信开发资质,并能获取到正确的参数

  1. 公众号的唯一标识
  2. 签名的时间戳
  3. 签名随机串

常见的错误

config:invalid signature

解决办法

“当前网页的地址”-----哈哈,一定是你写的不对,这里一定是去参的本网页的地址
最好是在服务器下去测试

总结

到此这篇关于在js中调用微信的扫描二维码功能的文章就介绍到这了,更多相关js 微信扫描二维码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
微信小程序云开发详细教程
May 16 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 #Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 #Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 #Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 #Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 #Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 #Javascript
JavaScript实现轮播图特效
Apr 10 #Javascript
You might like
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript清空table表格的方法
2015/05/14 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python正则分析nginx的访问日志
2017/01/17 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
元旦活动感言
2014/03/08 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle