玩玩微信公众号Java版之七：自定义微信分享

前面已经学会了微信网页授权，现在微信网页的功能也可以开展起来啦！

首先，我们先来学习一下分享，如何在自己的页面获取分享接口及让小伙伴来分享呢？

今天的主人公： 微信 JS-SDK， 对应官方链接为：微信JS-SDK说明文档

经过分析，要使用微信SJ-SDK需要完成如下工作：

由以上分析，我们需要做服务器的注入验证，另外在需要分享的页面中引入js文件，这样就可以调用微信JS-SDK中的接口啦~

下面首先开始实现注入验证功能，主要分为如下几步：

第一步，获取access_token：

access_token是微信接口号开发的基本数据，建议存到数据库中保存。（第三篇中已实现，可参考）

第二步，获取jsapi_ticket：

由官方文档得知，只需Get方式调用接口：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

其中参数为第一步中获取的access_token，调用方法已在工具类中。另jsapi_ticket有效时间为2个小时，且每个页面均需用到接口验证，因此可参考access_token，

将jsapi_ticket 存至数据库，以便后续获取。

获取jsapi_ticket主方法可参考（请忽略注释问题）：

     /**
      * 获取微信 js-api-ticket
      * @return
      */
     public JSAPITicket getJsApiTicket()
     {

         /*
          * 第一步，查询数据库中ticket是否已过期 未过期则直接获取
          */
         if (updateJSAPITicket())
         {
             return mJSAPITicket;
         }

         /* 第二步，获取当前有效的access_token */
         WeChatTokenService tWeChatTokenService = new WeChatTokenService();
         // 此处获取测试账号的
         String access_token = tWeChatTokenService.getToken(mAppid, mAppSecret).getToken();

         /* 第三步，则通过https调用获取 jsapi_ticket */
         if (!getJSApiTicketbyhttps(access_token))
         {
             System.out.println("获取ticket失败！");
             return null;
         }

         return mJSAPITicket;
     }

其中jsapi_ticket对应实体类为：

 /**
  * 微信 JS-API-Ticket类
  * @author Damon
  */
 public class JSAPITicket implements Cloneable
 {

     // 微信 ticket流水号
     private String ticketid = "";

     // 微信jsapi_ticket
     private String ticket = "";

     // 有效时间
     private int expires_in = 0;

     // 微信appid
     private String appid = "";

     // 申请用户密钥
     private String appsecret = "";

     // 获取时间
     private String createtime = "";

     public String getTicketid()
     {
         return ticketid;
     }

     public void setTicketid(String ticketid)
     {
         this.ticketid = ticketid;
     }

     public String getTicket()
     {
         return ticket;
     }

     public void setTicket(String ticket)
     {
         this.ticket = ticket;
     }

     public int getExpires_in()
     {
         return expires_in;
     }

     public void setExpires_in(int expires_in)
     {
         this.expires_in = expires_in;
     }

     public String getAppid()
     {
         return appid;
     }

     public void setAppid(String appid)
     {
         this.appid = appid;
     }

     public String getCreatetime()
     {
         return createtime;
     }

     public void setCreatetime(String createtime)
     {
         this.createtime = createtime;
     }

     public String getAppsecret()
     {
         return appsecret;
     }

     public void setAppsecret(String appsecret)
     {
         this.appsecret = appsecret;
     }

     @Override
     public JSAPITicket clone() throws CloneNotSupportedException
     {
         // TODO Auto-generated method stub
         JSAPITicket cloneTicket = (JSAPITicket) super.clone();
         return cloneTicket;
     }

 }

对应表结构可以参考：

对应的SQL脚本：

 drop table if exists WeChatJSAPITicket;

 /*==============================================================*/
 /* Table: WeChatJSAPITicket                                     */
 /*==============================================================*/
 create table WeChatJSAPITicket
 (
    ticketid             varchar(60) not null,
    ticket               varchar(300),
    expires_in           int,
    appid                varchar(60),
    appsecret            varchar(60),
    createtime           timestamp,
    primary key (ticketid)
 );

