第一步:后台创建注册页面的jssdkservlet:(到这一步,需要提前注册号账号,并设置好js的安全域名,域名配置不能含有"http://"),该步骤主要是生成数字签名到前台[其中的token,jsticket获取需要参照官网api去获取]
package com.xxxxx.weixin.util;
import java.io.IOException;
import java.io.PrintWriter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.alibaba.fastjson.JSON;
import com.handkoo.util.CommonUtil;
import com.handkoo.weixin.common.entity.JsAPISign;
/**
* jssdk的配置servlet
*
* @author cp
*
*/
public class JSSDKConfigServlet extends HttpServlet {
private static final Logger logger = LoggerFactory.getLogger(JSSDKConfigServlet.class);
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
try {
//1、获取AccessToken
String accessToken = CommonUtil.token;
//2、获取Ticket
String jsapi_ticket = CommonUtil.jsapiticket;
//3、时间戳和随机字符串
String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串
String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳
logger.info("accessToken:" + accessToken + "\njsapi_ticket:" + jsapi_ticket + "\n时间戳:" + timestamp
+ "\n随机字符串:" + noncestr);
//4、获取url
String url = request.getParameter("regurl");
logger.info("获取到待注册页面的url为:" + url);
//5、将参数排序并拼接字符串
String str = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url="
+ url;
//6、将字符串进行sha1加密
String signature = SHA1(str);
logger.info("参数:" + str + "\n签名:" + signature);
// 发送到前台
JsAPISign jsAPISign = new JsAPISign(false, CommonUtil.appid, timestamp, noncestr, signature);
out.print(JSON.toJSON(jsAPISign));
} catch (Exception e) {
e.printStackTrace();
out.print("error");
}
out.flush();
out.close();
}
/**
* 签名算法
* @param decript
* @return
*/
public static String SHA1(String decript) {
try {
MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
digest.update(decript.getBytes());
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexString = new StringBuffer();
// 字节数组转换为 十六进制 数
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexString.append(0);
}
hexString.append(shaHex);
}
return hexString.toString();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return "";
}
}
第二步:前台页面注册,需要引入微信jssdk的js文件(注意ajax请求,url为当前的页面的路径除了#之外的内容)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<title>测试微信分享功能</title>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/css/weui.min.css" />
<link rel="stylesheet"
href="<%=request.getContextPath()%>/css/jquery-weui.min.css" />
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-weui.min.js"></script>
<script type="text/javascript"
src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<div class="weui-grids">
<div id="share_pyq" class="weui-grid js_grid">
<div class="weui-grid__icon">
<img src="images/icon_nav_button.png" alt="">
</div>
<p class="weui-grid__label">分享朋友圈</p>
</div>
<div id="share_py" class="weui-grid js_grid">
<div class="weui-grid__icon">
<img src="images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">分享给朋友</p>
</div>
<div id="share_qq" class="weui-grid js_grid">
<div class="weui-grid__icon">
<img src="images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">分享到qq</p>
</div>
<div id="share_txwb" class="weui-grid js_grid">
<div class="weui-grid__icon">
<img src="images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">分享到腾讯微博</p>
</div>
<div id="share_qqzone" class="weui-grid js_grid">
<div class="weui-grid__icon">
<img src="images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">分享到qq空间</p>
</div>
</div>
<%-- 交互的js --%>
<script type="text/javascript">
$(function(){
// 页面加载
$.ajax({
url:"<%=request.getContextPath()%>/JSSDKConfig",
type:"post",
data:{
regurl:"xxxxxxx"// 注册页面的url
},
dataType:"json"
}).done(function(data){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp:data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
// 微信服务器注册完毕
wx.ready(function(){
wx.onMenuShareTimeline({
title: '来自xxxxx的分享', // 分享标题
link: 'xxxxxx', // 分享链接
imgUrl: 'xxxxxx', // 分享图标
success: function () {
alert("分享成功");
},
cancel: function () {
alert("未分享!");
}
});
wx.onMenuShareAppMessage({
title: 'xxxx', // 分享标题
desc: 'xxxxx', // 分享描述
link: 'xxxx', // 分享链接
imgUrl: 'xxxxx', // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
alert("分享成功!");
},
cancel: function () {
alert("分享取消!");
}
});
wx.onMenuShareQQ({
title: '来自xxxx的分享', // 分享标题
desc: '你好,这里是xxxx....我是Kin', // 分享描述
link: ' /', // 分享链接
imgUrl: '', // 分享图标
success: function () {
alert("分享成功!");
},
cancel: function () {
alert("分享取消!");
}
});
wx.onMenuShareWeibo({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
alert("分享成功!");
},
cancel: function () {
alert("分享取消!");
}
});
wx.onMenuShareQZone({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
alert("分享成功!");
},
cancel: function () {
alert("分享取消!");
}
});
});
// 加载失败
wx.error(function(res){
console.log(res);
});
});
// 分享事件
// 朋友圈
$("#share_pyq").click(function(){
alert("请点击右上角,分享朋友圈");
});
// 朋友
$("#share_py").click(function(){
alert("请点击右上角,分享");
});
// qq
$("#share_qq").click(function(){
alert("请点击右上角,分享qq");
});
// 腾讯微博
$("#share_txwb").click(function(){
alert("请点击右上角,分享腾讯微博");
});
// 分享到qq空间
$("#share_qqzone").click(function(){
alert("请点击右上角,分享qq空间");
});
});
</script>
</body>
</html>