微信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 相关文章推荐
js对象的比较
Feb 26 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
详解JavaScript中的六种错误类型
Sep 21 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
node.js基础知识小结
Feb 26 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
ant design charts 获取后端接口数据展示
May 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
深入php内核之php in array
2015/11/10 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JavaScript函数详解
2015/02/27 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python中for循环详解
2014/01/17 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Django发送邮件功能实例详解
2019/09/02 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
产品销售计划书
2014/05/04 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
实现一个简单得数据响应系统
2021/11/11 Javascript