QQ、新浪微博、微信、QQ空間分享
阿新 • • 發佈：2019-01-24
將網站分享到第三方，如下：
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.效果如下：
