微信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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
JS 实现双色表格实现代码
2009/11/24 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
python文件操作相关知识点总结整理
2016/02/22 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
利用python获取Ping结果示例代码
2017/07/06 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Python脚本调试工具安装过程
2021/01/11 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
党员岗位承诺书
2014/03/25 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python