頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

h5頁面分享到微信、朋友圈、新浪微博、QQ空間、QQ好友組件

h5頁面分享組件、支持分享到微信、朋友圈、新浪微博、QQ空間、QQ好友。

h5頁面分享到微信、朋友圈、新浪微博、QQ空間、QQ好友組件

執行邏輯

- 微信客戶端 手q qq瀏覽器 uc瀏覽器 其他瀏覽器
分享到微信 提示點擊右上角分享 提示點擊右上角分享 native分享 native分享 彈層提示
分享到朋友圈 提示點擊右上角分享 提示點擊右上角分享 native分享 native分享 彈層提示
分享到qq 提示點擊右上角分享 提示點擊右上角分享 native分享 - 彈層提示
分享到qq空間 提示點擊右上角分享 提示點擊右上角分享 native分享 web分享 web分享
分享到新浪微博 web分享 web分享 web分享 web分享 web分享

安裝

有兩種安裝方式

  1. npm安裝

     npm install m-share 
  2. script引入

     <script src="m-share.js"></script> 

快速開始

<div class="m-share"></div>
<script>
	const config = {...}; // config配置參考下面“基本使用-配置項”
	Mshare.init(config);
</script> 

配置項

const config = {
  link:  'http://www.qq.com', // 網址,默認使用window.location.href
  title: '標題',  // 標題,默認讀取document.title 
  desc:  '分享描述', // 描述, 默認讀取<meta name="description" content="desc" />
  imgUrl: 'http://backtonature.github.io/project/m-share/demo1.png' // 圖片, 默認取網頁中第一個img標簽
  types: ['wx', 'wxline', 'qq', 'qzone', 'sina'], // 啟用的社交分享,默認為全部啟用
  infoMap: { // 針對不同平臺設定不同分享內容
    wx: {
      link: '分享到微信的鏈接', // 覆蓋分享到微信的鏈接
      title: '分享到微信的標題', // 覆蓋分享到微信的標題
      desc: '分享到微信的描述', // 覆蓋分享到微信的標題
      imgUrl: '分享到微信的圖片鏈接' // 覆蓋分享到微信的圖片鏈接
    }
  },
  fnDoShare(type) {
    // 執行分享的回調,type為'wx', 'wxline', 'qq', 'qzone', 'sina'
  }
}; 

注意:

  1. 所有的配置參數都不是必填項
  2. 其他瀏覽器并沒有開放native分享的api,所以對分享到微信朋友圈QQ好友設置的infoMap參數,在其他瀏覽器手機qq客戶端下不會生效.

方法

init(config)

初始化化頁面所有class為m-share的元素。

popup(config)

彈出分享彈窗

wxConfig(config)

若當前頁面為公眾號頁面,具備訪問微信api的能力,可通過此方法配置微信分享。

Mshare.wxConfig({
  title: '',
  link: '',
  desc: '',
  imgUrl: '',
  wx: {
    appId: '', // 必填,公眾號的唯一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '' // 必填,簽名
  },
  infoMap: ...
}); 

render(el, config)

對指定元素渲染分享icon,el為指定元素或者指定元素的選擇器String。

<div id="myDom"></div>
<script>
  Mshare.render('#myDom', config);
  // or Mshare.render(document.querySelector('#myDom', config));
</script> 

to(type, config)

js直接調用分享

<button id="qq"></button>
<script>
  document.querySelector('#qq').addEventListener('click', () => {
    Mshare.to('qq', config);
  });
</script> 

相關鏈接

發表評論

腾讯彩票兑奖