码迷,mamicode.com
首页 > Web开发 > 详细

js实现qq空间、微博以及豆瓣等平台分享

时间:2016-05-05 02:04:20      阅读:373      评论:0      收藏:0      [点我收藏+]

标签:

网页版分享

一直很好奇如何实现分享到qq空间和微博的功能,今晚正好没什么事,所以便去了解如何实现。可惜最后没找到如何通过js打开手机本地app并分享的实现代码(好像js办不到这一点,希望有了解的人能够指点一下),只能够打开相应地网页版进行分享。
具体代码如下:

<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>标签打开(或者其他打开链接的方式)以下链接:

‘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空间分享》

推荐到豆瓣

‘http://www.douban.com/recommend/?url=‘ + url + ‘&title=‘ + title

转发到新浪微博

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

使用部分浏览器自带的分享功能

既然不能找到有效的方法实现调用本地app进行分享,我们只能退而求其次,使用浏览器自带的分享功能实现分享(so dirty),而目前只找到调用手机版UC和QQ浏览器的代码实现。
推荐使用JefferyWang写的分享工具,简单方便,查看工具请戳这里~~
具体实现原理就是使用浏览器自带的内置对象(不同浏览器不一样)和提供的相应api来启动分享功能。这里需要注意的是,要根据不同系统(IOS/Android)和不同版本来做适配,核心代码如下:

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

以上代码截取自JefferyWang工具源码的nativeShare.js文件中,感兴趣的同学可以去了解下,至于其他浏览器就只能通过文字+图标指向相应的浏览器自带分享按钮位置(原谅我这么low的方法),从而实现app端到app端的分享。

js实现qq空间、微博以及豆瓣等平台分享

标签:

原文地址:http://www.cnblogs.com/Kygo4/p/5460395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!