主方法调用的明细方法为：

     /**
      * 获取微信JS-API-Ticket信息
      * @return
      */
     private boolean updateJSAPITicket()
     {
         // 查询数据库数据，如果有则不用更新，无则需要更新
         Connection con = null;
         PreparedStatement stmt = null;
         ResultSet rs = null;
         // 判断当前token是否在有效时间内
         String sql = " select * from wechatjsapiticket where appid ='" + mAppid + "' and appsecret ='" + mAppSecret
                 + "' and ( current_timestamp -createtime) <expires_in order by createTime desc limit 0,1";
         System.out.println(sql);
         try
         {
             // 创建数据库链接
             con = DBConnPool.getConnection();
             // 创建处理器
             stmt = con.prepareStatement(sql);
             // 查询Token，读取1条记录
             rs = stmt.executeQuery();
             if (rs.next())
             {
                 mJSAPITicket.setTicketid(rs.getString("ticketid"));
                 mJSAPITicket.setTicket(rs.getString("ticket"));
                 mJSAPITicket.setExpires_in(rs.getInt("expires_in"));
                 mJSAPITicket.setAppid(rs.getString("appid"));
                 mJSAPITicket.setAppsecret(rs.getString("appsecret"));
             }
             else
             {
                 System.out.println("未查询到对应ticket");
                 return false;
             }
         }
         catch (Exception e)
         {
             // TODO: handle exception
             return false;
         }

         return true;
     }

     /**
      * 调用请求获取ticket
      * @param access_token
      * @return
      */
     private boolean getJSApiTicketbyhttps(String access_token)
     {

         String current_time = new Date().getTime() + "";

         try
         {
             // 请求地址
             String path = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
             path = path.replace("ACCESS_TOKEN", access_token);
             String strResp = WeChatUtil.doHttpsGet(path, "");
             System.out.println(strResp);

             // 解析获取的token信息
             Map<String, Object> tMap = WeChatUtil.jsonToMap(strResp);

             System.out.println(tMap.toString());

             mJSAPITicket.setTicketid(WeChatUtil.getMaxJSAPITicketID());
             mJSAPITicket.setTicket((String) tMap.get("ticket"));
             mJSAPITicket.setExpires_in(Integer.parseInt((String) tMap.get("expires_in")));
             mJSAPITicket.setAppid(mAppid);
             mJSAPITicket.setAppsecret(mAppSecret);
             mJSAPITicket.setCreatetime(current_time);

             System.out.println(mJSAPITicket.getTicket());

         }
         catch (HttpException e)
         {
             // TODO Auto-generated catch block
             e.printStackTrace();
             return false;
         }
         catch (IOException e)
         {
             // TODO Auto-generated catch block
             e.printStackTrace();
             return false;
         }

         // 存储JS-API-Ticket至数据库
         if (!saveJSAPITicket(mJSAPITicket))
         {
             return false;
         }

         return true;
     }

     /**
      * 将获取到的ticket信息存到数据库
      * @param tJSAPITicket
      * @return
      */
     private boolean saveJSAPITicket(JSAPITicket tJSAPITicket)
     {
         PreparedStatement pst = null;
         Connection conn = null;
         try
         {
             JSAPITicket ticket = tJSAPITicket.clone();

             System.out.println(ticket.getTicketid() + ticket.getTicket());

             conn = DBConnPool.getConnection();
             // 创建预处理器
             pst = conn.prepareStatement("insert into wechatjsapiticket(ticketid, ticket, expires_in,appid, appsecret,createtime) values (?,?,?,?,?,?)");

             pst.setString(1, ticket.getTicketid());
             pst.setString(2, ticket.getTicket());
             pst.setInt(3, ticket.getExpires_in());
             pst.setString(4, ticket.getAppid());
             pst.setString(5, ticket.getAppsecret());
             long now = new Date().getTime();
             pst.setTimestamp(6, new java.sql.Timestamp(Long.parseLong(ticket.getCreatetime())));
             pst.execute();

         }
         catch (CloneNotSupportedException e)
         {
             // TODO Auto-generated catch block
             e.printStackTrace();
             return false;
         }
         catch (SQLException e)
         {
             // TODO Auto-generated catch block
             e.printStackTrace();
             return false;
         }
         catch (Exception e)
         {
             // TODO: handle exception
             System.out.println("出现额外异常");
             return false;
         }

         return true;
     }

这样就方便我们获取access_ticket啦！

第三步，实现数据签名：

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。

这里需要用到四个参数，具体分析如下：

参数	说明
noncestr	随机字符串，可用java.util.UUUID类实现
jsapi_ticket	调用前面方法获取
timestamp	当前时间戳
url	传入参数，每次由前端传入

另外，参数加密算法为SHA1加密，因此实现方法为：

     /**
      * ticket数据签名
      * @return
      */
     public WeChatJSAPISign getSignTicket(String requestUrl)
     {
         // 随机字符串
         String noncestr = UUID.randomUUID().toString().replace("-", "");
         String jsapi_ticket = getJsApiTicket().getTicket();
         long timestamp = new Date().getTime();

         String params = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url="
                 + requestUrl;
         String signature = "";

         System.out.println("params:" + params);

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

         WeChatJSAPISign tChatJSAPISign = new WeChatJSAPISign();

         tChatJSAPISign.setAppId(mAppid);
         tChatJSAPISign.setNoncestr(noncestr);
         tChatJSAPISign.setTimestamp(timestamp);
         tChatJSAPISign.setSignature(signature);

         return tChatJSAPISign;
     }

