微信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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
react 生命周期实例分析
May 18 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关联数组快速排序的方法
2015/04/17 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
实例讲解PHP表单处理
2019/02/15 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python实现批量注册网站用户的示例
2019/02/22 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Django中的session用法详解
2020/03/09 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
商务专员岗位职责
2013/11/23 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
《火烧云》教学反思
2014/04/12 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
小学生成绩单评语
2014/12/31 职场文书
高三英语教学计划
2015/01/23 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
在项目中使用redis做缓存的一些思路
2021/09/14 Redis