使用原生JS實現QQ好友、QQ空間、新浪微博、騰訊微博分享功能

在分享功能中我們通常用的最多的幾個配置參數：分享的標題、分享的內容鏈接地址、分享描述信息以及分享的縮略圖地址，具體實現代碼如下：

function?(window,?document)?{
????var?shareMethodObj?=?{
????????//分享到騰訊微博
????????sharetotencentweibo:?function?(title,?url,?picurl)?{
????????????//?分享的標題
????????????title?=?encodeURIComponent(title?||?document.title);
????????????//?分享內容鏈接
????????????url?=?encodeURIComponent(url?||?window.location.href);
????????????//?分享圖片的路徑，多張圖片以＂|＂隔開，可選參數
????????????picurl?=?encodeURIComponent(picurl?||?'');
????????????var?shareqqstring?=?
????????????????'http://v.t.qq.com/share/share.php?title='?+?title?
????????????????+?'&url='?+?url?
????????????????+?'&pic='?+?picurl;
????????????//?在新窗口中打開
????????????window.open(shareqqstring,?'_blank');
????????},
????????//分享到新浪微博
????????sharetosina:?function?(title,?url,?picurl)?{
????????????//?分享的標題
????????????title?=?encodeURIComponent(title?||?document.title);
????????????//?分享內容鏈接
????????????url?=?encodeURIComponent(url?||?window.location.href);
????????????//?分享圖片的路徑，多張圖片以＂|＂隔開，可選參數
????????????picurl?=?encodeURIComponent(picurl?||?'');
????????????var?sharesinastring?=
????????????????'http://v.t.sina.com.cn/share/share.php?title='?+?title?
????????????????+?'&url='?+?url?
????????????????+?'&content=utf-8&sourceUrl='?+?url?
????????????????+?'&pic='?+?picurl;
????????????//?在新窗口中打開
????????????window.open(sharesinastring,?'_blank');
????????},
????????//?分享到QQ好友
????????sharetoqq:?function?(title,?url,?picurl)?{
????????????//?分享的標題
????????????title?=?encodeURIComponent(title?||?document.title);
????????????//?分享內容鏈接
????????????url?=?encodeURIComponent(url?||?window.location.href);
????????????//?分享圖片的路徑，多張圖片以＂|＂隔開，可選參數
????????????picurl?=?encodeURIComponent(picurl?||?'');
????????????var?shareqqzonestring?=?
????????????????'http://connect.qq.com/widget/shareqq/index.html?title='?+?title?
????????????????+?'&url='?+?url?
????????????????+?'&pics='?+?picurl;
????????????//?在新窗口中打開
????????????window.open(shareqqzonestring,?'_blank');
????????},
????????//分享到QQ空間
????????sharetoqqzone:?function?(title,?url,?picurl,?content)?{
????????????//?分享的標題
????????????title?=?encodeURIComponent(title?||?document.title);
????????????//?分享內容鏈接
????????????url?=?encodeURIComponent(url?||?window.location.href);
????????????//?分享圖片的路徑，多張圖片以＂|＂隔開，可選參數
????????????picurl?=?encodeURIComponent(picurl?||?'');
????????????//?分享描述
????????????content?=?encodeURIComponent(content?||?'');
????????????var?shareqqzonestring?=?
????????????????'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='?+?title?
????????????????+?'&desc='?+?content
????????????????+?'&url='?+?url?
????????????????+?'&pics='?+?picurl;
????????????//?在新窗口中打開
????????????window.open(shareqqzonestring,?'_blank');
????????}
????}
????window.shareMethodObj?=?shareMethodObj;
})(window,?document);

用法具體代碼如下：

//?分享配置參數
var?shareConfig?=?{
????shareTitle:?'分享設置的標題',
????shareImage:?'分享設置的縮略圖鏈接地址',
????shareContent:?'分享描述信息',
????shareUrl:?'分享頁面的鏈接地址'
}

//?分享到新浪微博
shareMethodObj.sharetosina(shareConfig.shareTitle,?shareConfig.shareUrl,?shareConfig.shareImage);

//?分享到QQ好友
shareMethodObj.sharetoqq(shareConfig.shareTitle,?shareConfig.shareUrl,?shareConfig.shareImage);

//?分享到QQ空間
shareMethodObj.sharetoqqzone(shareConfig.shareTitle,?shareConfig.shareUrl,?shareConfig.shareImage,?shareConfig.shareContent);

注意：分享的縮略圖不顯示問題：不能使用本地的圖片，必須使用圖片鏈接地址，還遇到一個特別坑的點是，不能使用七牛cdn的圖片，不知道是什么鬼，被坑了好久，我屮艸芔茻

本文由 mdnice 多平臺發布