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中更短的 Array 类型转换
Oct 30 Javascript
checkbox使用示例
Aug 23 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
vue v-on监听事件详解
May 17 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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 curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python实现年会抽奖程序
2019/01/22 Python
python 绘制国旗的示例
2020/09/27 Python
网络营销策划方案
2014/06/04 职场文书
党员民主生活会材料
2014/12/15 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
CAD实训总结范文
2015/08/03 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers