微信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中最常用的55个经典小技巧
Nov 29 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
暑期社会实践感言
2014/02/25 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
工程项目经理任命书
2014/06/05 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs