h5怎麽做分享到QQ 、朋友圈、微信 、微博等功能
阿新 • • 發佈:2018-01-22
必備工具 con null 描述 one url key cts function
微信已經成為我們日常聊天聯系基本的必備工具,所以小菜我首先介紹一下如何調用微信的分享功能。其實除了可以在微信上分享到朋友圈和發送給好友,微信的分享接口還提供了分享到QQ和分享到騰訊微博等,就是在頁面的config接口註入權限驗證配置好就ok!
類似於“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口,我們調用“分享到QQ”和“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口 。
獲取“分享到QQ”按鈕點擊狀態及自定義分享內容接口
wx.onMenuShareQQ({ title: ‘‘, // 分享標題 desc: ‘‘, // 分享描述 link: ‘‘, // 分享鏈接 imgUrl: ‘‘, // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
獲取“分享到QQ空間”按鈕點擊狀態及自定義分享內容接口
wx.onMenuShareQZone({ title: ‘‘, // 分享標題 desc: ‘‘, // 分享描述 link: ‘‘, // 分享鏈接 imgUrl: ‘‘, // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口
wx.onMenuShareWeibo({ title:‘‘, // 分享標題 desc: ‘‘, // 分享描述 link: ‘‘, // 分享鏈接 imgUrl: ‘‘, // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
以上是調用接口然後進行自定義分享。下面是關於h5分享到的兩個不錯的插件。
一、http://www.jiathis.com/help/html/weixin-share-code
具體事例可以查看以上網址,我這裏演示一個簡單的例子。
使用說明: 復制並粘貼下面的JS代碼,放到您的網頁,可以在和的之間網頁的任意位置放置。如果您的網站使用的模板,您也可以復制代碼到您的模板,按鈕將在所有網頁自動出現。
<!-- JiaThis Button BEGIN --><div id="ckepop"> <span class="jiathis_txt">分享到:</span> <a class="jiathis_button_weixin">微信</a> <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a> <a class="jiathis_counter_style"></a> </div> <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script> </div> <!-- JiaThis Button END -->
二、http://share.baidu.com/code
HTML代碼
<div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到騰訊微博"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div>
js代碼
window._bd_share_config={ "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"}, "share":{}, "image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},
"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]} }; with(document)0[(getElementsByTagName(‘head‘)[0]||body).appendChild(createElement(‘script‘)).src= ‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘+~(-new Date()/36e5)];
如果想要查看更多的分享格式,可以查看原網址。
h5怎麽做分享到QQ 、朋友圈、微信 、微博等功能