兼容性最好的手机端网站分享工具

要做手机端分享工具，在网上找了好久，有的设计界面很好，有的兼容性很好。各取所长，整合一起了一个新的分享应用 NativeShare

兼容性：

• 移动端几乎所有浏览器都支持分享到 QQ 和 QQ 空间
• QQ 浏览器
• UC 浏览器
• 微信自带浏览器（只能设置文案，分享需要用户手动点击右上角）
• QQ 自带浏览器（只能设置文案，分享需要用户手动点击右上角）
• QQ 空间 APP（只能设置文案，分享需要用户手动点击右上角）
• android 百度浏览器

存在的问题：

• UC 浏览器安卓端不能设置 icon
• 百度浏览器安卓端不能指定分享

以下是应用代码。

<script
    type="text/javascript"
    src="__PUBLIC__/Home/share/nativeHtml.js"
></script>
<script
    type="text/javascript"
    src="__PUBLIC__/Home/share/NativeShare.js"
></script>
<link rel="stylesheet" href="__PUBLIC__/Home/share/nativeShare.css" />
<a id="btn" class="hd-share" onclick="showshare()"></a
><!--这里的id(btn)也是有用的-->
<span>商品详情</span>
<script>
    function showshare() {
        $("#nativeShare").css("display", "block");
    }
    $(function () {
        $(".share_shutdown").click(function () {
            $("#nativeShare").css("display", "none");
        });
    });
    var guide_img = "__PUBLIC__/Home/share/icon/guide.png"; //微信内置浏览器时指示右上解图片路径
</script>

<div id="nativeShare"></div>
<script>
    var share_obj = new nativeShare("nativeShare"); //加载html
    var nativeShare = new NativeShare();
    var shareData = {
        title: "{$content.title}",
        desc: "{:$content['share_spec']?$content['share_spec']:$content['title']}",
        // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
        link: "http://{:$_SERVER['SERVER_NAME']}{:$_SERVER['REQUEST_URI']}",
        icon: "http://{:$_SERVER['SERVER_NAME']}__ROOT__{$content.picture}",
        // 不要过于依赖以下两个回调，很多浏览器是不支持的
        success: function () {
            console.log("success");
        },
        fail: function () {
            console.log("fail");
        },
    };
    nativeShare.setShareData(shareData);
    function call(command) {
        try {
            nativeShare.call(command);
        } catch (err) {
            // 如果不支持，你可以在这里做降级处理
            alert(err.message);
        }
    }
</script>

以下是引用的文件包

share.rar

以下是可能的几种情况的效果图

1. UC\QQ 浏览器

   

2. 普通浏览器

   

3. 微信内置浏览器