微信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 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
js实现楼层导航功能
2017/02/23 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
python 动态加载的实现方法
2017/12/22 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Django如何实现防止XSS攻击
2020/10/13 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书