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 相关文章推荐
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
CI框架表单验证实例详解
2016/11/21 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
python返回昨天日期的方法
2015/05/13 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python 整数越界问题详解
2019/06/27 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Django权限设置及验证方式
2020/05/13 Python
python如何实时获取tcpdump输出
2020/09/16 Python
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
期末考试动员演讲稿
2014/01/10 职场文书
团拜会策划方案
2014/06/07 职场文书
2015政治思想表现评语
2015/03/25 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS