微信网页开发-分享功能自定义

最新推荐文章于 2024-05-09 00:57:36 发布

NameiCc

最新推荐文章于 2024-05-09 00:57:36 发布

阅读量861

点赞数 2

分类专栏：微信文章标签： JSSDK 微信分享网页

本文链接：https://blog.csdn.net/tingyu1995/article/details/88427059

版权

自定义分享并非所有公众号都支持，必须是通过微信认证的。可在公众号登陆后，开发->接口权限查看是否拥有分享接口权限。

1. 微信公众号配置

# JS接口安全域名配置

此处必须填写备案过的域名或路径，不能填写IP地址。

# IP白名单配置

实现自定义分享需要获取access_token，而白名单之内的IP才能进行获取，此处配置的是IP地址。

2. HTML页面

HTML页面调用JSSDK进行功能实现。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
		自定义内容!
	</body>	
	<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>	
	<script>
		window.onload=function(){
			$.ajax({
				url: "此处填写获取签名的url",
				type: "GET",
				dataType: "json",
				data: {"url":location.href.split('#')[0]},
				success: function(data) {
					wx.config({
						debug: false,
						appId: data.dataMap.appid, //appId
						timestamp: data.dataMap.timestamp, //生成签名的时间戳
						nonceStr: data.dataMap.noncestr, //生成签名的随机串
						signature: data.dataMap.signature, //签名
						jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] //需要使用的JS接口列表

					});
					wx.ready(function() {
						//判断当前客户端版本是否支持指定JS接口
						wx.checkJsApi({
							jsApiList: [
								'onMenuShareAppMessage', 'onMenuShareTimeline'
							],
							success: function(res) {							
								
							}
						});
						//分享给朋友
						wx.onMenuShareAppMessage({ 
							title: '家的方向，更是心的归向', // 分享标题
							desc: '年的味道，近乡愈浓', // 分享描述
							link: 'xxx.xxxx.com/xxx/test.html', // 分享链接，该链接域名或路径必须与公众号JS安全域名一致
							imgUrl: 'xxx.xxxx.com/xxx/test.jpg', // 分享图标
							success: function () {
							  // 设置成功
							  
							}
							
						}),
						//分享到朋友圈
						wx.onMenuShareTimeline({ 
							title: '家的方向，更是心的归向', // 分享标题
							desc: '年的味道，近乡愈浓', // 分享描述
							link: 'xxx.xxxx.com/xxx/test.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'xxx.xxxx.com/xxx/test.jpg', // 分享图标
							success: function () {
							  // 设置成功
							  
							}
						})
					});
					wx.error(function(res){
						//验证失败
						console.log("验证失败！"+res);
					});
				},
				error: function() {
					console.log("签名请求失败！");
				}
			})
		}

	</script>
</html>

3. Java服务端实现

# Action服务类，接受HTML页面请求，返回签名。

package com.tingyu.action;

import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

import com.opensymphony.xwork2.ActionContext;
import com.tingyu.util.BaseUtil;
import com.tingyu.u