微信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)
May 21 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
JavaScript实现简单进度条效果
Mar 25 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中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
python版本单链表实现代码
2018/09/28 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
PHP面试题大全
2015/10/16 面试题
学生干部学习的自我评价
2014/02/18 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
贷款承诺书
2015/01/20 职场文书
城管个人总结
2015/02/28 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年信访工作总结
2015/04/07 职场文书
高中运动会前导词
2015/07/20 职场文书
大学生社会服务心得体会
2016/01/22 职场文书