H5页面实现微信分享示例代码

uncle 源码教程 2025年06月7日

0 收藏 0 点赞 819 浏览 1890 个字

摘要 :

要在HTML页面中实现微信分享功能，您需要使用微信提供的JS SDK。以下是一个简单的示例，演示如何在HTML页面中添加微信分享功能： <!DOCTYPE html> ……

要在HTML页面中实现微信分享功能，您需要使用微信提供的JS SDK。以下是一个简单的示例，演示如何在HTML页面中添加微信分享功能：

<!DOCTYPE html>  
<html>  
<head>  
  <title>微信分享示例</title>  
  <meta charset="UTF-8">  
</head>  
<body>  
  <h1>欢迎使用微信分享功能！</h1>  
    
  <!-- 引入微信JS SDK -->  
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>  
    
  <script>  
    // 微信JS SDK配置  
    wx.config({  
      appId: 'YOUR_APP_ID', // 替换为您的微信公众平台App ID  
      timestamp: 'YOUR_TIMESTAMP', // 替换为您的服务器时间戳  
      nonceStr: 'YOUR_NONCE_STR', // 替换为您的随机字符串  
      signature: 'YOUR_SIGNATURE', // 替换为您的签名  
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的微信JS接口列表  
    });  
      
    // 页面加载完成后的回调函数  
    wx.ready(function() {  
      // 在这里编写分享到朋友圈和分享给好友的代码  
      // 例如，分享到朋友圈：  
      wx.onMenuShareTimeline({  
        title: '分享标题', // 分享标题  
        link: '分享链接', // 分享链接  
        imgUrl: '分享图片链接', // 分享图片链接  
        success: function() {  
          // 分享成功的回调函数  
          console.log('分享成功');  
        },  
        cancel: function() {  
          // 取消分享的回调函数  
          console.log('取消分享');  
        }  
      });  
        
      // 例如，分享给好友：  
      wx.onMenuShareAppMessage({  
        title: '分享标题', // 分享标题  
        link: '分享链接', // 分享链接  
        imgUrl: '分享图片链接', // 分享图片链接  
        success: function() {  
          // 分享成功的回调函数  
          console.log('分享成功');  
        },  
        cancel: function() {  
          // 取消分享的回调函数  
          console.log('取消分享');  
        }  
      });  
    });  
      
    // 页面卸载前的回调函数，用于清理资源等操作  
    wx.error(function() {  
      console.log('微信JS SDK加载失败');  
    });  
  </script>  
</body>  
</html>

上述代码中的YOUR_APP_ID、YOUR_TIMESTAMP、YOUR_NONCE_STR和YOUR_SIGNATURE需要您根据您的实际情况进行替换。这些值通常由您的微信公众平台或开发者工具提供。确保正确配置这些值，以便微信JS SDK能够正常工作。

赏

微信扫一扫

支付宝扫一扫

版权：转载请注明出处：https://www.zuozi.net/1869.html