springboot 基于JS-SDK实现微信分享（一）

本文主要介绍了SpringBoot 基于JS-SDK实现自定义微信分享，并通过本地测试的方式进行调试，文中通过微信实现分享流程及示例代码进行非常详细的介绍，希望本文对开发爱好者学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

一 准备工作

1.微信公众平台appID和appsecret

2.微信开发文档（相当烂，但一定要看）

3.微信web开发者工具

二 开发步骤

1.申请接口测试号并进行JS接口安全域名设置

接口测试号申请。点击访问，选择接口测试号申请，如下图所示：

或者直接访问 ：申请测试账号页面 如下图所示：

点击登录进行扫码登录，如下图所示：

登录后如下图所示：

配置JS接口安全域名

2.windows下配置本地回环地址

找到windows系统中 hosts 文件，配置回环地址的域名，C:\Windows\System32\drivers\etc

配置回环地址

3. 下载微信web开发者工具，可以在PC 进行测试

下载微信web开发者工具，点击访问下载页面如下图所示：

下载完成之后，安装微信web开发者工具，一步一步傻瓜式安装。

4.参照微信开发文档实现

点击访问微信JS-SDK说明文档 如下图所示：

JSSDK使用步骤

步骤一：绑定域名（上面已经操作了）

步骤二：引入JS文件（下面实战代码中会介绍到如何使用）

步骤三：通过config接口注入权限验证配置（下面实战代码中会介绍到如何使用）

步骤四：通过ready接口处理成功验证

步骤五：通过error接口处理失败验证

接口调用说明

5.代码实现

上面步骤步骤三中的 signature是一个重要的参数，生成它需要获取 jsapi_ticket，而生成 jsapi_ticket 需要通过 access_token。

获取signature流程如下：

• 获取 access_token 然后根据 access_token 获取 jsapi_ticket 。
• 排序 noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）,url（当前网页的URL，不包含#及其后面部分）4个参数拼接例如：noncestr=XX&jsapi_ticket=XX&jtimestamp=XX&jurl=XX
• 然后通过sha1加密拼接的4个参数获取到signature

初始化微信JSSDK配置信息

 @Controller
 @RequestMapping("/weixin")
 public class WeiXinDemoController {

    @Autowired
    private WeiXinService weiXinService;
    @Autowired
    private WXConfig weiXinConfig;

    /**
     * 初始化微信JSSDK配置信息
     * @param request
     * @param response
     * @param shareUrl 分享地址
     * @return
     * @throws Exception
     */
    @RequestMapping("/initWXJSSDKConfigInfo")
    @ResponseBody
    public String initWXJSConfig (HttpServletRequest request, HttpServletResponse response, String shareUrl) throws Exception{
       Map map = weiXinService.initJSSDKConfigInfo(shareUrl);
       String json = weiXinService.mapToJson(map);
       return json;
    }
 }

初始化JSSDK配置信息，配置信息有：noncestr（随机字符串）、有效的jsapi_ticket、timestamp（时间戳）、shareUrl（当前网页的URL，不包含#及其后面部分）appid（公众号 appid）

 /**
  * @description 初始化JSSDK配置信息
  * @param shareUrl 分享的url地址
  * @return
  * @throws Exception
  */
 public Map initJSSDKConfigInfo(String shareUrl) throws Exception {
    String accessToken = this.getJSSDKAccessToken();
    String jsapiTicket = this.getJSSDKJsapiTicket(accessToken);
    String timestamp = Long.toString(System.currentTimeMillis() / );
    String nonceStr = UUID.randomUUID().toString();
    String signature = this.buildJSSDKSignature(jsapiTicket,timestamp,nonceStr,shareUrl);
    Map<String,String> map = new HashMap<String,String>();
    map.put("shareUrl", shareUrl);
    map.put("jsapi_ticket", jsapiTicket);
    map.put("nonceStr", nonceStr);
    map.put("timestamp", timestamp);
    map.put("signature", signature);
    map.put("appid", weiXinConfig.getAppID());
    return map;
 }

 

获取 JSSDK
access_token 

 　　/**
      * @description 获取JSSDK的认证token
      * @return 返回JSSDK的认证token
      */
     public String getJSSDKAccessToken() {
         String token = null;
         String url = WXContants.JSSDK_ACCESSTOKEN.replaceAll(WXContants.REPLACE_FEILD_APPID,
                 weiXinConfig.getAppID()).replaceAll(WXContants.REPLACE_FEILD_APPSECRET,
                 weiXinConfig.getAppsecret());
         String json = postRequestForWeiXinService(url);
         Map map = jsonToMap(json);
         if (map != null) {
             token = (String) map.get("access_token");
         }
         return token;
     }

