微信分享内容给朋友、朋友圈、QQ、QQ空间等

最新推荐文章于 2024-08-04 02:37:22 发布

城墙上奔跑de二帅

最新推荐文章于 2024-08-04 02:37:22 发布

阅读量6.5k

点赞数 4

分类专栏：微信文章标签： JS 微信开发者分享朋友圈

本文链接：https://blog.csdn.net/shuai825644975/article/details/46575081

版权

微信专栏收录该内容

3 篇文章 0 订阅

订阅专栏

示例网页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="author" content="ershuai" />
<meta name="Copyright" content="ershuai" />


<title>二帅</title>


<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="../scripts/common/wx_share/wechat_common_share.js"></script>
</head>
<body>
	init share
</body>
<script type="text/javascript">
	$(document).ready(function() {
		var initUrl = window.location.href;
		var shareLogo = "http://img3.imgtn.bdimg.com/it/u=224917259,3388622236&fm=21&gp=0.jpg";
		var lineLink = "https://www.baidu.com";
		var shareContent = "分享的内容描述";
		var shareTitle = "分享的标题描述";
		initShare(initUrl, lineLink, shareTitle, shareContent, shareLogo);
	});
</script>
</html>

wechat_common.share.js

var init_share_url = "http://[host]/wechat/initWechatConfig.xhtml";


/**
 * 初始化分享
 * @param initUrl			当前初始化网页地址
 * @param lineLink			点击后跳转地址
 * @param shareTitle		分享标题
 * @param shareContent		分享内容
 * @param shareLogo			分享logo
 */
function initShare(initUrl, lineLink, shareTitle, shareContent, shareLogo) {
	$.ajax({
		type : "post",
		url : init_share_url,
		data : {
			"initUrl" : initUrl,
			"initType" : "jsapi"
		},
		dataType : "json",
		error : function(request) {
			alert('初始化分享失败，请稍后重试');
		},
		success : function(ajaxRes) {
			var state = ajaxRes.state;
			if (state == 1) {
				var data = ajaxRes.data;
				//初始化微信配置
				wxShareConfig(data.appId, data.timestamp, data.nonceStr, data.signature);
				//分享准备
				wxShareReady(lineLink, shareTitle, shareContent, shareLogo);
			} else {
				alert(ajaxRes.msg);
			}
		}
	});
};


/**
 * 初始化微信分享配置
 * @param appId
 * @param timestamp
 * @param nonceStr
 * @param signature
 */
function wxShareConfig(appId, timestamp, nonceStr, signature) {
	wx.config({
		debug: false,
		appId: appId,
		timestamp: timestamp,
		nonceStr: nonceStr,
		signature: signature,
		jsApiList: [
			'checkJsApi',
			'onMenuShareTimeline',
			'onMenuShareAppMessage',
			'onMenuShareQQ',
			'onMenuShareQZone'
		]
	});
	
	wx.error(function (res) {
		alert(res.errMsg);
	});
}


/**
 * 分享准备
 * @param lineLink
 * @param shareTitle
 * @param shareContent
 * @param shareLogo
 */
