以下是一个简单的 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>