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实现Windows任务管理器的代码
Mar 27 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
vue双向绑定简要分析
Mar 23 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JS快速实现简单计算器
Apr 08 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中动态显示签名和ip原理
2007/03/28 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
JS实现日期加减的方法
2013/11/29 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
Python内置数据类型详解
2014/08/18 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
活动邀请函范文
2014/01/19 职场文书
药店主任岗位责任制
2014/02/10 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python