微信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 autocomplete 使用手册
Apr 01 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
webpack打包js的方法
Mar 12 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
使用Ajax实现无刷新上传文件
Apr 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后退一页表单内容保存实现方法
2012/06/17 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
vuex 的简单使用
2018/03/22 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python队列Queue的详解
2019/05/10 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
校园环保建议书
2014/05/14 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书