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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python杀死一个线程的方法
2015/09/06 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
《胡杨》教学反思
2014/02/16 职场文书
创建青年文明号材料
2014/05/09 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
村安全生产责任书
2014/08/25 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python