js實現qq空間、微博以及豆瓣等平臺分享

時間 2019-11-12

原文原文鏈接

網頁版分享

一直很好奇如何實現分享到qq空間和微博的功能，今晚正好沒什麼事，因此便去了解如何實現。惋惜最後沒找到如何經過js打開手機本地app並分享的實現代碼(好像js辦不到這一點，但願有了解的人可以指點一下)，只可以打開相應地網頁版進行分享。
具體代碼以下：
javascript

<script type="text/javascript">
(function() {
    var p = {
        url: "http://lesty612.github.io/",
        showcount: '1',
        /*是否顯示分享總數,顯示：'1'，不顯示：'0' */
        desc: '我是分享理由',
        /*默認分享理由(可選)*/
        summary: '我是summary',
        /*分享摘要(可選)*/
        title: '我是title',
        /*分享標題(可選)*/
        site: 'lesty612',
        /*分享來源 如：騰訊網(可選)*/
        pics: 'http://lesty612.github.io/images/default_avatar.jpg',
        /*分享圖片的路徑(可選)*/
        style: '202',
        width: 105,
        height: 31
    };
    var s = [];
    for (var i in p) {
        s.push(i + '=' + encodeURIComponent(p[i] || ''));
    }
    document.write(['<a version="1.0" class="qzOpenerDiv" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?', s.join('&'), '" target="_blank">分享</a>'].join(''));
})();
</script>
<script src="http://qzonestyle.gtimg.cn/qzone/app/qzlike/qzopensl.js#jsdate=20111201" charset="utf-8"></script>

這個是包含圖標(以及分享數量)的實現代碼，須要導入相應地js文件。具體能夠在QQ互聯 > Qzone分享組件裏查看詳細代碼和具體細節
固然通常都用更簡單的方法，能夠直接用<a></a>標籤打開(或者其餘打開連接的方式)如下連接:php

'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&pics=' + pics
/* 其餘具體參數可參照上面代碼，按照實際狀況增刪 */

分享到qq好友

<script type="text/javascript">
(function() {
    var p = {
        /*獲取URL，可加上來自分享到QQ標識，方便統計*/
        /*分享理由(風格應模擬用戶對話),支持多分享語隨機展示（使用|分隔）*/url: "http://lesty612.github.io/",
        desc: '自從看了Lesty的博客，感受天黑都不怕了',
        /*分享標題(可選)*/
        title: '我是title',
        /*分享摘要(可選)*/
        summary: '我是內容摘要',
        /*分享圖片(可選)*/
        pics: 'http://lesty612.github.io/images/default_avatar.jpg',
        /*視頻地址(可選)*/
        flash: '',
        /*分享來源(可選) 如：QQ分享*/
        site: 'lesty612',
        style: '201',
        width: 32,
        height: 32
    };
    var s = [];
    for (var i in p) {
        s.push(i + '=' + encodeURIComponent(p[i] || ''));
    }
    document.write(['<a class="qcShareQQDiv" href="http://connect.qq.com/widget/shareqq/index.html?', s.join('&'), '" target="_blank">分享到QQ</a>'].join(''));
})();
</script>
<script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset=""utf-8"></script>

具體能夠在QQ互聯 > QQ分享組件裏查看詳細代碼和具體細節
簡易方法同上《qq空間分享》html

轉發到新浪微博

'http://v.t.sina.com.cn/share/share.php?url=' + url + '&title=' + title

使用部分瀏覽器自帶的分享功能

既然不能找到有效的方法實現調用本地app進行分享，咱們只能退而求其次，使用瀏覽器自帶的分享功能實現分享(so dirty)，而目前只找到調用手機版UC和QQ瀏覽器的代碼實現。
推薦使用JefferyWang寫的分享工具，簡單方便，查看工具請戳這裏~~
具體實現原理就是使用瀏覽器自帶的內置對象(不一樣瀏覽器不同)和提供的相應api來啓動分享功能。這裏須要注意的是，要根據不一樣系統(IOS/Android)和不一樣版原本作適配，核心代碼以下：java

UC瀏覽器下

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 {
    }
}

QQ瀏覽器下

if (isqqBrowser && !isWeixin) {
    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;
    if (typeof(browser) != "undefined") {
        if (typeof(browser.app) != "undefined" && isqqBrowser == bLevel.qq.higher) {
            browser.app.share(ah)
        }
    } else {
        if (typeof(window.qb) != "undefined" && isqqBrowser == bLevel.qq.lower) {
            window.qb.share(ah)
        } else {
        }
    }
} else {
}