微信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组件的一些写法
Sep 10 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 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网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP反射机制用法实例
2014/08/28 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
javascript操作数组详解
2014/12/17 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python网站验证码识别
2016/01/25 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
员工薪酬福利制度
2014/01/17 职场文书
活动总结的格式
2014/05/07 职场文书
求职简历自荐信
2014/06/18 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
悬空寺导游词
2015/02/05 职场文书
办公室规章制度范本
2015/08/04 职场文书
治庸问责工作总结
2015/08/11 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android