HTML5网页如何调用浏览器APP的微信分享功能

如题所述

举报该文章

相关建议 2017-04-17

一、html5手机网站调用微信分享包括：

获取网络类型。

调起客户端的图片播放组件。

调用微信扫描二维码。

判断是否安装对应的应用。

发送邮件。

分享到微信朋友圈。

二、代码如下：

[html] view plain copy
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>HTML5网页如何调用浏览器APP的微信分享功能</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        <link rel="stylesheet" type="text/css" href="css/test.css" />
        <style type="text/css">
            html,
            body {
                margin: 0;
                padding: 0;
            }
        </style>

    </head>

    <body>
        <span class="shareBtn" id="toshare">点击分享到</span>
        <div id="nativeShare"></div>
        <script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/nativeShare.js"></script>
        <script type="text/javascript">
            $("#toshare").bind("click", function() {
                    var config = {
                        url: '', //分享url
                        title: '', //内容标题
                        desc: '', //描述
                        img: '', //分享的图片
                        img_title: '', //图片名称
                        from: '' //来源
                    };
                    var share_obj = new nativeShare('nativeShare', config);
                    $(".am-share").addClass("am-modal-active");
                    if ($(".sharebg").length > 0) {
                        $(".sharebg").addClass("sharebg-active");
                    } else {
                        $("body").append('<div class="sharebg"></div>');
                        $(".sharebg").addClass("sharebg-active");
                    }
                    $(".sharebg-active,.share_btn").click(function() {
                        $(".am-share").removeClass("am-modal-active");
                        setTimeout(function() {
                            $(".sharebg-active").removeClass("sharebg-active");
                            $(".sharebg").remove();
                        }, 300);
                    })
            });
        </script>

    </body>

</html>

三、输出结果：

四、其他分享接口：

A.获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

B.获取“分享给朋友”按钮点击状态及自定义分享内容接口。

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

C.获取“分享到QQ”按钮点击状态及自定义分享内容接口。

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
       // 用户确认分享后执行的回调函数
    },
    cancel: function () {
       // 用户取消分享后执行的回调函数
    }
});

D.获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。

wx.onMenuShareWeibo({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
       // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

E.获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
       // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/sp728q7ps2smssv84p.html

其他看法

无其他回答

相似回答

大家正在搜