微信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 浏览器判断实现函数
Aug 20 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
javascript如何写热点图
Dec 08 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
微信小程序反编译的实现
Dec 10 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
prototype class详解
2006/09/07 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
分家协议书
2014/04/21 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
国庆庆典邀请函
2015/02/02 职场文书
投诉书范文
2015/07/02 职场文书
队列队形口号
2015/12/25 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
python实现语音常用度量方法的代码详解
2021/05/25 Python
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Python开发五子棋小游戏
2022/04/28 Python