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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JavaScript从原型到原型链深入理解
Jun 03 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
一个目录遍历函数
2006/10/09 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js闭包实例汇总
2014/11/09 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python configparser模块常用方法解析
2020/05/22 Python
群众路线个人对照检查材料2014
2014/09/26 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
在pycharm中无法import所安装的库解决方案
2021/05/31 Python