微信公众平台开发-分享接口的实现

最新推荐文章于 2024-06-25 03:20:55 发布

xiaopengyaonixi

最新推荐文章于 2024-06-25 03:20:55 发布

阅读量6.3k

点赞数 8

分类专栏：微信公众号

微信公众号专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：后台创建注册页面的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>