使用原生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 多平臺發布
*請認真填寫需求信息,我們會在24小時內與您取得聯系。