java实现微信公众号扫一扫

2024-12-18 00:25:17

本文实例为大家分享了微信公众号扫一扫的具体代码，供大家参考，具体内容如下

步骤

根据微信JS-JDK文档说明，实现扫一扫主要有以下几大步骤：

绑定域名
引入JS文件
通过config接口注入权限验证配置
通过ready接口处理成功验证
通过error接口处理失败验证

绑定域名

在JS接口安全域名填入域名，注意不带http，如图：

引入JS文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

通过config接口注入权限验证配置

$.ajax({
  url: "${pageContext.request.contextPath}/wechat/jsapisign",
  type: "post",
  data: {
   url: location.href.split('#')[0]
  },
  contentType: 'application/x-www-form-urlencoded;charset=utf-8',
  async: true,
  success: function (data) {
   wx.config({
    debug: false,
    appId: data.appid, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名，见附录1
    jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
   });
  }
 });

微信jsapi验签

public Map<String, String> jsApiSign(String url) {
  Map<String, String> ret = new HashMap<String, String>(16);
  String nonce_str = CheckUtil.create_nonce_str();
  String timestamp = CheckUtil.create_timestamp();
  String string1;
  String signature = "";

  String jsapi_ticket = wechatAccessTokenService.getJsApiTicket();
  //注意这里参数名必须全部小写，且必须有序
  string1 = "jsapi_ticket=" + jsapi_ticket +
    "&noncestr=" + nonce_str +
    "&timestamp=" + timestamp +
    "&url=" + url;
  logger.info("jsApiSign===" + string1);

  try {
   MessageDigest crypt = MessageDigest.getInstance("SHA-1");
   crypt.reset();
   crypt.update(string1.getBytes("UTF-8"));
   signature = CheckUtil.byteToHex(crypt.digest());
  } catch (NoSuchAlgorithmException | UnsupportedEncodingException e) {
   e.printStackTrace();
  }

  ret.put("appid", appid);
  ret.put("url", url);
  ret.put("jsapi_ticket", jsapi_ticket);
  ret.put("nonceStr", nonce_str);
  ret.put("timestamp", timestamp);
  ret.put("signature", signature);
  logger.info("jsApiSign===url=" + url + "==jsapi_ticket" + jsapi_ticket + "==nonce_str" + nonce_str + "==timestamp" + timestamp + "==signature" + signature);
  return ret;
 }

public String getJsApiTicket() {
  AugeWechatAccessToken wechatAccesstoken = augeWechatAccessTokenMapper.selectByPrimaryKey(jsApiTicketId);
  logger.info("getJsApiTicket===" + wechatAccesstoken.getAccessToken());
  if (Strings.isNullOrEmpty(wechatAccesstoken.getAccessToken()) || wechatAccesstoken.getExpiresIn() - 100 * 1000 < System.currentTimeMillis()) {
   //空或者过期，刷新
   return refreshJsApiTicket();
  } else {
   return wechatAccesstoken.getAccessToken();
  }
 }

Controller层代码

@RequestMapping(value = "/jsapisign", method = {RequestMethod.GET, RequestMethod.POST}, produces = MEDIATYPE_CHARSET_JSON_UTF8)
 @ResponseBody
 public String jsApiSign(String url) {
  //添加微信js签名信息
  Map<String, String> signMap = wechatService.jsApiSign(url);

  return JSON.toJSONString(signMap);
 }

前台JSP页面完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-CN">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<head>
 <base href="<%=basePath%>" rel="external nofollow" >
 <title>扫码还书</title>
 <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <link rel="stylesheet" type="text/css" href="../../../resources/css/bookdetail.css" rel="external nofollow" >

</head>

<body>
<div class="wrap" style="width: 100% ;height: 100%">
 <img src="../../../resources/images/borrow/return.png" alt="" style="width: 100% ;height: 75%">
 <div style="text-align: center; background-color: #f5f5f5; ">
  <img src="../../../resources/images/borrow/scanReturn.png" alt="" style="width: 40% ;height: 25%;" id="scanQRCode1">
 </div>

