微信JSSDK调用微信扫一扫功能的方法


Posted in Javascript onJuly 25, 2017

如何利用微信JSSDK调用微信扫一扫功能?具体内容如下

1. 确保有 调起微信扫一扫接口 权限,测试号可能不行;

2. 导入相关JS

<script type="text/javascript" http://test.com/zepto_touch.js"></script> 
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3. 页面触发扫码元素

<img src="../../../images/right.jpg" onclick="scanCode()" class="img">

4. 相关JS代码

<script type="text/javascript"> 
 var _appId = "wxz88dbd30e5580e59"; 
 var _data = { 
  appId : _appId, 
  url : location.href, 
  t : Math.random() 
 }; 
 var _getWechatSignUrl = 'http://test.com/getWechatSign.do'; 
 
 // 获取微信签名 
 $.ajax({ 
  url : _getWechatSignUrl, 
  data : _data, 
  success : function(o) { 
   console.log(o); 
   if (o.returnCode == "00") { 
    wxConfig(o.detail[0].timestamp, o.detail[0].nonceStr, o.detail[0].signature); 
   } 
  } 
 }); 
 function wxConfig(_timestamp, _nonceStr, _signature) { 
  //alert('获取数据:'+_timestamp+'\n'+_nonceStr+'\n'+_signature); 
  console.log('获取数据:' + _timestamp + '\n' + _nonceStr + '\n' + _signature); 
  wx.config({ 
   debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 
   appId : _appId, // 必填,公众号的唯一标识 
   timestamp : _timestamp, // 必填,生成签名的时间戳 
   nonceStr : _nonceStr, // 必填,生成签名的随机串 
   signature : _signature,// 必填,签名,见附录1 
   jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 
     'onMenuShareQQ', 'onMenuShareWeibo', 'scanQRCode' ] 
  // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 
  }); 
 } 
 function scanCode() { 
  wx.scanQRCode({ 
   needResult : 1, 
   scanType : [ "qrCode", "barCode" ], 
   success : function(res) { 
    console.log(res) 
    alert(JSON.stringify(res)); 
    var result = res.resultStr; 
   }, 
   fail : function(res) { 
    console.log(res) 
    alert(JSON.stringify(res)); 
 
   } 
  }); 
 } 
</script>

5. 获取签名接口getWechatSign.do各值生成方式

timestamp

Long timestamp = System.currentTimeMillis() / 1000;

nonceStr

String nonceStr = RandomStringUtils.randomAlphanumeric(16);

signature

public static String getSign(String jsapi_ticket, String noncestr, Long timestamp, String url) 
  throws NoSuchAlgorithmException { 
 String shaStr = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" 
   + url; 
 MessageDigest mDigest = MessageDigest.getInstance("SHA1"); 
 byte[] result = mDigest.digest(shaStr.getBytes()); 
 StringBuffer signature = new StringBuffer(); 
 for (int i = 0; i < result.length; i++) { 
  signature.append(Integer.toString((result[i] & 0xff) + 0x100, 16).substring(1)); 
 } 
 return signature.toString(); 
}

6. 微信参考文档

获取access_token  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
获取jsapi_ticket  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 #Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 #Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 #Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 #Javascript
js事件委托和事件代理案例分享
Jul 25 #Javascript
基于JavaScript实现多级菜单效果
Jul 25 #Javascript
简单谈谈React中的路由系统
Jul 25 #Javascript
You might like
php下使用SMTP发邮件的代码
2008/01/10 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
浅析node.js中close事件
2014/11/26 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python 实现端口扫描工具
2020/12/18 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
大学军训感言1000字
2014/02/25 职场文书
文明家庭事迹材料
2014/12/20 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
六五普法学习心得体会
2016/01/21 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
导游词之阆中古城
2019/12/23 职场文书
python中print格式化输出的问题
2021/04/16 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android