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的一些注意
Dec 06 Javascript
javascript Object与Function使用
Jan 11 Javascript
Javascript倒计时代码
Aug 12 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 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 地址栏信息的获取代码
2009/01/07 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
python定时器使用示例分享
2014/02/16 Python
Python编程入门的一些基本知识
2015/05/13 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python简单实现操作Mysql数据库
2018/01/29 Python
一百行python代码将图片转成字符画
2021/02/19 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
委托协议书范本
2014/04/22 职场文书
运动会方阵口号
2014/06/07 职场文书
2014年科室工作总结
2014/11/20 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python