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 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php实现paypal 授权登录
2015/05/28 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
举例讲解Python中is和id的用法
2015/04/03 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python网络爬虫实例讲解
2016/04/28 Python
python中import学习备忘笔记
2017/01/24 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python opencv之SURF算法示例
2018/02/24 Python
基于Python实现用户管理系统
2019/02/26 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python使用Matlab命令过程解析
2020/06/04 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
英文升职感谢信
2015/01/23 职场文书
工作失职检讨书
2015/01/26 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
病假证明模板
2015/06/19 职场文书
导游词之海南天涯海角
2019/12/05 职场文书