</div>

<script type="text/javascript">
 $.ajax({
  url: "${pageContext.request.contextPath}/wechat/jsapisign",
  type: "post",
  data: {
   url: location.href.split('#')[0]
  },
  contentType: 'application/x-www-form-urlencoded;charset=utf-8',
  async: true,
  success: function (data) {
   wx.config({
    debug: false,
    appId: data.appid, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名，见附录1
    jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表
   });
  }
 });
 wx.ready(function () {
  // 9.1.2 扫描二维码并返回结果
  document.querySelector('#scanQRCode1').onclick = function () {
   wx.scanQRCode({
    needResult: 1,
    desc: 'scanQRCode desc',
    success: function (res) {
     //扫码后获取结果参数赋值给Input
     var url = res.resultStr;
     //商品条形码，取","后面的
     if (url.indexOf(",") >= 0) {
      var tempArray = url.split(',');
      var barCode = tempArray[1];
      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx96668744efc2b2de&redirect_uri=http://cx.ngrok.xiaomiqiu.cn/wechat/toReturnDetail?barCode=" + barCode + "&response_type=code&scope=snsapi_base&state=BINDFACE#wechat_redirect";

     } else {
      alert("请对准条形码扫码!");
     }
    }
   });
  };
 });
 //初始化jsapi接口 状态
 wx.error(function (res) {
  alert("调用微信jsapi返回的状态:" + res.errMsg);
 });

</script>
</body>
</html>

注：开发中容易出现的有signature验签错误，我们可以透过前后端url一致性来判断。其次就是注意有时候的错误是由于accessToken没有刷新的缘故，需要重新刷新。

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

您可能感兴趣的文章:

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

微信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
Java实现微信公众号获取临时二维码功能示例

本文实例讲述了Java实现微信公众号获取临时二维码功能.分享给大家供大家参考,具体如下: 我们做微信公众号开发时为了推广,可能需要服务端去生成公众号的临时二维码,然后再进行一定的图片合成操作,制作一张漂亮的推广海报.别人扫一下二维码进入关注公众号界面,点击关注我们可以拿到二维码里面的信息官网地址记录一下获取临时二维码操作过程. 1.获取access_token 上一篇文章写了就不赘述了: 2.根据access_token获取二维码ticket,获取到了二维码ticket就基本山是成功了: 3
Java版微信公众号支付开发全过程

