微信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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
利用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
使用Apache的rewrite技术
2006/06/22 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP链表操作简单示例
2016/10/15 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python如何使用unittest测试接口
2018/04/04 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
百度JavaScript笔试题
2015/01/15 面试题
运动会通讯稿300字
2014/02/02 职场文书
小学语文教学反思
2014/02/10 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
聚会通知怎么写
2015/04/23 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
python_tkinter事件类型详情
2022/03/20 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis