一键分享到QQ空间、QQ好友、新浪微博

前端开发 IT小强💘xqitw.cn 2018-10-22 16:27:56 2110人围观 0人评论 0 0

摘要: 通过qq空间、qq聊天和新浪微博平台提供的接口，实现把网页中对应的图片、标题、描述的信息参数用javascript获取后传进接口中，实现一键分享的功能。

使用到的接口(测试时需要登录，网址和图片必须是公网的，不能localhost)

1.分享到QQ空间接口：https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片&summary=你的分享描述信息

2.分享给QQ好友接口：http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述

3.分享到新浪微博接口：http://service.weibo.com/share/share.php?url=你的分享网址&sharesource=weibo&title=你的分享标题&pic=你的分享图片&appkey=你的key，需要在新浪微博开放平台中申请

JS代码整合

/* 一键分享 */
XqShare = {
    config: {
        sina_key: "",
        get_url: false,
        default_pic: "",
    },
    share: {
        //分享到QQ空间
        qzone: function (url, title, description, pic) {
            pic = XqShare._getPic(pic, "||");
            url = XqShare._getUrl(url);
            title = XqShare._getTitle(title);
            description = XqShare._getDescription(description);
            let baseUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            let shareUrl = baseUrl + "url=" + url + "&title=" + title + "&pics=" + pic + "&desc=&summary=" + description;
            XqShare._doShare(shareUrl);
        },
        // 分享到QQ好友
        qq: function (url, title, description, pic) {
            pic = XqShare._getPic(pic);
            pic = pic.length >= 1 ? pic[0] : "";
            url = XqShare._getUrl(url);
            title = XqShare._getTitle(title);
            description = XqShare._getDescription(description);
            let baseUrl = "https://connect.qq.com/widget/shareqq/index.html?";
            let shareUrl = baseUrl + "url=" + url + "&title=" + title + "&pics=" + pic + "&desc=&summary=" + description;
            XqShare._doShare(shareUrl);
        },
        // 分享到新浪微博
        sina: function (url, title, pic, key) {
            key = (key && key !== "" && key !== null) ? key : XqShare.config.sina_key;
            pic = XqShare._getPic(pic, "||");
            url = XqShare._getUrl(url);
            title = XqShare._getTitle(title);
            let baseUrl = "https://service.weibo.com/share/share.php?";
            let shareUrl = baseUrl + "url=" + url + "&title=" + title + "&pic=" + pic + "&appkey=" + key + "&searchPic=true";
            XqShare._doShare(shareUrl);
        }
    },
    _getUrl: function (url) {
        if (url && url !== "" && url !== null) {
            return encodeURIComponent(url);
        }
        return encodeURIComponent(window.location.href);
    },
    _getTitle: function (title) {
        if (title && title !== "" && title !== null) {
            return encodeURIComponent(title);
        }
        return encodeURIComponent(document.title);
    },
    _getDescription: function (description) {
        if (description && description !== "" && description !== null) {
            return encodeURIComponent(description);
        }
        description = "";
        let meta = document.getElementsByTagName("meta");
        for (let i in meta) {
            if (typeof meta[i].name !== "undefined" && meta[i].name.toLowerCase() === "description") {
                description = meta[i].content;
            }
        }
        return encodeURIComponent(description);
    },
    _getPic: function (pic, glue) {
        let imgReg = /^data:image\/(.*?);base64,(.*)/;
        imgReg = new RegExp(imgReg);
        let picArray = [];
        let isGlue = (glue && glue !== "" && glue !== null) === true;
        if (pic && pic !== "" && pic !== null) {
            picArray = encodeURIComponent(pic).split(",");
            return isGlue ? picArray.join(glue) : picArray;
        }
        if (XqShare.config.default_pic && XqShare.config.default_pic !== "" && XqShare.config.default_pic !== null) {
            picArray.push(XqShare.config.default_pic);
        }
        let img = document.getElementsByTagName("img");
        for (let i = 0; i < img.length; i++) {
            let imgSrc = img[i].src;
            if (picArray.indexOf(imgSrc) === -1 && picArray.length < 6 && imgSrc !== "" && imgSrc !== null && !imgReg.test(decodeURIComponent(imgSrc))) {
                picArray.push(encodeURIComponent(imgSrc));
            }
        }
        console.log(picArray);
        return isGlue ? picArray.join(glue) : picArray;
    },
    _doShare: function (url) {
        if (XqShare.config.get_url === true) {
            return url;
        } else {
            window.open(url, "newwindow");
        }
    }
};

