微信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下实现overlay遮罩层代码
Aug 25 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
javascript白色简洁计算器
May 04 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP 字符串 小常识
2009/06/05 PHP
php生成随机密码的几种方法
2011/01/17 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
div层的移动及性能优化
2010/11/16 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python 第一步 hello world
2009/09/25 Python
Python读写配置文件的方法
2015/06/03 Python
详解Python迭代和迭代器
2016/03/28 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
增大python字体的方法步骤
2020/07/05 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
个人租房协议书
2014/04/09 职场文书
一岗双责责任书
2014/04/15 职场文书
素质教育标语
2014/06/27 职场文书
化工实习心得体会
2014/09/09 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript