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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
如何删除多级目录
2006/10/09 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
微信小程序签到功能
2018/10/31 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
会计岗位职责模板
2014/03/12 职场文书
操行评语大全
2014/04/30 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python