微信JSSDK调用微信扫一扫功能的方法

 更新时间:2017年07月25日 11:55:02   作者:hfhwfw  
这篇文章主要为大家详细介绍了微信JSSDK调用微信扫一扫功能的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

如何利用微信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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS封装cookie操作函数实例(设置、读取、删除)

    JS封装cookie操作函数实例(设置、读取、删除)

    这篇文章主要介绍了JS封装cookie操作函数,以实例形式分析了JavaScript实现针对cookie的设置、获取及删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • javascript 文章截取部分无损html显示实现代码

    javascript 文章截取部分无损html显示实现代码

    近在做一些内容搜索的工作,搜索出来的内容为html格式,列表部分需要显示每项内容的一部分。
    2010-05-05
  • 超好玩js页面效果之实现数值的动态变化

    超好玩js页面效果之实现数值的动态变化

    这篇文章主要给大家介绍了关于超好玩js页面效果之实现数值的动态变化的相关资料,文中通过示例代码及图文介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2022-10-10
  • document.createElement()用法

    document.createElement()用法

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点
    2013-03-03
  • 前端语法高亮插件Prism.js使用详细教程

    前端语法高亮插件Prism.js使用详细教程

    最近项目有代码高亮的需求,这边是选用Prism.js来进行代码高亮,Prism是一款轻量级、可扩展的语法高亮器,根据现代 Web 标准构建,应用广泛,这篇文章主要给大家介绍了关于前端语法高亮插件Prism.js使用详细教程的相关资料,需要的朋友可以参考下
    2024-05-05
  • JS实现新浪微博效果带遮罩层的弹出框代码

    JS实现新浪微博效果带遮罩层的弹出框代码

    这篇文章主要介绍了JS实现新浪微博效果带遮罩层的弹出框代码,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 前端项目npm install 安装依赖报错的解决方案(三种问题解决方案)

    前端项目npm install 安装依赖报错的解决方案(三种问题解决方案)

    本文给大家介绍前端项目npm install 安装依赖报错的解决方案(三种问题解决方案),给大家总结了前端项目安装依赖,遇到过的问题,每一种问题给大家完美解决方案,感兴趣的朋友一起看看吧
    2023-12-12
  • JavaScript中window.open用法实例详解

    JavaScript中window.open用法实例详解

    这篇文章主要介绍了JavaScript中window.open用法,实例分析了window.open方法的功能、参数及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。本文重点给大家介绍Bootstrap零基础入门教程(三) ,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • node express使用HTML模板的方法示例

    node express使用HTML模板的方法示例

    这篇文章主要介绍了node express使用HTML模板的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论