1. 程式人生 > >手機網頁版分享功能程式碼(目前只適用於UC和qq瀏覽器)

手機網頁版分享功能程式碼(目前只適用於UC和qq瀏覽器)

css:

#nativeShare {
    font-size: 13px;
    border-top: 1px solid #fff;
    margin-top: 5px;
}

#nativeShare .list {
    width: 95%;
    margin: 0 auto;
    text-align: center;
}

#nativeShare .list span {
    cursor:pointer;
    width: auto;
    display: inline-block;
    text-align: center;
    margin: 10px 10px 0 0;
}

#nativeShare .list span i {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}
#nativeShare .weibo i {
    background-image: url('../image/weibo.png');
    background-size: cover;
}

#nativeShare .weixin i {
    background-image: url('../image/weixin_friend.png');
    background-size: cover;
}

#nativeShare .weixin_timeline i {
    background-image: url('../image/weixin.png');
    background-size: cover;
}

#nativeShare .qq i {
    background-image: url('../image/qq.png');
    background-size: cover;
}

#nativeShare .qzone i {
    background-image: url('../image/qqzone.png');
    background-size: cover;
}

#nativeShare .more i {
    background-image: url('../image/more.png');
    background-size: cover;
}

js:

var nativeShare = function (elementNode, config) {
    if (!document.getElementById(elementNode)) {
        return false;
    }

    var qApiSrc = {
        lower: "http://3gimg.qq.com/html5/js/qb.js",
        higher: "http://jsapi.qq.com/get?api=app.share"
    };
    var bLevel = {
        qq: {forbid: 0, lower: 1, higher: 2},
        uc: {forbid: 0, allow: 1}
    };
    var UA = navigator.appVersion;
    var isqqBrowser = (UA.split("MQQBrowser/").length > 1) ? bLevel.qq.higher : bLevel.qq.forbid;
    var isucBrowser = (UA.split("UCBrowser/").length > 1) ? bLevel.uc.allow : bLevel.uc.forbid;
    var version = {
        uc: "",
        qq: ""
    };
    var isWeixin = false;

    config = config || {};
    this.elementNode = elementNode;
    this.url = config.url || document.location.href || '';
    this.title = config.title || document.title || '';
    this.desc = config.desc || document.title || '';
    this.img = config.img || document.getElementsByTagName('img').length > 0 && document.getElementsByTagName('img')[0].src || '';
    this.img_title = config.img_title || document.title || '';
    this.from = config.from || window.location.host || '';
    this.ucAppList = {
        sinaWeibo: ['kSinaWeibo', 'SinaWeibo', 11, '新浪微博'],
        weixin: ['kWeixin', 'WechatFriends', 1, '微信好友'],
        weixinFriend: ['kWeixinFriend', 'WechatTimeline', '8', '微信朋友圈'],
        QQ: ['kQQ', 'QQ', '4', 'QQ好友'],
        QZone: ['kQZone', 'QZone', '3', 'QQ空間']
    };

    this.share = function (to_app) {
        var title = this.title, url = this.url, desc = this.desc, img = this.img, img_title = this.img_title, from = this.from;
        if (isucBrowser) {
            to_app = to_app == '' ? '' : (platform_os == 'iPhone' ? this.ucAppList[to_app][0] : this.ucAppList[to_app][1]);
            if (to_app == 'QZone') {
                B = "mqqapi://share/to_qzone?src_type=web&version=1&file_type=news&req_type=1&image_url="+img+"&title="+title+"&description="+desc+"&url="+url+"&app_name="+from;
                k = document.createElement("div"), k.style.visibility = "hidden", k.innerHTML = '<iframe src="' + B + '" scrolling="no" width="1" height="1"></iframe>', document.body.appendChild(k), setTimeout(function () {
                    k && k.parentNode && k.parentNode.removeChild(k)
                }, 500);
            }
            if (typeof(ucweb) != "undefined") {
                ucweb.startRequest("shell.page_share", [title, title, url, to_app, "", "@" + from, ""])
            } else {
                if (typeof(ucbrowser) != "undefined") {
                    ucbrowser.web_share(title, title, url, to_app, "", "@" + from, '')
                } else {
                }
            }
        } else {
                to_app = to_app == '' ? '' : this.ucAppList[to_app][2];
                var ah = {
                    url: url,
                    title: title,
                    description: desc,
                    img_url: img,
                    img_title: img_title,
                    to_app: to_app,//微信好友1,騰訊微博2,QQ空間3,QQ好友4,生成二維碼7,微信朋友圈8,啾啾分享9,複製網址10,分享到微博11,創意分享13
                    cus_txt: "請輸入此時此刻想要分享的內容"
                };
                ah = to_app == '' ? '' : ah;
                browser.app.share(ah)
        }
    };

    this.html = function() {
        var position = document.getElementById(this.elementNode);
        var html = '<div class="label"></div>'+
            '<div class="list clearfix">'+
            '<span data-app="sinaWeibo" class="nativeShare weibo"><i></i>新浪</span>'+
            '<span data-app="weixin" class="nativeShare weixin"><i></i>微信</span>'+
            '<span data-app="weixinFriend" class="nativeShare weixin_timeline"><i></i>朋友圈</span>'+
            '<span data-app="QQ" class="nativeShare qq"><i></i>QQ</span>'+
            '<span data-app="QZone" class="nativeShare qzone"><i></i>QQ空間</span>'+
            '<span data-app="" class="nativeShare more"><i></i>更多</span>'+
            '</div>';
        position.innerHTML = html;
    };

    this.isloadqqApi = function () {
        if (isqqBrowser) {
            var b = (version.qq < 5.4) ? qApiSrc.lower : qApiSrc.higher;
            var d = document.createElement("script");
            var a = document.getElementsByTagName("body")[0];
            d.setAttribute("src", b);
            a.appendChild(d)
        }
    };

    this.getPlantform = function () {
        ua = navigator.userAgent;
        if ((ua.indexOf("iPhone") > -1 || ua.indexOf("iPod") > -1)) {
            return "iPhone"
        }
        return "Android"
    };

    this.is_weixin = function () {
        var a = UA.toLowerCase();
        if (a.match(/MicroMessenger/i) == "micromessenger") {
            return true
        } else {
            return false
        }
    };

    this.getVersion = function (c) {
        var a = c.split("."), b = parseFloat(a[0] + "." + a[1]);
        return b
    };

    this.init = function () {
        platform_os = this.getPlantform();
        version.qq = isqqBrowser ? this.getVersion(UA.split("MQQBrowser/")[1]) : 0;
        version.uc = isucBrowser ? this.getVersion(UA.split("UCBrowser/")[1]) : 0;
        if ((isqqBrowser && version.qq < 5.4 && platform_os == "iPhone") || (isqqBrowser && version.qq < 5.3 && platform_os == "Android")) {
            isqqBrowser = bLevel.qq.forbid
        } else {
            if (isqqBrowser && version.qq < 5.4 && platform_os == "Android") {
                isqqBrowser = bLevel.qq.lower
            } else {
                if (isucBrowser && ((version.uc < 10.2 && platform_os == "iPhone") || (version.uc < 9.7 && platform_os == "Android"))) {
                    isucBrowser = bLevel.uc.forbid
                }
            }
        }
        this.isloadqqApi();
        if (isqqBrowser || isucBrowser) {
            this.html();
        } else {
            document.write('');
//             this.html();
        }
    };

    this.init();

    var share = this;
    var items = document.getElementsByClassName('nativeShare');
    for (var i=0;i<items.length;i++) {
        items[i].onclick = function(){
            share.share(this.getAttribute('data-app'));
        }
    }

    return this;
};

html:

<div id="nativeShare"></div>
    <script>
        var config = {
            url:window.location.href,
            title:document.title,
            desc: '    ',
            img:'    ',
            img_title:'    ',
            from:'    '
        };
        var share_obj = new nativeShare('nativeShare',config);
    </script>