在H5页面（通常指使用HTML5技术开发的网页）分享内容到微信好友或朋友圈，需要使用微信的JS-SDK来实现。
-
引入JS-SDK：在H5页面的
<head>标签中引入微信JS-SDK的脚本文件。 -
配置JS-SDK：在页面加载完成后，调用
wx.config方法来配置JS-SDK。这一步通常需要提供一系列的配置参数，如appId、timestamp、nonceStr、signature等，这些参数通常由后端服务提供。 -
调用分享接口：配置完成后，可以调用
wx.ready方法来确保JS-SDK已经准备就绪，然后调用wx.onMenuShareTimeline（分享到朋友圈）或wx.onMenuShareAppMessage（分享给好友）等接口来设置分享内容。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>微信H5分享示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- 引入微信JS-SDK -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<h1>微信H5分享示例</h1>
<p>点击下方按钮分享到微信</p>
<button id="shareToTimeline">分享到朋友圈</button>
<button id="shareToFriend">分享给好友</button>
<script>
// 假设后端已经提供了这些配置参数
var wxConfig = {
beta: true, // 必须这么写，否则wx.invoke无法调用
debug: false, // 开启调试模式
appId: 'YOUR_APP_ID', // 必填，企业号的corpid
timestamp: YOUR_TIMESTAMP, // 必填，生成签名的时间戳
nonceStr: 'YOUR_NONCE_STR', // 必填，生成签名的随机串
signature: 'YOUR_SIGNATURE',// 必填，签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
};
// 配置JS-SDK
wx.config(wxConfig);
// 分享到朋友圈
document.getElementById('shareToTimeline').onclick = function() {
wx.ready(function() {
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '朋友圈分享标题', // 分享标题
link: 'http://www.example.com', // 分享链接
imgUrl: 'http://www.example.com/path/to/img.jpg', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
alert('已分享到朋友圈');
},
cancel: function() {
// 用户取消分享后执行的回调函数
alert('已取消分享');
}
});
});
};
// 分享给好友
document.getElementById('shareToFriend').onclick = function() {
wx.ready(function() {
// 分享给好友
wx.onMenuShareAppMessage({
title: '好友分享标题', // 分享标题
desc: '好友分享描述', // 分享描述
link: 'http://www.example.com', // 分享链接
imgUrl: 'http://www.example.com/path/to/img.jpg', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
alert('已分享给好友');
},
cancel: function() {
// 用户取消分享后执行的回调函数
alert('已取消分享');
}
});
});
};
</script>
</body>
</html>