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.效果如下：