获取 JSSDK jsapi_ticket

     /**
      * @description 获取JSSDK的ticket
      * @param token JSSDK的认证token
      * @return 返回JSSDK的ticket
      */
     public String getJSSDKJsapiTicket(String token) {
       String url = WXContants.JSSDK_TICKET.replaceAll(WXContants.REPLACE_FEILD_ACCESS_TOKEN, token);
       String json = postRequestForWeiXinService(url);
       Map map = jsonToMap(json);
       String ticket = null;
       if (map != null) {
           ticket = (String) map.get("ticket");
       }
       return ticket;
     }

拼接 noncestr（随机字符串）, 有效的jsapi_ticket、 timestamp（时间戳）、url（当前网页的URL，不包含#及其后面部分）并通过sha1进行加密

      /**
      * @description 构建分享链接的签名
      * @param ticket
      * @param nonceStr
      * @param timestamp
      * @param url
      * @return
      * @throws Exception
      */
     public static String buildJSSDKSignature(String ticket,String timestamp,String nonceStr ,String url) throws Exception {
         StringBuffer signaStr = new StringBuffer();
         signaStr.append("jsapi_ticket=").append(ticket);
         signaStr.append("&noncestr=").append(nonceStr);
         signaStr.append("&timestamp=").append(timestamp);
         signaStr.append("&url=").append(url);
         return sha1(signaStr.toString());
     }

     /**
      * @description sha1 加密JSSDK微信配置参数获取签名
      * @param signaStr 构建分享链接的签名
      * @return 返回加密签名
      */
     public static String sha1(String signaStr) throws Exception {
         MessageDigest md = MessageDigest.getInstance("SHA-1");
         byte[] digest = md.digest(signaStr.getBytes());
         return byteToStr(digest).toLowerCase();
     }
     /**
      * @description 将字节数组转换为十六进制字符串
      * @param byteArray 待转换的字节数组
      * @return
      */
     private static String byteToStr(byte[] byteArray) {
         String strDigest = "";
         for (int i = ; i < byteArray.length; i++) {
             strDigest += byteToHexStr(byteArray[i]);
         }
         return strDigest;
     }

     /**
      * @description  将字节转换为十六进制字符串
      * @param mByte
      * @return
      */
     private static String byteToHexStr(byte mByte) {
         char[] Digit = { '', '', '', '', '', '', '', '', '', '', 'A', 'B', 'C', 'D', 'E', 'F' };
         char[] tempArr = new char[];
         tempArr[] = Digit[(mByte >>> ) & 0X0F];
         tempArr[] = Digit[mByte & 0X0F];
         String s = new String(tempArr);
         return s;
     }

基础工具方法

 /**
      * @description  将map转换成json字符串
      * @param map map对象
      * @return json字符串
      */
     public String mapToJson(Map map){
         Gson gson = new Gson();
         String json = gson.toJson(map);
         return json;
     }

     /**
      * @description  将json字符串转换成map字符串
      * @param json json字符串
      * @return map对象
      */
     private Map jsonToMap(String json) {
         Gson gons = new Gson();
         Map map = gons.fromJson(json, new TypeToken<Map>(){}.getType());
         return map;
     }

     private String postRequestForWeiXinService(String accessTokenUrl) {
         ResponseEntity<String> postForEntity = restTemplate.postForEntity(accessTokenUrl, null, String.class);
         String json = postForEntity.getBody();
         return json;
     }

     private String getRequestForWeiXinService(String getUserInfoUrl) {
         ResponseEntity<String> postForEntity = restTemplate.getForEntity(getUserInfoUrl.toString(), String.class);
         String json = postForEntity.getBody();
         return json;
     }

