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 语言的递归编程
May 18 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue-cli配置文件——config篇
Jan 04 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
vue全屏事件开发详解
Jun 17 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 一个比较完善的简单文件上传
2010/03/25 PHP
PHP云打印类完整示例
2016/10/15 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python正则分组的应用
2013/11/10 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Django通过json格式收集主机信息
2020/05/29 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
.net C#面试题
2012/08/28 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
护士进修自我鉴定
2014/02/07 职场文书
法制报告会主持词
2014/04/02 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
综合实践活动报告
2015/02/05 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis