微信H5分享示例

最新推荐文章于 2024-06-22 15:10:18 发布

今夏探视

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量205

点赞数 8

文章标签：微信 html5 javascript 前端

本文链接：https://blog.csdn.net/lipengjie1/article/details/139836632

版权

在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>

今夏探视

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信H5分享示例

在H5页面（通常指使用HTML5技术开发的网页）分享内容到微信好友或朋友圈，需要使用微信的JS-SDK来实现。方法来配置JS-SDK。这一步通常需要提供一系列的配置参数，如。方法来确保JS-SDK已经准备就绪，然后调用。标签中引入微信JS-SDK的脚本文件。（分享给好友）等接口来设置分享内容。等，这些参数通常由后端服务提供。：在页面加载完成后，调用。：配置完成后，可以调用。
复制链接

扫一扫