返回定义的参数对象，定义如下：

 /**
  * // JS-API-Ticket 签名类
  * @author Damon
  */
 public class WeChatJSAPISign
 {

     // JS-API-Ticket appid
     private String appId = "";

     // JS-API-Ticket 随机字符串
     private String noncestr = "";

     // JS-API-Ticket 时间
     private long timestamp = 0;

     // JS-API-Ticket 签名
     private String signature = "";

     public String getAppId()
     {
         return appId;
     }

     public void setAppId(String appId)
     {
         this.appId = appId;
     }

     public String getNoncestr()
     {
         return noncestr;
     }

     public void setNoncestr(String noncestr)
     {
         this.noncestr = noncestr;
     }

     public long getTimestamp()
     {
         return timestamp;
     }

     public void setTimestamp(long timestamp)
     {
         this.timestamp = timestamp;
     }

     public String getSignature()
     {
         return signature;
     }

     public void setSignature(String signature)
     {
         this.signature = signature;
     }

 }

到这，注入验证的服务器端功能就完成了。

下面也进行页面的编写和调用验证。

第一步，先写一个分享页面（基本的html页面即可），可参考（由于我的工程默认编码GBK，编码请注意）：

 <%@ page language="java" contentType="text/html; charset=GBK"   pageEncoding="GBK"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 <title>damon's share page</title>
 <%@include file="wechat_config.jsp" %>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 <link rel="stylesheet" href="./weui/weui.css"/>

 <!--
 <script src="wechat_config.js"></script>
  -->
 <script type="text/javascript">
 wx.config({
     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
     appId: '${appid}', // 必填，公众号的唯一标识
     timestamp: '${timestamp}', // 必填，生成签名的时间戳
     nonceStr: '${noncestr}', // 必填，生成签名的随机串
     signature: '${signature}',// 必填，签名，见附录1
     jsApiList: ['onMenuShareTimeline','onMenuShareQQ','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
 });

 wx.ready(function(){

 // 分享到朋友圈
 wx.onMenuShareTimeline({
         title: '玩玩微信公众号Java版之六：微信网页授权', // 分享标题
         link: 'http://www.cnblogs.com/cooldamon/p/7219400.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: 'http://damonhouse.iok.la/wechat/pic1.jpg' // 分享图标
     });

 //分享到QQ
 wx.onMenuShareQQ({
         title: '玩玩微信公众号Java版之六：微信网页授权', // 分享标题
         desc: '分享测试', // 分享描述
         link: 'http://www.cnblogs.com/cooldamon/p/7219400.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: 'http://damonhouse.iok.la/wechat/pic1.jpg' // 分享图标
     });

 //分享到QQ空间
 wx.onMenuShareQZone({
     title: '玩玩微信公众号Java版之六：微信网页授权', // 分享标题
     desc: '分享QQ空间测试', // 分享描述
     link: 'http://www.cnblogs.com/cooldamon/p/7219400.html', // 分享链接
     imgUrl: 'http://damonhouse.iok.la/wechat/pic1.jpg' // 分享图标
 });

 });

 wx.error(function(res){
     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
 });

 function shareMe()
 {
     //分享到QQ空间
     wx.onMenuShareQZone({
         title: '玩玩微信公众号Java版之六：微信网页授权', // 分享标题
         desc: '分享QQ空间测试', // 分享描述
         link: 'http://www.cnblogs.com/cooldamon/p/7219400.html', // 分享链接
         imgUrl: 'http://damonhouse.iok.la/wechat/pic1.jpg' // 分享图标
     });

 }

 </script>
 </head>
 <body>
 <button class="weui-btn weui-btn_plain-primary" onclick="shareMe();">欢迎分享</button>
 </body>
 </html>

另外这里对微信接口调用写了一个功能的方法，引入wechat_config.jsp

 <%@page import="com.wechat.pojo.WeChatJSAPISign"%>
 <%@page import="com.wechat.bl.WeChatJSAPIService"%>
 <%
 // 微信js-jdk 配置接口处理
 // 第一步，获取参数
 %>

 <%

 String url = request.getRequestURL().toString();
 System.out.println(url);
 WeChatJSAPIService tWeChatJSAPIService = new WeChatJSAPIService();

 WeChatJSAPISign tWeChatJSAPISign = tWeChatJSAPIService.getSignTicket(url);
 System.out.println( tWeChatJSAPISign.getAppId());
 System.out.println( tWeChatJSAPISign.getNoncestr());
 System.out.println( tWeChatJSAPISign.getTimestamp());
 System.out.println( tWeChatJSAPISign.getSignature());

 request.setAttribute("appid", tWeChatJSAPISign.getAppId());
 request.setAttribute("noncestr", tWeChatJSAPISign.getNoncestr());
 request.setAttribute("timestamp", tWeChatJSAPISign.getTimestamp());
 request.setAttribute("signature", tWeChatJSAPISign.getSignature());

 %>

其中说明：

1、引入http://res.wx.qq.com/open/js/jweixin-1.2.0.j

2、验证接口中请注意参数名称（这里粗心弄错了，导致验证失败），另外验证错误原因可参考官方错误说明：附录5-常见错误及解决方法.

3、对应的接口功能，最终实现在左上角的更多按钮，请参考页面：

4、最终实现效果如下（以分享到qq空间为例）：

这里多出了【分享到手机QQ】和【分享到QQ空间】两个按钮，点击【分享到QQ空间】，可看到：

恭喜你，成功做出了自己的分享页面！ 继续加油吧~