function wxShareReady(lineLink, shareTitle, shareContent, shareLogo) {
	wx.ready(function () {
		//获取“分享到朋友圈”
		wx.onMenuShareTimeline({
		    title: shareTitle, // 分享标题
		    link: lineLink, // 分享链接
		    imgUrl: shareLogo, // 分享图标
		    success: function () { 
		        // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		    }
		});
		
		//获取“分享给朋友”
		wx.onMenuShareAppMessage({
		    title: shareTitle, // 分享标题
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享链接
		    imgUrl: shareLogo, // 分享图标
		    type: 'link', // 分享类型,music、video或link，不填默认为link
		    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		    success: function () { 
		        // 用户确认分享后执行的回调函数
		    	//alert('已分享');
		    	//window.location.href = "https://www.baidu.com";
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		    	//alert('已取消');
		    }
		});
		
		//获取“分享到QQ”
		wx.onMenuShareQQ({
		    title: shareTitle, // 分享标题
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享链接
		    imgUrl: shareLogo, // 分享图标
		    success: function () { 
		       // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		       // 用户取消分享后执行的回调函数
		    }
		});
		
		//获取“分享到QQ空间”
		wx.onMenuShareQZone({
		    title: shareTitle, // 分享标题
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享链接
		    imgUrl: shareLogo, // 分享图标
		    success: function () { 
		       // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		       // 用户取消分享后执行的回调函数
		    }
		});
		
		//获取“分享到腾讯微博”
		wx.onMenuShareWeibo({
		    title: shareTitle, // 分享标题
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享链接
		    imgUrl: shareLogo, // 分享图标
		    success: function () { 
		       // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		    }
		});
	});
}

到这里，前端就完事了

现在实现，init_share_url方法

var init_share_url = "http://[host]/wechat/initWechatConfig.xhtml";

initWechatConfig方法内容：

（因为我这个有多个服务号要维护，是根据rawId来判断的；一般情况是不用rawId参数的）

@RequestMapping("/initWechatConfig.xhtml")
	public void initWechatConfig(HttpServletRequest request, HttpServletResponse response) throws Exception {
		try {
			String initUrl = getParams("initUrl");//当前网页地址
			String initType = getParams("initType");
			if (CommonUtil.isNull(initUrl) || CommonUtil.isNull(initType)) {//判断null
				throw new BizException(ErrorMsg.PARAMS_NULL);
			}
			String rawId = getParams("rawId");
			if (CommonUtil.isNull(rawId)) {
				rawId = Constants.RawId_broker;
			}
			HashMap<String, Object> respMap = new HashMap<String, Object>();
			if ("jsapi".equals(initType)) {//初始化分享
				String noncestr = RandomUtil.nextInt(initType.toUpperCase(), 100, 999);//随机数，用uuid什么的也可以
				String timestamp = DateUtil.getTimestampWx();//时间戳 Long.toString(System.currentTimeMillis() / 1000)
				String signature = null;
				//获取
				Ticket ticket = this.wechatService.getJsapiTicket(rawId);
				signature = SHA1Util.signForJsapiTicket(ticket.getTicket(), noncestr, timestamp, initUrl);
				respMap.put("appId", Constants.getAppId(rawId));
				respMap.put("timestamp", timestamp);
				respMap.put("nonceStr", noncestr);
				respMap.put("signature", signature);
			} else if ("pay".equals(initType)) {//初始化支付
				
			}
			writeSuccMsg(response, respMap);
		} catch (Exception e) {
			log.error("初始化微信配置 异常：", e);
			writeErrorMsg(response, e.getMessage());
		}
	}

RequestAddr的参数配置

// 获取access_token的接口地址（GET） API要求每天限制2000 - 全局access_token
public static final String access_token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";

// 获取ticket_url的接口地址（GET） API
public static final String ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
// 获取ticket_url的参数
public static final String ticket_url_params = "jsapi_ticket=JSAPI_TICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=INIT_URL";

getJsapiTicket方法

public Ticket getJsapiTicket(String rawId) throws Exception {
		//请求全局access_token
		AccessToken accessToken = getAccessToken(rawId);
		//获取jsapi_ticket
		Ticket ticket = WeChatUtils.getJsapiTicket(accessToken.getAccess_token());
		return ticket;
	}

/**
	 * 获取全局access_token 公共方法
	 * @author ershuai 
	 * @version V1.0 
	 * @param rawId
	 * @return
	 * @throws Exception
	 */
	public AccessToken getAccessToken(String rawId) throws Exception {
		//请求全局access_token
		AccessToken accessToken = WeChatUtils.getAccessToken(rawId);
		return accessToken;
	}

WeChatUtils类

/**
	 * 凭证access_token的获取方法	-	全局access_token
	 * @author ershuai
	 * @version V1.0 
	 * @return
	 * @throws Exception
	 */
	public static AccessToken getAccessToken(String rawId) throws Exception {
		String appId = Constants.getAppId(rawId);
		String appSecret = Constants.getAppSecret(rawId);
		//url
		String access_token_url = RequestAddr.access_token_url;
		//匹配参数
		access_token_url = access_token_url.replace("APPID", appId);
		access_token_url = access_token_url.replace("SECRET", appSecret);
		//匹配参数
		//请求
		String respStr = WebUtils.doGet(access_token_url, null);
		AccessToken accessToken = null;
		if (null != respStr) {
			accessToken = JSON.parseObject(respStr, AccessToken.class);
		}
		return accessToken;
	}

	
	/**
	 * 凭证JsapiTicket的获取方法
	 * @author ershuai 
	 * @version V1.0 
	 * @param accessToken
	 * @return
	 * @throws Exception
	 */
	public static Ticket getJsapiTicket(String accessToken) throws Exception {
		//url
		String jsapi_ticket_url = RequestAddr.ticket_url.replace("ACCESS_TOKEN", accessToken);
		//匹配参数
		jsapi_ticket_url = jsapi_ticket_url.replace("ACCESS_TOKEN", accessToken);
		//请求
		String respStr = WebUtils.doGet(jsapi_ticket_url, null);
		Ticket ticket = null;
		if (null != respStr) {
			ticket = JSON.parseObject(respStr, Ticket.class);
		}
		return ticket;
	}

SHA1Util类

/**
	 * sign签名，对于 jsapi_ticket
	 * @author ershuai
	 * @version V1.0
	 * @param jsapiTicket
	 * @param noncestr
	 * @param timestamp
	 * @param initUrl
	 * @return
	 */
	public static String signForJsapiTicket(String jsapiTicket, String noncestr, String timestamp, String initUrl) {
		String signature = null;
		// 注意这里参数名必须全部小写，且必须有序
		String signatureStr = RequestAddr.ticket_url_params;
		signatureStr = signatureStr.replace("JSAPI_TICKET", jsapiTicket);
		signatureStr = signatureStr.replace("NONCESTR", noncestr);
		signatureStr = signatureStr.replace("TIMESTAMP", timestamp);
		signatureStr = signatureStr.replace("INIT_URL", initUrl);
		try {
			MessageDigest crypt = MessageDigest.getInstance("SHA-1");
			crypt.reset();
			crypt.update(signatureStr.getBytes("UTF-8"));
			signature = byteToHex(crypt.digest());
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		return signature;
	}

	private static String byteToHex(final byte[] hash) {
		Formatter formatter = new Formatter();
		for (byte b : hash) {
			formatter.format("%02x", b);
		}
		String result = formatter.toString();
		formatter.close();
		return result;
	}

PS：做完以上流程，应该就可以完成分享功能了；出现最多的错误应该就是签名不正确，这个问题检查几个微信参数就好了；

config:invalid url domain 错误是需要去公众号设置 - 功能设置 - JS接口安全域名；配置域名