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

下圖為：1. 分享拉窗 2. 右上角提示(微信或手q客戶端) 3. 彈層提示(其他瀏覽器)

執(zhí)行邏輯

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

有兩種安裝方式

1. npm安裝

npm install m-share

1. script引入

<script src="m-;></script>

快速開始

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

配置項(xiàng)

const config = { link: ';, // 網(wǎng)址，默認(rèn)使用window.loca title: '標(biāo)題', // 標(biāo)題，默認(rèn)讀取document.title desc: '分享描述', // 描述, 默認(rèn)讀取<meta name="description" content="desc" /> imgUrl: '; // 圖片, 默認(rèn)取網(wǎng)頁中第一個(gè)img標(biāo)簽 types: ['wx', 'wxline', 'qq', 'qzone', 'sina'], // 啟用的社交分享,默認(rèn)為全部啟用 infoMap: { // 針對不同平臺(tái)設(shè)定不同分享內(nèi)容 wx: { link: '分享到微信的鏈接', // 覆蓋分享到微信的鏈接 title: '分享到微信的標(biāo)題', // 覆蓋分享到微信的標(biāo)題 desc: '分享到微信的描述', // 覆蓋分享到微信的標(biāo)題 imgUrl: '分享到微信的圖片鏈接' // 覆蓋分享到微信的圖片鏈接 } }, fnDoShare(type) { // 執(zhí)行分享的回調(diào)，type為'wx', 'wxline', 'qq', 'qzone', 'sina' } };

注意：

1. 所有的配置參數(shù)都不是必填項(xiàng)
2. 其他瀏覽器并沒有開放native分享的api，所以對分享到微信、朋友圈、QQ好友設(shè)置的infoMap參數(shù)，在其他瀏覽器和手機(jī)qq客戶端下不會(huì)生效.

方法

init(config)

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

popup(config)

彈出分享彈窗

wxConfig(config)

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

M({ title: '', link: '', desc: '', imgUrl: '', wx: { appId: '', // 必填，公眾號的唯一標(biāo)識(shí) timestamp: , // 必填，生成簽名的時(shí)間戳 nonceStr: '', // 必填，生成簽名的隨機(jī)串 signature: '' // 必填，簽名 }, infoMap: ... });

render(el, config) - demo

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

<div id="myDom"></div> <script> M('#myDom', config); // or M('#myDom', config)); </script>

to(type, config) - demo

js直接調(diào)用分享

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

源碼地址：

如果覺得我們分享得不錯(cuò)，記得關(guān)注 DIY分享秀 還有別忘了點(diǎn)贊轉(zhuǎn)發(fā)喲