一.微信官方文档微信支付开发流程(公众号支付) 首先我们到微信支付的官方文档的开发步骤部分查看一下需要的设置. [图片上传失败...(image-5eb825-1531014079742)] 因为微信支付需要较高的权限,只有认证了得服务号才有使用微信支付接口的权限,我们个人很难申请到,所以需要向其他朋友借用账号. 来到文档的业务流程部分,查看微信支付的流程(我觉得这个还是需要十分仔细的了解和查看的,这有助于你理解微信开发的流程). 然后,访问微信支付接口是要传递的参数很多,见统一下单 [图片上传
Java实现微信公众号自定义菜单的创建方法示例

本文实例讲述了Java实现微信公众号自定义菜单的创建方法.分享给大家供大家参考,具体如下: 开发公众号的时候可能需要给一些自定义菜单添加事件,比如点击某菜单然后服务端给用户推送信息. 我们也可以使用微信提供的网页调试工具直接生成菜单,不过需要考虑是否影响用户问题. 注意:使用代码自定义菜单事件,手动添加的菜单会失效!谨慎使用! 官方文档 httpClientUtil工具类需要的话可以在前面微信公众号获取access_token中获取 public class WechatDIYMenuTest
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
java开发微信公众号支付

最近做了微信公众号支付的开发,由于是第一次做也摸索了几天的时间,也只是达到了实现功能的水平,并没有太多考虑到性能问题,所以这篇文章比较适合初学者. 微信公众号支付的总体其实很简单,大致就分为三步.第一步需要获取用户授权:第二步调用统一下单接口获取预支付id:第三步H5调起微信支付的内置的js.下面介绍具体每一步的开发流程. 一首先要明确微信公众号支付属于网页版支付,所以相较于app的直接调取微信支付要多一步微信授权.也就是需要获取用户的openid.微信公众号使用的交易类型是JSAPI,
Java开发微信公众号接收和被动回复普通消息

上篇说完了如何接入微信公众号,本文说一下微信公众号的最基本功能:普通消息的接收和回复.说到普通消息,那么什么是微信公众号所定义的普通消息呢,微信开发者文档中提到的接收的普通消息包括如下几类: 1.文本消息 2.图片消息 3.语音消息 4.视频消息 5.小视频消息 6.地理位置消息 7.链接消息(被动回复的消息) 被动回复的普通消息包括: 1.回复文本消息 2.回复图片消息 3.回复语音消息 4.回复视频消息 5.回复音乐消息 6.回复图文消息其实接收消息和被动回复消息这两个动作是不分家的,这本
java实现微信公众号发送模版消息

前言: 在我们购买商品或其他操作的时候,这时候微信公众号会推送相关模版消息.接下来简单介绍开发流程:(本文以订单推送为例) 首先在测试号新建模版消息格式如下: {{first.DATA}} 用户名:{{keyword1.DATA}} 订单号:{{keyword2.DATA}} 订单金额:{{keyword3.DATA}} 商品信息:{{keyword4.DATA}} {{remark.DATA}} 这里会生成一个模版ID,后面会用到然后后台在上传订单接口,上传成功后调用发送模版消息,代码实现
java微信公众号开发（搭建本地测试环境）

俗话说,工欲善其事,必先利其器.要做微信公众号开发,两样东西不可少,那就是要有一个用来测试的公众号,还有一个用来调式代码的开发环境. 测试公众号微信公众号有订阅号.服务号.企业号,在注册的时候看到这样的信息,只有订阅号可以个人申请,服务号和企业号要有企业资质才可以.这里所说的微信公众号开发指的是订阅号和服务号. 另外,未认证的个人订阅号有一些接口是没有权限的,并且目前个人订阅号已不支持微信认证,也就是说个人订阅号无法调用一些高级的权限接口,下图就是一个未认证的个人订阅号所具备权限列表,像生成二
Java微信支付之公众号支付、扫码支付实例

微信支付现在已经变得越来越流行了,随之也出现了很多以可以快速接入微信支付为噱头的产品,不过方便之余也使得我们做东西慢慢依赖第三方,丧失了独立思考的能力,这次打算分享下我之前开发过的微信支付. 一 .H5公众号支付要点:正确获取openId以及统一下单接口,正确处理支付结果通知,正确配置支付授权目录 H5的支付方式是使用较为广泛的方式,这种支付方式主要用于微信内自定义菜单的网页,依赖手机上安装的微信客户端,高版本的微信才支持微信支付,下面按我的流程注意说明 1 编写用于支付的页面,由于是测试用
微信公众号实现扫码获取微信用户信息（网页授权）

刚开始接触微信的时候一头雾水,领导想要一个扫码获取微信用户信息的功能,而且是扫的别人的二维码,我是一阵忙活啊. 经过努力和尝试,终于功夫不负有心人啊,赶紧记录一下,我用的是thinkphp编写的. 第一步:就是二维码的生成 1.首先要确定第一个二维码,因为既然是扫码,肯定是要第一个二维码的,也就是第一人才可以.我将第一个二维码的唯一值(id)设置成零,然后开始我的编写 2.既然是二维码,我用了phpqrcode二维码生成插件,二维码的生成可以在本地编写,查看效果后再上传服务器. (1)从网上下

java实现微信公众号扫一扫

您可能感兴趣的文章:

相关推荐

随机推荐