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 相关文章推荐
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
vue mounted组件的使用
Jun 18 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JS实现简单九宫格抽奖
Jun 28 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
Yii2框架实现注册和登录教程
2016/09/30 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python创建模块及模块导入的方法
2015/05/27 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
python之PyMongo使用总结
2017/05/26 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
DBA的职责都有哪些
2012/05/16 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
目标责任书格式范文
2015/05/11 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
聊聊Python String型列表求最值的问题
2022/01/18 Python