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

html-css018

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

一、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 () { 

        // 用户取消分享后执行的回调函数

    }

})

这个的话,微信已经不支持了。是否分享H5是用户的一个权限,对于用户分享这个事情是他的个人行为,我们不能去过分的干预,这样的话会涉及到一个诱导分享和强制分享的问题。

现在的话,唯一的做法就是在H5里加一个分享按钮,但是这个分享按钮的目的不是说让用户一键分享朋友圈,而是提示他您可以去分享这个H5,做一个提示作用,然后用户根据提示可以在H5页面的右上角,一般正常是有三个点,那么我们可以做一个提示,去指向这三个点,最后点开以后有真正的微信分享按钮,用户再去选择要不要分享。

这和微信推送html5页面是同一个原理,微信公众平台本身没有这个存储空间,所以就需要有个服务器或者第三方托管来承载制作好的html5游戏;

1.通常微信都有第三方合作平台,直接调用第三方接口,然后将html5游戏封装文件统一打包上传到第三方服务端。

2.倘若有服务器空间,则直接将html5游戏打包放在网站根目录文件下,在微信端直接调用服务器端的地址即可;

3.可以在微信平台通过文字或链接跳转的形式,实现html5游戏页面的转换。