
以下是一个简单的 HTML 页面示例,包含了一个国内常见的分享功能,使用了社交媒体分享按钮,例如微信、微博和 QQ 空间。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 分享按钮的样式 */
.share-button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
cursor: pointer;
}
</style></head><body>
<h1>欢迎来到分享页面</h1>
<p>请点击下面的按钮将此页面分享到不同的社交媒体平台。</p>
<!-- 微信分享按钮 -->
<div class="share-button" id="wechat-share">微信分享</div>
<!-- 微博分享按钮 -->
<div class="share-button" id="weibo-share">微博分享</div>
<!-- QQ 空间分享按钮 -->
<div class="share-button" id="qqzone-share">QQ 空间分享</div>
<script>
$(document).ready(function() {
// 微信分享按钮点击事件
$("#wechat-share").click(function() {
// 微信分享的 URL 接口,需要替换为实际的微信分享接口,这里只是示例
var shareUrl = "https://api.weixin.qq.com/share?url=" + encodeURIComponent(window.location.href);
// 模拟打开微信分享接口,实际情况可能需要与微信的 SDK 集成
window.open(shareUrl, "_blank");
alert("请在微信中打开分享页面,并进行操作。");
});
// 微博分享按钮点击事件
$("#weibo-share").click(function() {
// 微博分享的 URL 接口,使用微博的分享接口,这里将页面标题和 URL 作为参数传递
var title = encodeURIComponent(document.title);
var url = encodeURIComponent(window.location.href);
var shareUrl = "https://service.weibo.com/share/share.php?url=" + url + "&title=" + title;
// 打开微博分享页面
window.open(shareUrl, "_blank");
});
// QQ 空间分享按钮点击事件
$("#qqzone-share").click(function() {
// QQ 空间分享的 URL 接口,将页面标题和 URL 作为参数传递
var title = encodeURIComponent(document.title);
var url = encodeURIComponent(window.location.href);
var shareUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + url + "&title=" + title;
// 打开 QQ 空间分享页面
window.open(shareUrl, "_blank");
});
});
</script>