wxShare.js 主要是获取JSSDK配置信息并定义分享功能处理。具体代码如下：

 /***用户点击分享到微信圈后加载接口接口*******/
 $.post("/weixin/initWXJSSDKConfigInfo",{"shareUrl":window.location.href.split('#')[]},function(data,status){
     data=eval("("+data+")");
     wx.config({
         debug: false,
         appId: data.appid,
         timestamp:data.timestamp,
         nonceStr:data.nonceStr,
         signature:data.signature,
         jsApiList: [
             'checkJsApi',
             'onMenuShareTimeline',
             'onMenuShareAppMessage',
             'onMenuShareQQ',
             'onMenuShareWeibo',
             'onMenuShareQZone',
             //'updateAppMessageShareData',
             //'updateTimelineShareData',
             //'hideOptionMenu',
         ]
     });
     var shareTitle = $("#wx_share_span").data("shareTitle");
     if(!shareTitle){
        shareTitle = $("title").html();
     }
     var shareImg = $("#wx_share_span").data("shareImg");
     if(!shareImg){
        //shareImg = common.bp()+'/m_images/shareImg.jpg';
     }
     var shareLink = $("#wx_share_span").data("shareLink");
     if(!shareLink){
        shareLink = window.location.href.split('#')[];
     }
     var shareDesc = $("#wx_share_span").data("shareDesc");
     if(!shareDesc){
        shareDesc = $("meta[name=description]").attr("content");
     }
     wx.ready(function(){
        // alert("准备分享");
         wx.onMenuShareTimeline({
             title : shareTitle, // 分享标题
             link : shareLink, // 分享链接
             imgUrl : shareImg, // 分享图标
             success : function() {
                 // 用户确认分享后执行的回调函数
                 //alert("分享成功");
             },
             cancel : function() {
                 // 用户取消分享后执行的回调函数
                 //alert("分享取消");
             }
         });
         //wx.hideOptionMenu();/!***隐藏分享菜单****!/
         wx.onMenuShareAppMessage({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareImg, // 分享图标
            success: function () {
            // 用户确认分享后执行的回调函数
            },
            cancel: function () {
            // 用户取消分享后执行的回调函数
            }
        });
         wx.onMenuShareQQ({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
            // 用户确认分享后执行的回调函数
            },
            cancel: function () {
            // 用户取消分享后执行的回调函数
            }
        });
        wx.onMenuShareQZone({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
            // 用户确认分享后执行的回调函数
            },
            cancel: function () {
            // 用户取消分享后执行的回调函数
            }
        });
         Wx.checkJsApi({
             jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareWeibo'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
             success: function(res) {
                 // 以键值对的形式返回，可用的api值true，不可用为false
                 // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
             }
         });
         //wx.hideOptionMenu();/!***隐藏分享菜单****!/
         wx.updateAppMessageShareData({
             title: shareTitle, // 分享标题
             desc: shareDesc, // 分享描述
             link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
             imgUrl: shareImg, // 分享图标
             success: function () {
                 // 用户确认分享后执行的回调函数
             },
             cancel: function () {
                 // 用户取消分享后执行的回调函数
             }
         });
         wx.updateTimelineShareData({
             title: shareTitle, // 分享标题
             link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
             imgUrl: shareImg, // 分享图标
             success: function () {
                 // 用户确认分享后执行的回调函数
             },
             cancel: function () {
                 // 用户取消分享后执行的回调函数
             }
         });
         wx.onMenuShareWeibo({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
            // 用户确认分享后执行的回调函数
            },
            cancel: function () {
            // 用户取消分享后执行的回调函数
            }
        });
     });
 });

分享页面该页面需要引入wxShare.js和jweixin-1.6.0.js，并且通过在隐藏的span标签上定义自定义分享的内容，具体代码如下：

 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <title>微信JS-SDK分享</title>
     <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}" ></script>
     <script type="text/javascript" th:src="@{/js/wxShare.js}"></script>
     <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 </head>
 <body>
     <span id="wx_share_span" style="display: none"></span>
     <h1>SpringMVC + Thymeleaf Hello World example</h1>
     <p th:text="${content}"></p> <!-- ${...}变量表达式 -->
     <script type="text/javascript">
         $(document).ready(function(){
             $("#wx_share_span").data("shareTitle", "微信JS-SDK分享");
             $("#wx_share_span").data("shareDesc", "一个简单的基于微信JS-SDK分享的demo");
             //$("#wx_share_span").data("shareLink", "/wxShare");
             $("#wx_share_span").data("shareImg", "http://www.zcg.com:8090/img/img.png");
         });
     </script>
 </body>
 </html>

6.测试

打开微信开发者工具，在地址栏输入http://www.zcg.com:8090/weixin/wxShare，点击分享，能够出现以下界面，说明已经可以实现分享了！

gitee源码地址：https://gitee.com/zcgxj/zxj-boot-wx-share.git