欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

QQ、新浪微博、微信、QQ空间分享

程序员文章站 2022-06-26 13:28:31
...

将网站分享到第三方,如下:

1.引入jquery

2.js插件,代码如下:

(function (global, doc, factoryFn) {
    var factory = factoryFn(global, doc);

    if (!(typeof (ChePC) === 'object')) {
        ChePC = {};
    }
    ChePC.sharePage = ChePC.sharePage || factory;
    window.define && define(function (require, exports, module) {
        return factory;
    });
})(this, document, function (window, document) {
    var sharePage = function (options) {
        var that = this,
            defaultOpts = {
                config: {
                    shareUrl: window.location.href,
                    shareTitle: document.title ? document.title : '',
                    shareDescription: $("meta[name='description']").attr("content") ? $("meta[name='description']").attr(
                        "content") : '',
                    shareImg: document.getElementsByTagName("img")[0] ? document.getElementsByTagName("img")[0].src : ''
                },
                wxConfig: {
                    status: true,
                    shareBtnName: '.shareBtn_wx'
                },
                wbConfig: {
                    status: true,
                    shareBtnName: '.shareBtn_wb'
                },
                qqkjConfig: {
                    status: true,
                    shareBtnName: '.shareBtn_qqkj'
                },
                qqConfig: {
                    status: true,
                    shareBtnName: '.shareBtn_qq'
                }
            };
        that.opts = $.extend(defaultOpts, options);
        that._init();
        that.bindFun();
    };
    sharePage.prototype = {
        wxSharePopMaskEl: $("#wxSharePopMask"),
        wxSharePopEl: $("#wxSharePop"),
        protocol: window.location.protocol,
        _init: function () {
            var that = this;
            if (that.opts.wxConfig.status) {
                $("body").on("click", that.opts.wxConfig.shareBtnName, function (event) {
                    that.wxShare(event);
                });
            }
            if (that.opts.wbConfig.status && (!$(that.opts.wbConfig.shareBtnName).attr("href") || $(that.opts.wbConfig.shareBtnName)
                .attr("href").indexOf("#") == 0)) {
                that.wbShare();
            }
            if (that.opts.qqkjConfig.status && (!$(that.opts.qqkjConfig.shareBtnName).attr("href") || $(that.opts.qqkjConfig
                .shareBtnName).attr("href").indexOf("#") == 0)) {
                that.qqkjShare();
            }
            if (that.opts.qqConfig.status && (!$(that.opts.qqConfig.shareBtnName).attr("href") || $(that.opts.qqConfig.shareBtnName)
                .attr("href").indexOf("#") == 0)) {
                that.qqShare();
            }
        },
        wxShare: function (event) {
            //微信分享
            var that = this;
            that.methods.preventDefault(event);
            //绑定微信分享按钮点击事件
            if (that.wxSharePopEl.length == 0) {
                //添加弹窗样式
                that.methods.loadCssCode(that.cssCode);
                $("body").append(that.wxPopHtml);
                that.wxSharePopMaskEl = $("#wxSharePopMask");
                that.wxSharePopEl = $("#wxSharePop");
            }
            that.wxSharePopMaskEl.show();
            that.wxSharePopEl.show();
        },
        wbShare: function () {
            //微博分享
            var that = this,
                shareInfo = that.methods.getShareInfo(that.opts.wbConfig, that.opts)
                shareInfo.shareBtn.attr({
                    "href": '//service.weibo.com/share/share.php?url=' + encodeURIComponent(shareInfo.url) + '&title=' + encodeURIComponent(
                        shareInfo.title) + '&pic=' + encodeURIComponent(shareInfo.img) + '&appkey=2110961524&searchPic=false#_loginLayer_1487659638332',
                    "target": "_blank"
                });
        },
        qqkjShare: function () {
            //https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.autohome.com.cn/news/201805/917771.html?pvareaid=2028130&title=【图】最高降6.5万 Jeep大切诺基售价下调_汽车之家&pics=&summary=
            //QQ空间分享
            var that = this,
                shareInfo = that.methods.getShareInfo(that.opts.qqkjConfig, that.opts),
                shareImg = shareInfo.img.indexOf("//") != 0 ? shareInfo.img : that.protocol + shareInfo.img;
            shareInfo.shareBtn.attr({
                "href": 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(
                    shareInfo.url) + '&title=' + encodeURIComponent(shareInfo.title) + '&summary=' + encodeURIComponent(
                    shareInfo.description) + '&pics=' + encodeURIComponent(shareImg),
                "target": "_blank"
            });
        },
        qqShare: function () {
            //https://connect.qq.com/widget/shareqq/index.html?url=http://news.58che.com/news/2032726.html#0-sqq-1-34980-9737f6f9e09dfaf5d3fd14d775bfee85&title=英菲尼迪斯巴达勇士赛北京站 强者齐聚_英菲尼迪_58车&desc=&summary=&site=baidu
            //QQ空间分享
            var that = this,
                shareInfo = that.methods.getShareInfo(that.opts.qqConfig, that.opts);
            shareInfo.shareBtn.attr({
                "href": 'https://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(shareInfo.url) + '&title=' + encodeURIComponent(
                    shareInfo.title) + '&desc=&summary=' + encodeURIComponent(shareInfo.description) + '&site=58che',
                "target": "_blank"
            });
        },
        bindFun: function () {
            var that = this;
            $("body").on("click", "#wxSharePopMask,#wxSharePopCloseBtn", function () {
                $("#wxSharePopMask,#wxSharePop").hide();
            })
        },
        methods: {
            loadCssCode: function (code) {
                //动态添加样式表,以<style></style>方式添加到header 样式会立即生效
                var style = document.createElement('style');
                style.type = 'text/css';
                style.rel = 'stylesheet';
                try {
                    //for Chrome Firefox Opera Safari
                    style.appendChild(document.createTextNode(code));
                } catch (ex) {
                    //for IE
                    style.styleSheet.cssText = code;
                }
                var head = document.getElementsByTagName('head')[0];
                head.appendChild(style);
            },
            preventDefault: function (event) {
                //屏蔽默认行为
                var ev = event ? event : window.event;
                if (ev.preventDefault) {
                    ev.preventDefault();
                } else {
                    ev.returnValue = false;
                }
            },
            getShareInfo: function (btnConfig, opts) {
                //获取分享信息
                var shareBtn = $(btnConfig.shareBtnName),
                    shareTitle = shareBtn.attr("data-shareTitle") ? shareBtn.attr("data-shareTitle") : opts.config.shareTitle,
                    shareDescription = shareBtn.attr("data-shareDescription") ? shareBtn.attr("data-shareDescription") :
                        opts.config.shareDescription,
                    shareUrl = shareBtn.attr("data-shareUrl") ? shareBtn.attr("data-shareUrl") : opts.config.shareUrl,
                    shareImg = shareBtn.attr("data-shareImg") ? shareBtn.attr("data-shareImg") : opts.config.shareImg;
                return {
                    shareBtn: shareBtn,
                    title: shareTitle,
                    description: shareDescription,
                    url: shareUrl,
                    img: shareImg
                }
 
            }
        },
        cssCode: '.wxSharePopMask{display:none;position:fixed;top:0;left:0;z-index:110000;width:100%;height:100%;background:#000;overflow:hidden;opacity:0.3;filter:Alpha(opacity=30);}.wxSharePop{display:none;position:fixed;top:50%;left:50%;margin-left:-160px;margin-top:-160px;width:310px;height:320px;overflow:hidden;padding:20px 10px;background:#fff;border:1px solid #d8d8d8;z-index:110001;font-size:12px;font-family:"simsun";}.wxSharePopTitle{font-size:14px;height:16px;line-height:16px;}.wxSharePopCloseBtn{position:absolute;top:10px;right:10px;width:16px;height:16px;color:#999;font-size:20px;cursor:pointer;}.wxSharePopImg{display:block;width:220px;height:220px;margin:15px auto;}.wxSharePopDescript{line-height:26px;color:#666;}',
        wxPopHtml: '<div class="wxSharePopMask" id="wxSharePopMask"></div>\
                    <div class="wxSharePop" id="wxSharePop">\
                        <p class="wxSharePopTitle"><B>分享到微信朋友圈</B></p>\
                        <a class="wxSharePopCloseBtn" id="wxSharePopCloseBtn">×</a>\
                        <img src="//service.58che.com/qrcode/v1/qrcode/?info=' + window
            .location.href + '" class="wxSharePopImg">\
                        <p class="wxSharePopDescript">\
                            打开微信,点击底部的“发现”,<Br>\
                            使用“扫一扫”即可将网页分享至朋友圈。\
                        </p>\
                    </div>'
 
    }
    return sharePage;
});

3.用法:


这种调用方式 分享的title自动获取的是页面tittle 描述是页面的description,分享地址是当前页面url 分享的图片是当前页面第一张图

var shareFun=new ChePC.sharePage();

如需定制这些分享信息
需用以下方式调用

var shareFun=new ChePC.sharePage({config:{
			shareUrl:"url地址", //选填 分享地址 默认为当前页面地址
			shareTitle:"分享标题",     //选填 分享标题 默认为当前页面title
			shareDescription:"分享描述",
			shareImg:"分享图片地址"                   //选填 分享图片 默认为当前页面第一张图片
}});

4.效果如下:

QQ、新浪微博、微信、QQ空间分享