/* 一键分享 */

XqShare = {

config: {

sina_key: "",

get_url: false,

default_pic: "",

share: {

//分享到QQ空间

qzone: function (url, title, description, pic) {

pic = XqShare._getPic(pic, "||");

url = XqShare._getUrl(url);

title = XqShare._getTitle(title);

description = XqShare._getDescription(description);

let baseUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";

let shareUrl = baseUrl + "url=" + url + "&title=" + title + "&pics=" + pic + "&desc=&summary=" + description;

XqShare._doShare(shareUrl);

// 分享到QQ好友

qq: function (url, title, description, pic) {

pic = XqShare._getPic(pic);

pic = pic.length >= 1 ? pic[0] : "";

url = XqShare._getUrl(url);

title = XqShare._getTitle(title);

description = XqShare._getDescription(description);

let baseUrl = "https://connect.qq.com/widget/shareqq/index.html?";

let shareUrl = baseUrl + "url=" + url + "&title=" + title + "&pics=" + pic + "&desc=&summary=" + description;

XqShare._doShare(shareUrl);

// 分享到新浪微博

sina: function (url, title, pic, key) {

key = (key && key !== "" && key !== null) ? key : XqShare.config.sina_key;

pic = XqShare._getPic(pic, "||");

url = XqShare._getUrl(url);

title = XqShare._getTitle(title);

let baseUrl = "https://service.weibo.com/share/share.php?";

let shareUrl = baseUrl + "url=" + url + "&title=" + title + "&pic=" + pic + "&appkey=" + key + "&searchPic=true";

XqShare._doShare(shareUrl);

}

_getUrl: function (url) {

if (url && url !== "" && url !== null) {

return encodeURIComponent(url);

}

return encodeURIComponent(window.location.href);

_getTitle: function (title) {

if (title && title !== "" && title !== null) {

return encodeURIComponent(title);

}

return encodeURIComponent(document.title);

_getDescription: function (description) {

if (description && description !== "" && description !== null) {

return encodeURIComponent(description);

}

description = "";

let meta = document.getElementsByTagName("meta");

for (let i in meta) {

if (typeof meta[i].name !== "undefined" && meta[i].name.toLowerCase() === "description") {

description = meta[i].content;

}

return encodeURIComponent(description);

_getPic: function (pic, glue) {

let imgReg = /^data:image\/(.*?);base64,(.*)/;

imgReg = new RegExp(imgReg);

let picArray = [];

let isGlue = (glue && glue !== "" && glue !== null) === true;

if (pic && pic !== "" && pic !== null) {

picArray = encodeURIComponent(pic).split(",");

return isGlue ? picArray.join(glue) : picArray;

}

if (XqShare.config.default_pic && XqShare.config.default_pic !== "" && XqShare.config.default_pic !== null) {

picArray.push(XqShare.config.default_pic);

}

let img = document.getElementsByTagName("img");

for (let i = 0; i < img.length; i++) {

let imgSrc = img[i].src;

if (picArray.indexOf(imgSrc) === -1 && picArray.length < 6 && imgSrc !== "" && imgSrc !== null && !imgReg.test(decodeURIComponent(imgSrc))) {

picArray.push(encodeURIComponent(imgSrc));

}

console.log(picArray);

return isGlue ? picArray.join(glue) : picArray;

_doShare: function (url) {

if (XqShare.config.get_url === true) {

return url;

} else {

window.open(url, "newwindow");

}

};

如何使用

1. 首页引入上面的js文件

2. 进行简单的配置

<script type="text/javascript">
    // 默认图片
    XqShare.config.default_pic = "https://www.xqitw.cn/logo.png";
    // 新浪KEY
    XqShare.config.sina_key = "1802288757";
</script>

// 默认图片

XqShare.config.default_pic = "https://www.xqitw.cn/logo.png";

// 新浪KEY

XqShare.config.sina_key = "1802288757";

</script>

3. 在页面中使用

<a href="javascript:XqShare.share.sina();">分享到新浪微博</a>
<a href="javascript:XqShare.share.qzone();">分享到QQ空间</a>
<a href="javascript:XqShare.share.qq();">分享到QQ好友</a>

<a href="javascript:XqShare.share.sina();">分享到新浪微博</a>

<a href="javascript:XqShare.share.qzone();">分享到QQ空间</a>

<a href="javascript:XqShare.share.qq();">分享到QQ好友</a>