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

2024-10-28 12:49:04

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

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

微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决

今天偶然的把微信jssdk的debug打开后,发现调试信息总是提示签名错误,感情前两天api的"偶尔"不生效,不是因为还没执行代码,而是因为签名没正确啊!,这就是个100%可以重现的错误但只要这个SPA刚刷新过,或加载完后中途没有跳转,,签名就会是正确的. 而当路由发生改变,我们对新"跳转"的页面重新签名之后,却出现了签名错误,而我们的签名明明是正确的,把各种参数拿去微信JS签名校验工具(http://mp.weixin.qq.com/debug/cgi-bin/
php一个文件搞定微信jssdk配置

php一个文件搞定微信jssdk配置: 包括缓存,包括https通讯,获取微信access_token,签名什么的都有.但是防范性编程做得比较少,商业用的话,需要完善下代码. 使用姿势 ^ajax(Common.ServerUrl + "GetWX.php", { data: { Type: "config", url: location.href.split('#')[0] }, dataType: 'json', type: 'get', timeout: 50
详解nodejs微信jssdk后端接口

写过了两个微信的页面,遇到了挺多不会的问题,当时也是自己边查资料,边实践完成了简单的需求,刚好现在有空,把之前的东西整理一遍. 与普通的手机页面不同的是,微信页面提供给你了调用微信APP内置功能的接口,可以实现更复杂的功能. jssdk的前端使用前端页面调用jssdk首先要通绑定"公众号设置"的"功能设置"里填写"JS接口安全域名" 然后在页面中引入http://res.wx.qq.com/open/js/... 调用 wx.config({.
微信分享调用jssdk实例

网页在微信中打开,进行分享,详细过程 1.问题说明搞了半天,终于搞定.说下基本需求,很简单,网页在微信中打开,分享. 网页是html格式,原来分享时会一直显示链接,看了下代码中没有调用jssdk,调用的是一个第三方的平台的分享接口. 2.问题解析根据微信官方给出的demo,可以看到核心就是获取四个参数,配置wx.config. 四个参数分别是appId.timestamp.nonceStr.signature appId不用说,后面三个都是根据微信的接口得到的,有兴趣的可以看下官方,不过也可
微信JSSDK上传图片

前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用.先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给uploadImage接口上传图片. 最近做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发者文档链接:微信开发者文档主要用到了: 引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq
微信jssdk在iframe页面失效问题的解决措施

项目需求微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行放大缩小移动旋转等操作,点击确定按钮将编辑好的图片发送到服务器存成图片遇到的问题当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的选择图片接口,其他jssdk中的接口也无法正常工作.但是单独打开子页面可以正
微信jssdk用法汇总

本文针对微信jssdk用法进行了详细汇总,分享给大家,供大家参考,具体内容如下 1.绑定域名 2.引入js文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK 3.通过config接口注入权限验证
关于微信jssdk实现多图片上传的一点心得分享

一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置 function signatureJSSDK() { var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数 $.ajax({ url:IPWeiXinJssdk,//调用后台接口,用后台返回的结果来进行微信接口的基础配置 type:"post", dataType:"json", data
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片
微信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/jweix
vue 使用微信jssdk,调用微信相册上传图片功能

vue 使用微信jssdk 1.引入weixin-js-sdk npm install weixin-js-sdk 使用文档 https://www.npmjs.com/package/weixin-js-sdk 2.配置 vue中微信jssdk配置 import wx from 'weixin-js-sdk' created(){ //微信jssdk配置 let timestamp=new Date().getTime();//时间戳 let noncestr=Math.random().to
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)

需求:点击我们公司的微信公众号,从菜单栏中进入会员中心,如果是新会员则需绑定注册,注册完跳转到用户中心页面,然后给用户发会员卡,如果是老会员,如果以前没有的会员卡的,发一张会员卡给他,如果有,则不做任何处理. 实现:我的思路是这样的,进入会员中心,调用微信API接口,判断用户是否领过卡,若没有领取,则调用微信JS-JDK的addCard()接口.具体实现过程如下(用C#实现): 1创建会员卡 1) 先打开微信开发者文档,先调用创建会员卡接口,在文档的4.1 创建会员卡接口,直接用postman,
微信小程序实现锚点定位功能的方法实例

前言在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果: 功能实现采用小程序视图容器组件实现:scroll-view 这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码: <scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}"
微信小程序城市选择及搜索功能的方法

实现搜索城市功能参考微信小程序之『仿美团城市选择城市切换』 https://github.com/cinoliu/-selectCity js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 sc
java实现微信公众号扫一扫

本文实例为大家分享了微信公众号扫一扫的具体代码,供大家参考,具体内容如下步骤根据微信JS-JDK文档说明,实现扫一扫主要有以下几大步骤: 绑定域名引入JS文件通过config接口注入权限验证配置通过ready接口处理成功验证通过error接口处理失败验证绑定域名在JS接口安全域名填入域名,注意不带http,如图: 引入JS文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></s
vue使用微信JS-SDK实现分享功能

最近开发微信公众号内嵌H5页面,使用vue搭建的项目,由于业务需求,需要实现微信自定义分享功能,所以项目中集成微信JS-SDK.微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 1.绑定域名微信公众号开发测试帐号: http://mp.weixin.qq.com/debug
微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

主要为以下实现步骤: 1.绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://res.wx
Java微信公众平台开发（13）微信JSSDK中Config配置

前端开发工程师和关注前端开发的开发者们在2015年中肯定被腾讯的JSSDk引爆过,搞APP的.搞前端的甚至是是搞后端的都跑过来凑热闹,一时之间也把微信JSSDK捧得特别牛逼,但是在我们的技术眼里它的实现原理和根本是不能够被改变的,这篇文章就不对其js的实现做任何评价和解说了(因为我也不是很懂,哈哈),这里要说的是它的config配置实现,参考文档:http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html ! 微信
微信公众号JS-SDK获取当前经纬度以及地址信息的方法

目录前言一.微信 JS-SDK是什么? 二.使用步骤 1.绑定域名 2.引入 JS 文件 3.通过 config 接口注入权限验证配置 4.在这过程中我遇到的问题及解决方法(提示错误invalid signature) 总结前言这篇文章带大家掌握从0到1掌握微信公众平台js-sdk调用微信公众平台js-sdk调用到底哪几步安全域名怎么配置代码怎么写出了问题怎么查找例如:随着微信生态的不断发展,基于微信平台的网页开发业务场景也越来越多,很多人都开启了学习微信网页开发,本文就介绍

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

相关推荐

随机推荐