h5怎麼作分享到QQ 、朋友圈、微信 、微博等功能

 微信已經成爲咱們平常聊天聯繫基本的必備工具，因此小菜我首先介紹一下如何調用微信的分享功能。其實除了能夠在微信上分享到朋友圈和發送給好友，微信的分享接口還提供了分享到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分享到的兩個不錯的插件。

1、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 -->

 2、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)];

 若是想要查看更多的分享格式，能夠查看原網址。