本文主要介绍了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("×tamp=").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，点击分享，能够出现以下界面，说明已经可以实现分享了！