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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
微信小程序实现弹框效果
May 26 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
微信公众号中的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编码转换
2012/11/05 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
extjs render 用法介绍
2013/09/11 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python数据结构之单链表详解
2017/09/12 Python
Python延时操作实现方法示例
2018/08/14 Python
深入了解python中元类的相关知识
2019/08/29 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python else语句在循环中的运用详解
2020/07/06 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Python基于内置函数type创建新类型
2020/10/22 Python
python IP地址转整数
2020/11/20 Python
韩语专业本科生求职信
2013/10/01 职场文书
信访工作经验交流材料
2014/05/23 职场文书
2019求职信大礼包
2019/05/15 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Java 数组的使用
2022/05/11 Java/Android