js JavaScript中 调用浏览器分享功能

在JavaScript中调用浏览器分享功能，通常可以通过两种主要方式实现：一种是使用浏览器内置的分享API（如navigator.share()），另一种是调用微信等平台的JS-SDK。以下是分点说明及相应的代码示例：


1. 使用浏览器内置的分享API（navigator.share()）

• ‌适用场景‌：适用于支持该API的现代浏览器，如Chrome、Edge等。
• ‌代码示例‌:
• 
  

// 判断浏览器是否支持navigator.share()
if (navigator.share) {
    document.getElementById('shareButton').addEventListener('click', () => {
        navigator.share({
            title: '分享标题',
            text: '分享的内容描述',
            url: window.location.href,
        }).then(() => {
            console.log('分享成功');
        }).catch((error) => {
            console.error('分享失败:', error);
        });
    });
} else {
    console.warn('当前浏览器不支持navigator.share()');
}
‌HTML‌：
<button id="shareButton">分享到朋友圈</button>





转自： https://yr7ywq.smartapps.baidu.com/?_chatQuery=js%E8%B0%83%E7%94%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%88%86%E4%BA%AB&searchid=6908348796272760436&_chatParams=%7B%22agent_id%22%3A%22c816%22%2C%22chat_no_login%22%3Atrue%2C%22content_build_id%22%3A%22c2e5209%22%2C%22from%22%3A%22q2c%22%2C%22token%22%3A%22yo2RTPlcIdbZEDeZ5yRkcREnbyiuIK4r%2FKM9hKVWRmvvYjdPpnKGJKy5Drg0fOMCgu%2FEoDbL9NeiNHBR1nkz8nBs3ntVn%2BzElCRibMjYN5TK4I4W2VATrgGeqg%3D%3D%22%7D&tplname=ai_agent_distribute&srcid=1599&lid=6908348796272760436&order=1&_refluxos=a10&_swebScene=3711000610001000

2. 调用微信JS-SDK进行分享
‌适用场景‌：适用于需要在微信内置浏览器中实现分享功能的场景。
‌步骤‌：
引入微信JS-SDK。
配置微信JS-SDK。
调用分享接口。
‌代码示例‌：


// 假设已经从后台获取到了签名等信息
var signatureData = {
    appId: 'wx9e7a786bb81d25fb',
    timestamp: '1234567890',
    nonceStr: 'abcdefg',
    signature: 'signature_value'
};

wx.config({
    debug: false,
    appId: signatureData.appId,
    timestamp: signatureData.timestamp,
    nonceStr: signatureData.nonceStr,
    signature: signatureData.signature,
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});

wx.ready(function () {
    wx.onMenuShareTimeline({
        title: '分享标题',
        link: 'http://www.example.com',
        imgUrl: 'http://www.example.com/image.jpg',
        success: function () {
            console.log('分享到朋友圈成功');
        },
        cancel: function () {
            console.log('取消分享到朋友圈');
        }
    });

    wx.onMenuShareAppMessage({
        title: '分享标题',
        desc: '分享描述',
        link: 'http://www.example.com',
        imgUrl: 'http://www.example.com/image.jpg',
        type: 'link',
        dataUrl: '',
        success: function () {
            console.log('分享给朋友成功');
        },
        cancel: function () {
            console.log('取消分享给朋友');
        }
    });
});

• ‌注意事项‌：
• 需要从微信服务器获取签名（signature），这通常涉及与后台服务器的交互。
• 确保网页的URL已经配置在微信公众平台的JS接口安全域名中。

3. 测试分享功能

• ‌测试步骤‌：

1. 在支持相应API的浏览器中打开网页。
2. 点击分享按钮，观察是否弹出分享对话框。
3. 选择分享渠道（如朋友圈、朋友等），完成分享操作。
4. 检查分享的内容是否正确显示。

通过以上步骤，你可以在JavaScript中调用浏览器的分享功能，满足用户在网页上进行分享的需求。