├── index.js ├── .gitignore ├── .babelrc ├── rollup.config.js ├── src ├── set-qq-share-info.js ├── handle-share │ ├── qq.js │ ├── sina.js │ ├── qzone.js │ ├── wx.js │ ├── wxline.js │ └── handle-qqbrowser.js ├── set-normal-share-info.js ├── init.js ├── util.js ├── set-wx-share-info.js ├── ui.js ├── index.js └── style.js ├── LICENSE ├── demo ├── js-to.html ├── el.html ├── basic.html ├── popup.html └── demo.html ├── package.json ├── README.md └── dist ├── m-share.min.js ├── m-share.js └── m-share-es6.js /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./dist/m-share.js'); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .DS_Store 3 | *.swp 4 | *.pyc 5 | .vscode 6 | package-lock.json 7 | yarn.lock 8 | coverage/ 9 | npm-debug.log -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "presets": [ 4 | [ 5 | "env", 6 | { 7 | "modules": false 8 | } 9 | ] 10 | ], 11 | "plugins": [ 12 | "polyfill-env" 13 | ] 14 | } -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | 3 | export default { 4 | entry: 'src/index.js', 5 | dest: 'dist/m-share.js', 6 | format: 'umd', 7 | name: 'Mshare', 8 | externalHelpers: true, 9 | plugins: [ 10 | babel({ 11 | exclude: 'node_modules/**', 12 | runtimeHelpers: true, 13 | externalHelpers: true 14 | }) 15 | ] 16 | }; -------------------------------------------------------------------------------- /src/set-qq-share-info.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-22 21:31:32 4 | * @Last Modified by: backToNature 5 | * @Last Modified time: 2018-05-23 20:05:09 6 | */ 7 | import util from './util.js'; 8 | const qqJsSdkUrl = '//open.mobile.qq.com/sdk/qqapi.js?_bid=152'; 9 | 10 | const setShareInfo = (info) => { 11 | mqq.data.setShareInfo({ 12 | share_url: info.link, 13 | title: info.title, 14 | desc: info.desc, 15 | image_url: info.imgUrl 16 | }) 17 | }; 18 | 19 | export default (info) => { 20 | if (window.mqq && mqq.data && mqq.data.setShareInfo) { 21 | setShareInfo(info); 22 | } else { 23 | util.loadScript(qqJsSdkUrl, () => { 24 | setShareInfo(info); 25 | }); 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /src/handle-share/qq.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-24 14:23:11 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-06-01 15:05:25 6 | */ 7 | 8 | import util from '../util.js'; 9 | import qqBrowserShare from './handle-qqbrowser.js'; 10 | import ui from '../ui.js'; 11 | 12 | export default (info) => { 13 | if (util.ua.isFromWx) { 14 | // 微信客户端 15 | ui.showRightTopTips(); 16 | return; 17 | } 18 | 19 | if (util.ua.isFromQQ) { 20 | // 手机qq 21 | ui.showRightTopTips(); 22 | return; 23 | } 24 | 25 | if (util.ua.isFromQQBrower) { 26 | // qq浏览器 27 | ui.hideMask(); 28 | qqBrowserShare('qq', info); 29 | return; 30 | } 31 | 32 | ui.showBottomTips(); 33 | }; 34 | -------------------------------------------------------------------------------- /src/handle-share/sina.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-24 14:23:11 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-06-01 15:05:39 6 | */ 7 | 8 | import util from '../util.js'; 9 | import qqBrowserShare from './handle-qqbrowser.js'; 10 | import ui from '../ui.js'; 11 | 12 | export default (info) => { 13 | if (util.ua.isFromQQBrower) { 14 | // qq浏览器 15 | ui.hideMask(); 16 | qqBrowserShare('sina', info); 17 | return; 18 | } 19 | 20 | const query = `url=${encodeURIComponent(info.link)}&title=${encodeURIComponent(info.desc)}&desc=${encodeURIComponent(info.desc)}&pic=${encodeURIComponent(info.imgUrl)}`; 21 | location.href = `http://service.weibo.com/share/share.php?${query}`; 22 | // 都不是则弹层二维码提示分享 23 | }; 24 | -------------------------------------------------------------------------------- /src/set-normal-share-info.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backToNature 3 | * @Date: 2018-05-30 12:54:24 4 | * @Last Modified by: backToNature 5 | * @Last Modified time: 2018-05-30 13:39:38 6 | */ 7 | export default (info) => { 8 | if (info.desc && !document.querySelector('meta[name$="cription"]')) { 9 | const $meta = document.createElement('meta'); 10 | $meta.setAttribute('description', info.desc); 11 | } 12 | // 添加隐藏的img标签在body最前面 13 | if (info.imgUrl) { 14 | const $img = document.createElement('img'); 15 | $img.style.cssText = 'width: 0;height: 0;position: absolute;z-index: -9999;top: -99999px;left: -99999px;'; 16 | $img.onload = () => { 17 | document.body.insertBefore($img, document.body.firstChild); 18 | }; 19 | $img.onerror = () => { 20 | $img.remove(); 21 | }; 22 | $img.src = info.imgUrl; 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /src/init.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backToNature 3 | * @Date: 2018-05-22 17:23:35 4 | * @Last Modified by: backToNature 5 | * @Last Modified time: 2018-05-30 17:39:03 6 | */ 7 | import util from './util.js'; 8 | import ui from './ui.js'; 9 | import setNormalShareInfo from './set-normal-share-info.js'; 10 | import setQQshareInfo from './set-qq-share-info.js'; 11 | 12 | let isInit = false; 13 | 14 | export default (config) => { 15 | if (!isInit) { 16 | const info = { 17 | title: config.title, 18 | desc: config.desc, 19 | link: config.link, 20 | imgUrl: config.imgUrl 21 | }; 22 | isInit = true; 23 | ui.initStyle(); // 加载样式 24 | 25 | // 配置通用分享设置 26 | if (config.setNormal !== false) { 27 | setNormalShareInfo(info); 28 | } 29 | // 配置手q分享内容 30 | if (util.ua.isFromQQ) { 31 | setQQshareInfo(config.types, info); 32 | } 33 | 34 | } 35 | }; -------------------------------------------------------------------------------- /src/handle-share/qzone.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-24 14:23:11 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-06-01 15:05:26 6 | */ 7 | 8 | import util from '../util.js'; 9 | import qqBrowserShare from './handle-qqbrowser.js'; 10 | import ui from '../ui.js'; 11 | 12 | export default (info) => { 13 | if (util.ua.isFromWx) { 14 | // 微信客户端 15 | ui.showRightTopTips(); 16 | return; 17 | } 18 | 19 | if (util.ua.isFromQQ) { 20 | // 手机qq 21 | ui.showRightTopTips(); 22 | return; 23 | } 24 | 25 | if (util.ua.isFromQQBrower) { 26 | // qq浏览器 27 | ui.hideMask(); 28 | qqBrowserShare('qzone', info); 29 | return; 30 | } 31 | const query = `url=${encodeURIComponent(info.link)}&title=${encodeURIComponent(info.title)}&desc=${encodeURIComponent(info.desc)}&summary=${encodeURIComponent(info.desc)}&site=${encodeURIComponent(info.link)}` 32 | location.href = `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?${query}`; 33 | }; -------------------------------------------------------------------------------- /src/handle-share/wx.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-23 21:20:45 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-06-01 15:07:06 6 | */ 7 | import util from '../util.js'; 8 | import qqBrowserShare from './handle-qqbrowser.js'; 9 | import ui from '../ui.js'; 10 | 11 | export default (info) => { 12 | if (util.ua.isFromWx) { 13 | ui.showRightTopTips(); 14 | return; 15 | } 16 | 17 | if (util.ua.isFromQQ) { 18 | ui.showRightTopTips(); 19 | return; 20 | } 21 | if (util.ua.isFromUC) { 22 | // uc浏览器 23 | ui.hideMask(); 24 | if (util.ua.isFromIos) { 25 | window.ucbrowser && window.ucbrowser.web_share(info.title, info.desc, info.link, 'kWeixin', info.imgUrl, '', ''); 26 | } else { 27 | window.ucweb && window.ucweb.startRequest("shell.page_share", [info.title, info.desc, info.link, 'WechatFriends', info.imgUrl, '']); 28 | } 29 | return; 30 | } 31 | 32 | if (util.ua.isFromQQBrower) { 33 | // qq浏览器 34 | ui.hideMask(); 35 | qqBrowserShare('wx', info); 36 | return; 37 | } 38 | 39 | ui.showBottomTips(); 40 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 darkh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/handle-share/wxline.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-24 14:17:21 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-06-01 15:05:57 6 | */ 7 | import util from '../util.js'; 8 | import qqBrowserShare from './handle-qqbrowser.js'; 9 | import ui from '../ui.js'; 10 | 11 | export default (info) => { 12 | if (util.ua.isFromWx) { 13 | // 微信客户端 14 | ui.showRightTopTips(); 15 | return; 16 | } 17 | 18 | if (util.ua.isFromQQ) { 19 | // 手机qq 20 | ui.showRightTopTips(); 21 | return; 22 | } 23 | 24 | if (util.ua.isFromUC) { 25 | // uc浏览器 26 | ui.hideMask(); 27 | if (util.ua.isFromIos) { 28 | window.ucbrowser && window.ucbrowser.web_share(info.title, info.desc, info.link, 'kWeixinFriend', info.imgUrl, '', ''); 29 | } else { 30 | window.ucweb && window.ucweb.startRequest("shell.page_share", [info.title, info.desc, info.link, 'WechatTimeline', info.imgUrl, '']); 31 | } 32 | return; 33 | } 34 | 35 | if (util.ua.isFromQQBrower) { 36 | // qq浏览器 37 | ui.hideMask(); 38 | qqBrowserShare('wxline', info); 39 | return; 40 | } 41 | 42 | ui.showBottomTips(); 43 | }; -------------------------------------------------------------------------------- /src/handle-share/handle-qqbrowser.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-23 21:36:23 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-05-29 14:05:55 6 | */ 7 | 8 | import util from '../util.js'; 9 | 10 | const qqShareJsSdk = '//jsapi.qq.com/get?api=app.setShareInfo,app.share'; 11 | 12 | export default (type, info) => { 13 | const doShare = (to_app) => { 14 | const _doShare = () => { 15 | try { 16 | browser.app.share({ 17 | title: info.title, 18 | description: info.desc, 19 | url: info.link, 20 | img_url: info.imgUrl, 21 | to_app 22 | }, (res) => { 23 | }); 24 | } catch (e) { 25 | } 26 | }; 27 | if (window.browser && browser.app && browser.app.share) { 28 | _doShare(); 29 | } else { 30 | util.loadScript(qqShareJsSdk, _doShare); 31 | } 32 | }; 33 | switch (type) { 34 | case 'wx': 35 | doShare(1); 36 | break; 37 | case 'wxline': 38 | doShare(8); 39 | break; 40 | case 'qq': 41 | doShare(4); 42 | break; 43 | case 'qzone': 44 | doShare(3); 45 | break; 46 | case 'sina': 47 | doShare(11); 48 | break; 49 | } 50 | }; -------------------------------------------------------------------------------- /demo/js-to.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | js调用分享 8 | 11 | 12 | 13 | 14 |  15 | 16 | 33 | 34 | -------------------------------------------------------------------------------- /demo/el.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 指定元素分享 8 | 9 | 10 | 11 |

指定元素分享

12 |
13 | 34 | 35 | -------------------------------------------------------------------------------- /demo/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 基本配置 8 | 9 | 10 | 11 |

基本配置

12 |
13 | 35 | 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "m-share", 3 | "version": "1.0.2", 4 | "description": "h5页面分享组件、支持分享到微信、朋友圈、qq、QQ空间、QQ好友。", 5 | "main": "index.js", 6 | "scripts": { 7 | "server": "http-server -c-1 -p 8000 ./", 8 | "dev": "rollup src/index.js --watch --output.format umd --name \"Mshare\" --output.file dist/m-share.js -c rollup.config.js", 9 | "build": "npm run build:umd && npm run build:es6 && uglifyjs ./dist/m-share.js -o ./dist/m-share.min.js", 10 | "build:umd": "rollup src/index.js --output.format umd --name \"Mshare\" --output.file dist/m-share.js -c rollup.config.js", 11 | "build:es6": "rollup src/index.js --output.format es --name \"Mshare\" --output.file dist/m-share-es6.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/backToNature/m-share.git" 16 | }, 17 | "keywords": [ 18 | "share", 19 | "h5-share", 20 | "m-share", 21 | "social" 22 | ], 23 | "author": "'darkh' <'backtonature@foxmail.com'>", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/backToNature/m-share/issues" 27 | }, 28 | "homepage": "https://github.com/backToNature/m-share#readme", 29 | "devDependencies": { 30 | "babel-core": "^6.26.3", 31 | "babel-plugin-polyfill-env": "^1.0.3", 32 | "babel-preset-env": "^1.7.0", 33 | "http-server": "^0.11.1", 34 | "rollup": "^0.59.2", 35 | "rollup-plugin-babel": "^3.0.4", 36 | "uglify-js": "^3.4.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /demo/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 弹窗分享 8 | 9 | 10 | 11 |

弹窗分享

12 | 13 | 36 | 37 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-22 20:08:19 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-05-29 11:24:07 6 | */ 7 | const userAgent = window.navigator.userAgent; 8 | export default { 9 | loadScript(url, callback) { 10 | const doc = document; 11 | const head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement; 12 | const script = doc.createElement('script'); 13 | script.type = 'text/javascript'; 14 | script.charset = 'utf-8'; 15 | if (script.readyState) { 16 | script.onreadystatechange = function () { 17 | if (/loaded|complete/i.test(script.readyState)) { 18 | script.onreadystatechange = null; 19 | callback && callback.call(this); 20 | } 21 | }; 22 | } else { 23 | script.onload = function () { 24 | callback && callback.call(this); 25 | }; 26 | } 27 | script.src = url; 28 | head.insertBefore(script, head.firstChild); 29 | }, 30 | execStyle(cssText) { 31 | const document = window.document; 32 | const styleTag = document.createElement('style'); 33 | styleTag.setAttribute('type', 'text/css'); 34 | if (document.all) { 35 | styleTag.styleSheet.cssText = cssText; 36 | } else { 37 | styleTag.innerHTML = cssText; 38 | } 39 | document.getElementsByTagName("head").item(0).appendChild(styleTag); 40 | }, 41 | ua: { 42 | isFromAndroid: /android/gi.test(userAgent), 43 | isFromIos: /iphone|ipod|ios/gi.test(userAgent), 44 | isFromWx: /MicroMessenger/gi.test(userAgent), 45 | isFromQQ: /mobile.*qq/gi.test(userAgent), 46 | isFromUC: /ucbrowser/gi.test(userAgent), 47 | isFromQQBrower: /mqqbrowser[^LightApp]/gi.test(userAgent), 48 | isFromQQBrowerLight: /MQQBrowserLightApp/gi.test(userAgent) 49 | } 50 | }; -------------------------------------------------------------------------------- /src/set-wx-share-info.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backToNature 3 | * @Date: 2018-05-22 20:12:58 4 | * @Last Modified by: backToNature 5 | * @Last Modified time: 2018-05-31 15:16:45 6 | */ 7 | import util from './util.js'; 8 | const wxJsSdkUrl = '//res.wx.qq.com/open/js/jweixin-1.2.0.js'; 9 | 10 | const setShareInfo = (type, info) => { 11 | switch (type) { 12 | case 'wx': 13 | wx.onMenuShareAppMessage(info); // 设置分享到微信好友内容 14 | break; 15 | case 'wxline': 16 | wx.onMenuShareTimeline(info); // 设置分享到微信朋友圈内容 17 | break; 18 | case 'qq': 19 | wx.onMenuShareQQ(info); // 设置分享到微信好友内容 20 | break; 21 | case 'qzone': 22 | wx.onMenuShareQZone(info); // 设置分享到qq空间 23 | break 24 | } 25 | }; 26 | 27 | let isConfig = false; 28 | 29 | export default (types, config) => { 30 | const wxConfig = config.wx; 31 | const doSet = () => { 32 | const _wxConfig = Object.assign({ 33 | jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo'] 34 | }, wxConfig); 35 | if (!isConfig) { 36 | wx.config(_wxConfig); 37 | isConfig = true; 38 | } 39 | wx.ready(() => { 40 | try { 41 | types.forEach(item => { 42 | const _info = { 43 | title: (config.infoMap && config.infoMap[item] && config.infoMap[item].title) || config.title, 44 | desc: (config.infoMap && config.infoMap[item] && config.infoMap[item].desc) || config.desc, 45 | link: (config.infoMap && config.infoMap[item] && config.infoMap[item].link) || config.link, 46 | imgUrl: (config.infoMap && config.infoMap[item] && config.infoMap[item].imgUrl) || config.imgUrl 47 | }; 48 | setShareInfo(item, _info); 49 | }); 50 | } catch (e) {} 51 | }); 52 | }; 53 | if (window.wx) { 54 | doSet(); 55 | } else { 56 | util.loadScript(wxJsSdkUrl, () => { 57 | doSet(); 58 | }); 59 | } 60 | }; 61 | -------------------------------------------------------------------------------- /demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | m-share 9 | 19 | 20 | 21 | 22 | 23 |

基础配置

24 |
25 | 26 |

弹层分享

27 | 28 | 29 |

指定dom渲染

30 |
31 | 32 | 33 |

js调用分享

34 | 35 | 36 | 37 | 38 | 39 | 92 | 93 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [m-share](http://backtonature.github.io/project/m-share) 2 | 3 | h5页面分享组件、支持分享到微信、朋友圈、新浪微博、QQ空间、QQ好友。 4 | 5 | 6 | [![](http://backtonature.github.io/project/m-share/demo1.png)](http://backtonature.github.io/project/m-share) 7 | 8 | 点击查看[demo](http://backtonature.github.io/project/m-share/demo/demo.html) 9 | 10 | 下图为：1. 分享拉窗 2. 右上角提示(微信或手q客户端) 3. 弹层提示(其他浏览器) 11 | 12 | ![](http://backtonature.github.io/project/m-share/demo5.jpg) 13 | 14 | ## 执行逻辑 15 | 16 | \- |微信客户端 | 手q | qq浏览器 | uc浏览器 | 其他浏览器 17 | -- | -- | -- | --| -- | -- 18 | 分享到微信 | 提示点击右上角分享 | 提示点击右上角分享 | native分享 | native分享 | 弹层提示 19 | 分享到朋友圈 | 提示点击右上角分享 | 提示点击右上角分享 | native分享 | native分享 | 弹层提示 20 | 分享到qq | 提示点击右上角分享 | 提示点击右上角分享 | native分享 | - | 弹层提示 21 | 分享到qq空间 | 提示点击右上角分享 | 提示点击右上角分享 | native分享 | web分享 | web分享 22 | 分享到新浪微博 | web分享 | web分享 | web分享 | web分享 | web分享 23 | 24 | ## 安装 25 | 26 | 有两种安装方式 27 | 28 | 1. npm安装 29 | 30 | npm install m-share 31 | 32 | 2. script引入 33 | 34 | 35 | 36 | ## 快速开始 37 | 38 |
39 | 43 | 44 | ## 配置项 45 | 46 | const config = { 47 | link: 'http://www.qq.com', // 网址，默认使用window.location.href 48 | title: '标题', // 标题，默认读取document.title 49 | desc: '分享描述', // 描述, 默认读取 50 | imgUrl: 'http://backtonature.github.io/project/m-share/demo1.png' // 图片, 默认取网页中第一个img标签 51 | types: ['wx', 'wxline', 'qq', 'qzone', 'sina'], // 启用的社交分享,默认为全部启用 52 | infoMap: { // 针对不同平台设定不同分享内容 53 | wx: { 54 | link: '分享到微信的链接', // 覆盖分享到微信的链接 55 | title: '分享到微信的标题', // 覆盖分享到微信的标题 56 | desc: '分享到微信的描述', // 覆盖分享到微信的标题 57 | imgUrl: '分享到微信的图片链接' // 覆盖分享到微信的图片链接 58 | } 59 | }, 60 | fnDoShare(type) { 61 | // 执行分享的回调，type为'wx', 'wxline', 'qq', 'qzone', 'sina' 62 | } 63 | }; 64 | 65 | ***注意：*** 66 | 67 | 1. 所有的配置参数都不是必填项 68 | 2. ```其他浏览器```并没有开放native分享的api，所以对分享到```微信```、```朋友圈```、```QQ好友```设置的```infoMap```参数，在```其他浏览器```和```手机qq客户端```下不会生效. 69 | 70 | ## 方法 71 | 72 | 73 | ### init(config) - [demo](http://backtonature.github.io/project/m-share/demo/basic.html) 74 | 75 | 初始化化页面所有class为```m-share```的元素。 76 | 77 | 78 | ### popup(config) - [demo](http://backtonature.github.io/project/m-share/demo/popup.html) 79 | 80 | 弹出分享弹窗 81 | 82 | 83 | ### wxConfig(config) 84 | 85 | 若当前页面为公众号页面，具备访问微信api的能力，可通过此方法配置微信分享。 86 | 87 | Mshare.wxConfig({ 88 | title: '', 89 | link: '', 90 | desc: '', 91 | imgUrl: '', 92 | wx: { 93 | appId: '', // 必填，公众号的唯一标识 94 | timestamp: , // 必填，生成签名的时间戳 95 | nonceStr: '', // 必填，生成签名的随机串 96 | signature: '' // 必填，签名 97 | }, 98 | infoMap: ... 99 | }); 100 | 101 | ### render(el, config) - [demo](http://backtonature.github.io/project/m-share/demo/el.html) 102 | 103 | 对指定元素渲染分享icon，```el```为指定元素或者指定元素的选择器String。 104 | 105 |
106 | 110 | 111 | 112 | ### to(type, config) - [demo](http://backtonature.github.io/project/m-share/demo/js-to.html) 113 | 114 | js直接调用分享 115 | 116 | 117 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /src/ui.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-27 20:08:19 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-05-30 21:05:38 6 | */ 7 | import util from './util.js'; 8 | import style from './style.js'; 9 | 10 | let isStyleLoaded = false; 11 | export default { 12 | initStyle() { 13 | if (!isStyleLoaded) { 14 | util.execStyle(style.cssText); 15 | isStyleLoaded = true; 16 | } 17 | }, 18 | showActionSheet(dom) { 19 | this.showMask(); 20 | const $sheet = document.createElement('div'); 21 | $sheet.id = 'm-share-actionSheet'; 22 | $sheet.appendChild(dom); 23 | document.body.appendChild($sheet); 24 | window.setTimeout(() => { 25 | $sheet.style.cssText = '-webkit-transform: translateY(0);transform: translateY(0);'; 26 | }, 0); 27 | }, 28 | hideActionSheet() { 29 | const dom = document.querySelector('#m-share-actionSheet'); 30 | if (dom) { 31 | // 渐变消失 32 | // dom.addEventListener('webkitTransitionend', () => { 33 | // dom.remove(); 34 | // }); 35 | // dom.addEventListener('transitionend', () => { 36 | // dom.remove(); 37 | // }); 38 | // dom.style.cssText = '-webkit-transform: translateY(100%);transform: translateY(100%);'; 39 | dom.remove(); 40 | } 41 | }, 42 | showMask() { 43 | if (document.querySelector('.m-share-mask')) { 44 | return; 45 | } 46 | const $div = document.createElement('div'); 47 | $div.className = 'm-share-mask'; 48 | $div.addEventListener('click', () => { 49 | this.hideActionSheet(); 50 | this.hideBottomTips(); 51 | this.hideRightTips(); 52 | this.hideMask(); 53 | }); 54 | document.body.appendChild($div); 55 | window.setTimeout(() => { 56 | $div.style.opacity = 0.7; 57 | }, 0); 58 | }, 59 | hideMask() { 60 | const domList = document.querySelectorAll('.m-share-mask'); 61 | for (let i = 0; i < domList.length; i++) { 62 | const item = domList[i]; 63 | const removeDom = () => item.remove(); 64 | // 渐变消失 65 | // item.addEventListener('webkitTransitionend', removeDom); 66 | // item.addEventListener('transitionend', removeDom); 67 | // item.style.cssText = 'opacity: 0'; 68 | removeDom(); 69 | } 70 | }, 71 | showBottomTips() { 72 | this.showMask(); 73 | const $tips = document.createElement('div'); 74 | $tips.className = 'm-share-tips-bottom'; 75 | $tips.innerHTML = '请打开浏览器的菜单进行分享点击“”或“”'; 76 | document.body.appendChild($tips); 77 | window.setTimeout(() => { 78 | this.hideMask(); 79 | this.hideBottomTips(); 80 | }, 1400); 81 | }, 82 | hideBottomTips() { 83 | const domList = document.querySelectorAll('.m-share-tips-bottom'); 84 | for (let i = 0; i < domList.length; i++) { 85 | const item = domList[i]; 86 | item.remove(); 87 | } 88 | }, 89 | showRightTopTips() { 90 | this.showMask(); 91 | const $tips = document.createElement('div'); 92 | $tips.className = 'm-share-tips'; 93 | $tips.innerHTML = ` 94 |
95 |
点击右上角“”
96 |
分享给朋友吧！
97 |
98 |
99 | `; 100 | document.body.appendChild($tips); 101 | window.setTimeout(() => { 102 | this.hideMask(); 103 | this.hideRightTips(); 104 | }, 1400); 105 | }, 106 | hideRightTips() { 107 | const domList = document.querySelectorAll('.m-share-tips'); 108 | for (let i = 0; i < domList.length; i++) { 109 | const item = domList[i]; 110 | item.remove(); 111 | } 112 | } 113 | }; 114 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backToNature 3 | * @Date: 2018-05-22 17:23:35 4 | * @Last Modified by: backToNature 5 | * @Last Modified time: 2018-06-01 15:00:51 6 | */ 7 | import util from './util.js'; 8 | import ui from './ui.js'; 9 | import init from './init.js'; 10 | import setWxShareInfo from './set-wx-share-info.js'; 11 | import wxShare from './handle-share/wx.js'; 12 | import wxlineShare from './handle-share/wxline.js'; 13 | import qqShare from './handle-share/qq.js'; 14 | import qzoneShare from './handle-share/qzone.js'; 15 | import sinaShare from './handle-share/sina.js'; 16 | 17 | const shareFuncMap = { 18 | wx: wxShare, 19 | wxline: wxlineShare, 20 | qq: qqShare, 21 | qzone: qzoneShare, 22 | sina: sinaShare 23 | }; 24 | 25 | const typesMap = ['wx', 'wxline', 'qq', 'qzone', 'sina']; 26 | 27 | const getDefaultConfig = (config) => { 28 | config = config || {}; 29 | const infoMapType = typeof config.infoMap; 30 | return { 31 | title: (config && config.title) || document.title, 32 | desc: (config && config.desc) || (document.querySelector('meta[name$="cription"]') && document.querySelector('meta[name$="cription"]').getAttribute('content')) || '', 33 | link: encodeURI((config && config.link) || window.location.href), 34 | imgUrl: (config && config.imgUrl) || (document.querySelector('img') && document.querySelector('img').getAttribute('src')) || '', 35 | types: (config && Array.isArray(config.types) && config.types) || ['wx', 'wxline', 'qq', 'qzone', 'sina'], 36 | wx: (config && config.wx) || null, 37 | fnDoShare: config.fnDoShare, 38 | infoMap: (infoMapType === 'function' || infoMapType === 'object' && !!config.infoMap) ? config.infoMap : {} 39 | }; 40 | }; 41 | 42 | export default { 43 | wxConfig(config) { 44 | const _config = getDefaultConfig(config); 45 | if (util.ua.isFromWx && _config.wx && _config.wx.appId && _config.wx.timestamp && _config.wx.nonceStr && _config.wx.signature) { 46 | setWxShareInfo(typesMap, _config); 47 | } 48 | }, 49 | init(config) { 50 | const _config = getDefaultConfig(config); 51 | init(_config); 52 | const domList = document.querySelectorAll('.m-share'); 53 | // 初始化 54 | for (let i = 0; i < domList.length; i++) { 55 | const item = domList[i]; 56 | this.render(item, _config); 57 | } 58 | }, 59 | // 渲染 60 | render(dom, config) { 61 | const _config = getDefaultConfig(config); 62 | init(_config); 63 | const getTmpl = (type) => { 64 | if (typesMap.indexOf(type) >= 0) { 65 | return ``; 66 | } 67 | return ''; 68 | }; 69 | let tmp = ''; 70 | _config.types.forEach(item => { 71 | tmp += getTmpl(item); 72 | }); 73 | if (typeof dom === 'string') { 74 | dom = document.querySelector(dom); 75 | } 76 | if (!dom) { 77 | return; 78 | } 79 | dom.innerHTML = tmp; 80 | dom.addEventListener('click', (e) => { 81 | const target = e.target; 82 | typesMap.forEach(item => { 83 | if (target.classList.contains(`m-share-${item}`)) { 84 | const shareData = { 85 | title: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].title) || _config.title, 86 | desc: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].desc) || _config.desc, 87 | link: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].link) || _config.link, 88 | imgUrl: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].imgUrl) || _config.imgUrl, 89 | fnDoShare: _config.fnDoShare 90 | }; 91 | this.to(item, shareData); 92 | } 93 | }); 94 | }); 95 | }, 96 | // 执行分享逻辑 97 | to(type, config) { 98 | const _config = getDefaultConfig(config); 99 | init(_config); 100 | if (typesMap.indexOf(type) >= 0) { 101 | if (_config.fnDoShare) { 102 | _config.fnDoShare(type); 103 | } 104 | shareFuncMap[type](_config); 105 | } 106 | }, 107 | // 弹层分享 108 | popup(config) { 109 | const _config = getDefaultConfig(config); 110 | init(_config); 111 | const textMap = { 112 | wx: '微信好友', 113 | wxline: '朋友圈', 114 | qq: 'QQ好友', 115 | qzone: 'QQ空间', 116 | sina: '微博' 117 | }; 118 | const dom = document.createElement('div'); 119 | dom.className = 'm-share-flex'; 120 | let tmp = ''; 121 | const getTmpl = (type) => { 122 | if (typesMap.indexOf(type) >= 0) { 123 | return `
${textMap[type]}
`; 124 | } 125 | return ''; 126 | }; 127 | _config.types.forEach(item => { 128 | tmp += getTmpl(item); 129 | }); 130 | dom.innerHTML = tmp; 131 | dom.addEventListener('click', (e) => { 132 | const target = e.target; 133 | typesMap.forEach(item => { 134 | if (target.classList.contains(`m-share-${item}`)) { 135 | ui.hideActionSheet(); 136 | const shareData = { 137 | title: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].title) || _config.title, 138 | desc: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].desc) || _config.desc, 139 | link: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].link) || _config.link, 140 | imgUrl: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].imgUrl) || _config.imgUrl, 141 | fnDoShare: _config.fnDoShare 142 | }; 143 | this.to(item, shareData); 144 | } 145 | }); 146 | }); 147 | ui.showActionSheet(dom); 148 | } 149 | }; -------------------------------------------------------------------------------- /src/style.js: -------------------------------------------------------------------------------- 1 | export default { 2 | cssText: ` 3 | .m-share-mask { 4 | margin: 0; 5 | padding: 0; 6 | position: fixed; 7 | left: 0; 8 | bottom: 0; 9 | z-index: 2147483646; 10 | width: 100%; 11 | height: 100%; 12 | background: #000; 13 | opacity: 0; 14 | -webkit-transition: opacity .2s ease-in; 15 | transition: opacity .2s ease-in; 16 | } 17 | #m-share-actionSheet { 18 | margin: 0; 19 | padding: 0; 20 | font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif; 21 | position: fixed; 22 | width: 100%; 23 | left: 0; 24 | bottom: 0; 25 | z-index: 2147483647; 26 | background: #fff; 27 | -webkit-box-sizing: border-box; 28 | box-sizing: border-box; 29 | padding: 30px 20px; 30 | -webkit-transform: translateY(100%); 31 | transform: translateY(100%); 32 | -webkit-transition: -webkit-transform .2s ease-in; 33 | transition: transform .2s ease-in; 34 | } 35 | #m-share-actionSheet div { 36 | margin: 0; 37 | padding: 0; 38 | } 39 | #m-share-actionSheet .m-share-sheet-title { 40 | font-size: 12px; 41 | color: #ababab; 42 | text-align: center; 43 | margin:10px 0 0 0; 44 | } 45 | #m-share-actionSheet .m-share-flex { 46 | display: -webkit-box!important; 47 | display: -webkit-flex!important; 48 | display: -ms-flexbox!important; 49 | display: flex!important; 50 | -webkit-flex-wrap: wrap; 51 | -ms-flex-wrap: wrap; 52 | flex-wrap: wrap 53 | } 54 | #m-share-actionSheet .m-share-flex>.m-share-cell { 55 | -webkit-box-flex: 1; 56 | -webkit-flex: 1; 57 | -ms-flex: 1; 58 | flex: 1; 59 | width: 0; 60 | -webkit-flex-basis: 0; 61 | -ms-flex-preferred-size: 0; 62 | flex-basis: 0; 63 | max-width: 100%; 64 | display: block; 65 | padding: 0!important; 66 | position: relative; 67 | text-align: center; 68 | } 69 | #m-share-actionSheet .m-share-iconfont { 70 | margin: 0; 71 | } 72 | .m-share-tips { 73 | font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif; 74 | margin: 0; 75 | padding: 0; 76 | position: fixed; 77 | top: 3px; 78 | color: #fff; 79 | right: 20px; 80 | z-index: 2147483647; 81 | // background-color: #000; 82 | } 83 | .m-share-tips .m-share-tips-w { 84 | margin: 0; 85 | padding: 0; 86 | display: inline-block; 87 | font-size: 18px; 88 | position: relative; 89 | right: 1px; 90 | top: 7px; 91 | } 92 | .m-share-tips .m-share-tips-w .m-share-tips-p { 93 | margin: 0; 94 | padding: 0; 95 | color: #fff; 96 | font-size: 18px; 97 | } 98 | .m-share-tips-arrow { 99 | margin: 0; 100 | padding: 0; 101 | display: inline-block; 102 | width: 54px; 103 | height: 55px; 104 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABuCAMAAAD1cAb0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC6UExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////3HoUvYAAAA9dFJOUwDIjg4CBPr98Av39C4GghgTQOAnv6h97AjcN2dGH+gcbxAVz1WWIqGvuko0tNP+5eN42YhaUF/WmsQ8Y8we7g2hAAAEn0lEQVQYGe3AVXbjSAAF0CcuMZllZnabE6ff/rc1Lqtp5rdVOfORiy9fvnz5nxvg8wyPBT7LY++LhYtPkdw92rXcxCewjivSrnXwCaxO4ZH87uIT5Os+STtKoZ7Z6fNJLFv4BDVKfjqGereM0v0M9QaRoCRSKGflW75kF6h3Zam/MaHaZudRck5dqBZv2yy1BxbUai0mLO1rBRS7zWz+cEigVnoW/GFfv0GpXpTxl0MPKvWiGn9bdaHQ6FjjHyYB1GkNF/yDc+pAnZvu8U+TIIQq6VmQwudPezGFKmmUkdrSoSTae7IZuFBjHmXke/yNktAzkmJoQol4oTn+yWhQct5nO5v0uy5UcOsTTraD+dLn016LNZL+2YUC7ptm3+uxNV1R8jf5xCZt3YUCtbadRTmMK1/01GjYpDObo2rhuEE2jw9gc6DUfjNCvUnapzEqZm0+yMM0BYxZm1IzALoZyXqOaoXdi2+LILZgdnS+3ACkGekceqjWbdhsag88halPqXY1gDxySC0wUaXrTIj6BZKr2Xzy3+YA3K1PsrBQoWDVb0YFXo6aw6f+EE/jq0/6QxfVGUwyMe2EkPKhT0kb4cmM7iSjMSozyLJv3cSCFMY7SqJI8GQNTiTrLqpi6dl7ARMvZo2St73gJdAcOnqOyqwvBX667RyS+2bdhWTGNZucJKiOYeGHgd6k1DZQGtcdOrM1FLC6S0reOkHJ0Gx6kxgKGFe+zKYmSvOZQ0fPocCgT+m0MPBD0ia91RjVGy/7fLLbAX5aR3s6tR4q1zpubUoN/JJopKPFJqrWOXuU3hITP+WRz714oGpu2qeUdQf4xbr2yeYlQcVa75R8/YHfzM3MtrUGqtagZK+O+FNrptXqLioWTPZ88pcu/sW9dBJULH9rUxI9/FeIihnH75T8aQjVrI83vgxzC6oFHx6l1bQF1QbrPqWsMYBqYfKdkr9IoV5EyXtvQL0GJUeru1AuZWkXQ7me4IvoQTkjYymFckaNpQbUq7GkmVCuwdIkMKBaylJ/HUC1nuCLPw2g2HiesTTsWFCrtzmwFG1aUCvpTliKYEKt0a3OUg2qjRoLvrTbBhRzFwuPUraNoVartd3ZlLRtALXcje45lDK9C7VGRYOlfpFCLXdR9yiJZieAUklSu9uUTqeHAaVGRZ2l9iKAUr3edskX73DpQKlH91vTobRr53MoFI47s4ylpZ5DodC9rL8JSnb7fR1DoXFcX3oszd6SFpSxRvGxLhxKTV+fGlCmhaL4nvHF7utTI4QilpV0dU1wT9LhbtfZQJWWMS2W77Qp+X29mMOEEta8NzyfhGNTEoeoMFwoEJrjXqo3DhPalGyxPD/GIf5WksCECRMlE61Rso7P0/u7ECyJg66P5jDxt+LGbHhbB904H82D3nUzvX4s6tru4LHk+dpkuBm0TPw9a6p5XibuWW21qi9PK+/OzLYdPjmO53ur3frozlGN8NHImsJ2bDrc8zeHTbHQ9HN3MDZRmTAdfNxW2/62eRdS29aaK205e/voBrEbomKW1XI7eRFE3eijMdQ7UV4kc8NIYEKZEC6SMAxh4sv/2T8XLefQYLd95QAAAABJRU5ErkJggg=='); 105 | background-size: 100%; 106 | } 107 | .m-share-tips-bottom { 108 | font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif; 109 | margin: 0; 110 | padding: 0; 111 | font-size: 18px; 112 | position: fixed; 113 | color: #fff; 114 | top: 50%; 115 | left: 50%; 116 | width: 100%; 117 | z-index: 2147483647; 118 | -webkit-transform: translate(-50%, -50%); 119 | transform: translate(-50%, -50%); 120 | text-align: center; 121 | width: 240px; 122 | line-height: 1.72; 123 | } 124 | 125 | @font-face {font-family: "m-share-iconfont"; 126 | src: url('data:application/x-font-ttf;charset=utf-8;base64,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') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 127 | } 128 | .m-share-iconfont { 129 | font-family:"m-share-iconfont" !important; 130 | font-size:26px; 131 | font-style:normal; 132 | -webkit-font-smoothing: antialiased; 133 | -moz-osx-font-smoothing: grayscale; 134 | padding: 5px; 135 | margin:0 0 0 10px; 136 | } 137 | .m-share-iconfont:first-child { 138 | margin: 0; 139 | } 140 | .m-share-iconfont-wx { 141 | color: #7bc549; 142 | border: 1px solid #7bc549; 143 | border-radius: 100%; 144 | } 145 | .m-share-iconfont-wx:active { 146 | background: #7bc549; 147 | color: #fff; 148 | } 149 | .m-share-iconfont-wx:before { 150 | content: "\\e61e"; 151 | } 152 | .m-share-iconfont-sina { 153 | color: #ff763b; 154 | border: 1px solid #ff763b; 155 | border-radius: 100%; 156 | } 157 | .m-share-iconfont-sina:active { 158 | background: #ff763b; 159 | color: #fff; 160 | } 161 | .m-share-iconfont-sina:before { 162 | content: "\\e641"; 163 | } 164 | .m-share-iconfont-qzone { 165 | color: #fdbe3d; 166 | border: 1px solid #fdbe3d; 167 | border-radius: 100%; 168 | } 169 | .m-share-iconfont-qzone:active { 170 | background: #fdbe3d; 171 | color: #fff; 172 | } 173 | .m-share-iconfont-qzone:before { 174 | content: "\\e728"; 175 | } 176 | .m-share-iconfont-qq { 177 | color: #56b6e7; 178 | border: 1px solid #56b6e7; 179 | border-radius: 100%; 180 | } 181 | .m-share-iconfont-qq:active { 182 | background: #56b6e7; 183 | color: #fff; 184 | } 185 | .m-share-iconfont-qq:before { 186 | content: "\\e630"; 187 | } 188 | .m-share-iconfont-wxline { 189 | color: #33b045; 190 | border: 1px solid #33b045; 191 | border-radius: 100%; 192 | } 193 | .m-share-iconfont-wxline:active { 194 | background: #33b045; 195 | color: #fff; 196 | } 197 | .m-share-iconfont-wxline:before { 198 | content: "\\e6e9"; 199 | } 200 | .m-share-iconfont-menu { 201 | font-size: 12px; 202 | } 203 | .m-share-iconfont-menu:before { 204 | content: "\\e67e"; 205 | } 206 | .m-share-iconfont-dots { 207 | font-size: 25px; 208 | color: #fff; 209 | } 210 | .m-share-iconfont-dots:before { 211 | content: "\\e656"; 212 | } 213 | .m-share-iconfont-share { 214 | font-size: 17px; 215 | color: #fff; 216 | margin: 0; 217 | } 218 | .m-share-iconfont-share:before { 219 | content: "\\e6ae"; 220 | } 221 | ` 222 | }; -------------------------------------------------------------------------------- /dist/m-share.min.js: -------------------------------------------------------------------------------- 1 | (function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):global.Mshare=factory()})(this,function(){"use strict";var userAgent=window.navigator.userAgent;var util={loadScript:function loadScript(url,callback){var doc=document;var head=doc.head||doc.getElementsByTagName("head")[0]||doc.documentElement;var script=doc.createElement("script");script.type="text/javascript";script.charset="utf-8";if(script.readyState){script.onreadystatechange=function(){if(/loaded|complete/i.test(script.readyState)){script.onreadystatechange=null;callback&&callback.call(this)}}}else{script.onload=function(){callback&&callback.call(this)}}script.src=url;head.insertBefore(script,head.firstChild)},execStyle:function execStyle(cssText){var document=window.document;var styleTag=document.createElement("style");styleTag.setAttribute("type","text/css");if(document.all){styleTag.styleSheet.cssText=cssText}else{styleTag.innerHTML=cssText}document.getElementsByTagName("head").item(0).appendChild(styleTag)},ua:{isFromAndroid:/android/gi.test(userAgent),isFromIos:/iphone|ipod|ios/gi.test(userAgent),isFromWx:/MicroMessenger/gi.test(userAgent),isFromQQ:/mobile.*qq/gi.test(userAgent),isFromUC:/ucbrowser/gi.test(userAgent),isFromQQBrower:/mqqbrowser[^LightApp]/gi.test(userAgent),isFromQQBrowerLight:/MQQBrowserLightApp/gi.test(userAgent)}};var style={cssText:'\n .m-share-mask {\n margin: 0;\n padding: 0;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 2147483646;\n width: 100%;\n height: 100%;\n background: #000;\n opacity: 0;\n -webkit-transition: opacity .2s ease-in;\n transition: opacity .2s ease-in;\n }\n #m-share-actionSheet {\n margin: 0;\n padding: 0;\n font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif;\n position: fixed;\n width: 100%;\n left: 0;\n bottom: 0;\n z-index: 2147483647;\n background: #fff;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 30px 20px;\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n -webkit-transition: -webkit-transform .2s ease-in;\n transition: transform .2s ease-in;\n }\n #m-share-actionSheet div {\n margin: 0;\n padding: 0;\n }\n #m-share-actionSheet .m-share-sheet-title {\n font-size: 12px;\n color: #ababab;\n text-align: center;\n margin:10px 0 0 0;\n }\n #m-share-actionSheet .m-share-flex {\n display: -webkit-box!important;\n display: -webkit-flex!important;\n display: -ms-flexbox!important;\n display: flex!important;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap\n }\n #m-share-actionSheet .m-share-flex>.m-share-cell {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 0;\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n max-width: 100%;\n display: block;\n padding: 0!important;\n position: relative;\n text-align: center;\n }\n #m-share-actionSheet .m-share-iconfont {\n margin: 0;\n }\n .m-share-tips {\n font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif;\n margin: 0;\n padding: 0;\n position: fixed;\n top: 3px;\n color: #fff;\n right: 20px;\n z-index: 2147483647;\n // background-color: #000;\n }\n .m-share-tips .m-share-tips-w {\n margin: 0;\n padding: 0;\n display: inline-block;\n font-size: 18px;\n position: relative;\n right: 1px;\n top: 7px;\n }\n .m-share-tips .m-share-tips-w .m-share-tips-p {\n margin: 0;\n padding: 0;\n color: #fff;\n font-size: 18px;\n }\n .m-share-tips-arrow {\n margin: 0;\n padding: 0;\n display: inline-block;\n width: 54px;\n height: 55px;\n background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABuCAMAAAD1cAb0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC6UExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////3HoUvYAAAA9dFJOUwDIjg4CBPr98Av39C4GghgTQOAnv6h97AjcN2dGH+gcbxAVz1WWIqGvuko0tNP+5eN42YhaUF/WmsQ8Y8we7g2hAAAEn0lEQVQYGe3AVXbjSAAF0CcuMZllZnabE6ff/rc1Lqtp5rdVOfORiy9fvnz5nxvg8wyPBT7LY++LhYtPkdw92rXcxCewjivSrnXwCaxO4ZH87uIT5Os+STtKoZ7Z6fNJLFv4BDVKfjqGereM0v0M9QaRoCRSKGflW75kF6h3Zam/MaHaZudRck5dqBZv2yy1BxbUai0mLO1rBRS7zWz+cEigVnoW/GFfv0GpXpTxl0MPKvWiGn9bdaHQ6FjjHyYB1GkNF/yDc+pAnZvu8U+TIIQq6VmQwudPezGFKmmUkdrSoSTae7IZuFBjHmXke/yNktAzkmJoQol4oTn+yWhQct5nO5v0uy5UcOsTTraD+dLn016LNZL+2YUC7ptm3+uxNV1R8jf5xCZt3YUCtbadRTmMK1/01GjYpDObo2rhuEE2jw9gc6DUfjNCvUnapzEqZm0+yMM0BYxZm1IzALoZyXqOaoXdi2+LILZgdnS+3ACkGekceqjWbdhsag88halPqXY1gDxySC0wUaXrTIj6BZKr2Xzy3+YA3K1PsrBQoWDVb0YFXo6aw6f+EE/jq0/6QxfVGUwyMe2EkPKhT0kb4cmM7iSjMSozyLJv3cSCFMY7SqJI8GQNTiTrLqpi6dl7ARMvZo2St73gJdAcOnqOyqwvBX667RyS+2bdhWTGNZucJKiOYeGHgd6k1DZQGtcdOrM1FLC6S0reOkHJ0Gx6kxgKGFe+zKYmSvOZQ0fPocCgT+m0MPBD0ia91RjVGy/7fLLbAX5aR3s6tR4q1zpubUoN/JJopKPFJqrWOXuU3hITP+WRz714oGpu2qeUdQf4xbr2yeYlQcVa75R8/YHfzM3MtrUGqtagZK+O+FNrptXqLioWTPZ88pcu/sW9dBJULH9rUxI9/FeIihnH75T8aQjVrI83vgxzC6oFHx6l1bQF1QbrPqWsMYBqYfKdkr9IoV5EyXtvQL0GJUeru1AuZWkXQ7me4IvoQTkjYymFckaNpQbUq7GkmVCuwdIkMKBaylJ/HUC1nuCLPw2g2HiesTTsWFCrtzmwFG1aUCvpTliKYEKt0a3OUg2qjRoLvrTbBhRzFwuPUraNoVartd3ZlLRtALXcje45lDK9C7VGRYOlfpFCLXdR9yiJZieAUklSu9uUTqeHAaVGRZ2l9iKAUr3edskX73DpQKlH91vTobRr53MoFI47s4ylpZ5DodC9rL8JSnb7fR1DoXFcX3oszd6SFpSxRvGxLhxKTV+fGlCmhaL4nvHF7utTI4QilpV0dU1wT9LhbtfZQJWWMS2W77Qp+X29mMOEEta8NzyfhGNTEoeoMFwoEJrjXqo3DhPalGyxPD/GIf5WksCECRMlE61Rso7P0/u7ECyJg66P5jDxt+LGbHhbB904H82D3nUzvX4s6tru4LHk+dpkuBm0TPw9a6p5XibuWW21qi9PK+/OzLYdPjmO53ur3frozlGN8NHImsJ2bDrc8zeHTbHQ9HN3MDZRmTAdfNxW2/62eRdS29aaK205e/voBrEbomKW1XI7eRFE3eijMdQ7UV4kc8NIYEKZEC6SMAxh4sv/2T8XLefQYLd95QAAAABJRU5ErkJggg==\');\n background-size: 100%;\n }\n .m-share-tips-bottom {\n font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif;\n margin: 0;\n padding: 0;\n font-size: 18px;\n position: fixed;\n color: #fff;\n top: 50%;\n left: 50%;\n width: 100%;\n z-index: 2147483647;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n text-align: center;\n width: 240px;\n line-height: 1.72;\n }\n\n @font-face {font-family: "m-share-iconfont";\n src: url(\'data:application/x-font-ttf;charset=utf-8;base64,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\') format(\'truetype\'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/\n }\n .m-share-iconfont {\n font-family:"m-share-iconfont" !important;\n font-size:26px;\n font-style:normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n padding: 5px;\n margin:0 0 0 10px;\n }\n .m-share-iconfont:first-child {\n margin: 0;\n }\n .m-share-iconfont-wx {\n color: #7bc549;\n border: 1px solid #7bc549;\n border-radius: 100%;\n }\n .m-share-iconfont-wx:active {\n background: #7bc549;\n color: #fff;\n }\n .m-share-iconfont-wx:before {\n content: "\\e61e";\n }\n .m-share-iconfont-sina {\n color: #ff763b;\n border: 1px solid #ff763b;\n border-radius: 100%;\n }\n .m-share-iconfont-sina:active {\n background: #ff763b;\n color: #fff;\n }\n .m-share-iconfont-sina:before {\n content: "\\e641";\n }\n .m-share-iconfont-qzone {\n color: #fdbe3d;\n border: 1px solid #fdbe3d;\n border-radius: 100%;\n }\n .m-share-iconfont-qzone:active {\n background: #fdbe3d;\n color: #fff;\n }\n .m-share-iconfont-qzone:before {\n content: "\\e728";\n }\n .m-share-iconfont-qq {\n color: #56b6e7;\n border: 1px solid #56b6e7;\n border-radius: 100%;\n }\n .m-share-iconfont-qq:active {\n background: #56b6e7;\n color: #fff;\n }\n .m-share-iconfont-qq:before {\n content: "\\e630";\n }\n .m-share-iconfont-wxline {\n color: #33b045;\n border: 1px solid #33b045;\n border-radius: 100%;\n }\n .m-share-iconfont-wxline:active {\n background: #33b045;\n color: #fff;\n }\n .m-share-iconfont-wxline:before {\n content: "\\e6e9";\n }\n .m-share-iconfont-menu {\n font-size: 12px;\n }\n .m-share-iconfont-menu:before {\n content: "\\e67e";\n }\n .m-share-iconfont-dots {\n font-size: 25px;\n color: #fff;\n }\n .m-share-iconfont-dots:before {\n content: "\\e656";\n }\n .m-share-iconfont-share {\n font-size: 17px;\n color: #fff;\n margin: 0;\n }\n .m-share-iconfont-share:before {\n content: "\\e6ae";\n }\n '};var isStyleLoaded=false;var ui={initStyle:function initStyle(){if(!isStyleLoaded){util.execStyle(style.cssText);isStyleLoaded=true}},showActionSheet:function showActionSheet(dom){this.showMask();var $sheet=document.createElement("div");$sheet.id="m-share-actionSheet";$sheet.appendChild(dom);document.body.appendChild($sheet);window.setTimeout(function(){$sheet.style.cssText="-webkit-transform: translateY(0);transform: translateY(0);"},0)},hideActionSheet:function hideActionSheet(){var dom=document.querySelector("#m-share-actionSheet");if(dom){dom.remove()}},showMask:function showMask(){var _this=this;if(document.querySelector(".m-share-mask")){return}var $div=document.createElement("div");$div.className="m-share-mask";$div.addEventListener("click",function(){_this.hideActionSheet();_this.hideBottomTips();_this.hideRightTips();_this.hideMask()});document.body.appendChild($div);window.setTimeout(function(){$div.style.opacity=.7},0)},hideMask:function hideMask(){var domList=document.querySelectorAll(".m-share-mask");var _loop=function _loop(i){var item=domList[i];var removeDom=function removeDom(){return item.remove()};removeDom()};for(var i=0;i”或“”';document.body.appendChild($tips);window.setTimeout(function(){_this2.hideMask();_this2.hideBottomTips()},1400)},hideBottomTips:function hideBottomTips(){var domList=document.querySelectorAll(".m-share-tips-bottom");for(var i=0;i\n \n \n \n \n ';document.body.appendChild($tips);window.setTimeout(function(){_this3.hideMask();_this3.hideRightTips()},1400)},hideRightTips:function hideRightTips(){var domList=document.querySelectorAll(".m-share-tips");for(var i=0;i=0){return''}return""};var tmp="";_config.types.forEach(function(item){tmp+=getTmpl(item)});if(typeof dom==="string"){dom=document.querySelector(dom)}if(!dom){return}dom.innerHTML=tmp;dom.addEventListener("click",function(e){var target=e.target;typesMap.forEach(function(item){if(target.classList.contains("m-share-"+item)){var shareData={title:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].title||_config.title,desc:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].desc||_config.desc,link:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].link||_config.link,imgUrl:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].imgUrl||_config.imgUrl,fnDoShare:_config.fnDoShare};_this.to(item,shareData)}})})},to:function to(type,config){var _config=getDefaultConfig(config);_init(_config);if(typesMap.indexOf(type)>=0){if(_config.fnDoShare){_config.fnDoShare(type)}shareFuncMap[type](_config)}},popup:function popup(config){var _this2=this;var _config=getDefaultConfig(config);_init(_config);var textMap={wx:"微信好友",wxline:"朋友圈",qq:"QQ好友",qzone:"QQ空间",sina:"微博"};var dom=document.createElement("div");dom.className="m-share-flex";var tmp="";var getTmpl=function getTmpl(type){if(typesMap.indexOf(type)>=0){return'"}return""};_config.types.forEach(function(item){tmp+=getTmpl(item)});dom.innerHTML=tmp;dom.addEventListener("click",function(e){var target=e.target;typesMap.forEach(function(item){if(target.classList.contains("m-share-"+item)){ui.hideActionSheet();var shareData={title:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].title||_config.title,desc:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].desc||_config.desc,link:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].link||_config.link,imgUrl:_config.infoMap&&_config.infoMap[item]&&_config.infoMap[item].imgUrl||_config.imgUrl,fnDoShare:_config.fnDoShare};_this2.to(item,shareData)}})});ui.showActionSheet(dom)}};return index}); -------------------------------------------------------------------------------- /dist/m-share.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global.Mshare = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | var userAgent = window.navigator.userAgent; 8 | var util = { 9 | loadScript: function loadScript(url, callback) { 10 | var doc = document; 11 | var head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement; 12 | var script = doc.createElement('script'); 13 | script.type = 'text/javascript'; 14 | script.charset = 'utf-8'; 15 | if (script.readyState) { 16 | script.onreadystatechange = function () { 17 | if (/loaded|complete/i.test(script.readyState)) { 18 | script.onreadystatechange = null; 19 | callback && callback.call(this); 20 | } 21 | }; 22 | } else { 23 | script.onload = function () { 24 | callback && callback.call(this); 25 | }; 26 | } 27 | script.src = url; 28 | head.insertBefore(script, head.firstChild); 29 | }, 30 | execStyle: function execStyle(cssText) { 31 | var document = window.document; 32 | var styleTag = document.createElement('style'); 33 | styleTag.setAttribute('type', 'text/css'); 34 | if (document.all) { 35 | styleTag.styleSheet.cssText = cssText; 36 | } else { 37 | styleTag.innerHTML = cssText; 38 | } 39 | document.getElementsByTagName("head").item(0).appendChild(styleTag); 40 | }, 41 | 42 | ua: { 43 | isFromAndroid: /android/gi.test(userAgent), 44 | isFromIos: /iphone|ipod|ios/gi.test(userAgent), 45 | isFromWx: /MicroMessenger/gi.test(userAgent), 46 | isFromQQ: /mobile.*qq/gi.test(userAgent), 47 | isFromUC: /ucbrowser/gi.test(userAgent), 48 | isFromQQBrower: /mqqbrowser[^LightApp]/gi.test(userAgent), 49 | isFromQQBrowerLight: /MQQBrowserLightApp/gi.test(userAgent) 50 | } 51 | }; 52 | 53 | var style = { 54 | cssText: "\n .m-share-mask {\n margin: 0;\n padding: 0;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 2147483646;\n width: 100%;\n height: 100%;\n background: #000;\n opacity: 0;\n -webkit-transition: opacity .2s ease-in;\n transition: opacity .2s ease-in;\n }\n #m-share-actionSheet {\n margin: 0;\n padding: 0;\n font-family: \"PingFang SC\",Arial,\"\\5FAE\\8F6F\\96C5\\9ED1\",Helvetica,sans-serif;\n position: fixed;\n width: 100%;\n left: 0;\n bottom: 0;\n z-index: 2147483647;\n background: #fff;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 30px 20px;\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n -webkit-transition: -webkit-transform .2s ease-in;\n transition: transform .2s ease-in;\n }\n #m-share-actionSheet div {\n margin: 0;\n padding: 0;\n }\n #m-share-actionSheet .m-share-sheet-title {\n font-size: 12px;\n color: #ababab;\n text-align: center;\n margin:10px 0 0 0;\n }\n #m-share-actionSheet .m-share-flex {\n display: -webkit-box!important;\n display: -webkit-flex!important;\n display: -ms-flexbox!important;\n display: flex!important;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap\n }\n #m-share-actionSheet .m-share-flex>.m-share-cell {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 0;\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n max-width: 100%;\n display: block;\n padding: 0!important;\n position: relative;\n text-align: center;\n }\n #m-share-actionSheet .m-share-iconfont {\n margin: 0;\n }\n .m-share-tips {\n font-family: \"PingFang SC\",Arial,\"\\5FAE\\8F6F\\96C5\\9ED1\",Helvetica,sans-serif;\n margin: 0;\n padding: 0;\n position: fixed;\n top: 3px;\n color: #fff;\n right: 20px;\n z-index: 2147483647;\n // background-color: #000;\n }\n .m-share-tips .m-share-tips-w {\n margin: 0;\n padding: 0;\n display: inline-block;\n font-size: 18px;\n position: relative;\n right: 1px;\n top: 7px;\n }\n .m-share-tips .m-share-tips-w .m-share-tips-p {\n margin: 0;\n padding: 0;\n color: #fff;\n font-size: 18px;\n }\n .m-share-tips-arrow {\n margin: 0;\n padding: 0;\n display: inline-block;\n width: 54px;\n height: 55px;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABuCAMAAAD1cAb0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC6UExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////3HoUvYAAAA9dFJOUwDIjg4CBPr98Av39C4GghgTQOAnv6h97AjcN2dGH+gcbxAVz1WWIqGvuko0tNP+5eN42YhaUF/WmsQ8Y8we7g2hAAAEn0lEQVQYGe3AVXbjSAAF0CcuMZllZnabE6ff/rc1Lqtp5rdVOfORiy9fvnz5nxvg8wyPBT7LY++LhYtPkdw92rXcxCewjivSrnXwCaxO4ZH87uIT5Os+STtKoZ7Z6fNJLFv4BDVKfjqGereM0v0M9QaRoCRSKGflW75kF6h3Zam/MaHaZudRck5dqBZv2yy1BxbUai0mLO1rBRS7zWz+cEigVnoW/GFfv0GpXpTxl0MPKvWiGn9bdaHQ6FjjHyYB1GkNF/yDc+pAnZvu8U+TIIQq6VmQwudPezGFKmmUkdrSoSTae7IZuFBjHmXke/yNktAzkmJoQol4oTn+yWhQct5nO5v0uy5UcOsTTraD+dLn016LNZL+2YUC7ptm3+uxNV1R8jf5xCZt3YUCtbadRTmMK1/01GjYpDObo2rhuEE2jw9gc6DUfjNCvUnapzEqZm0+yMM0BYxZm1IzALoZyXqOaoXdi2+LILZgdnS+3ACkGekceqjWbdhsag88halPqXY1gDxySC0wUaXrTIj6BZKr2Xzy3+YA3K1PsrBQoWDVb0YFXo6aw6f+EE/jq0/6QxfVGUwyMe2EkPKhT0kb4cmM7iSjMSozyLJv3cSCFMY7SqJI8GQNTiTrLqpi6dl7ARMvZo2St73gJdAcOnqOyqwvBX667RyS+2bdhWTGNZucJKiOYeGHgd6k1DZQGtcdOrM1FLC6S0reOkHJ0Gx6kxgKGFe+zKYmSvOZQ0fPocCgT+m0MPBD0ia91RjVGy/7fLLbAX5aR3s6tR4q1zpubUoN/JJopKPFJqrWOXuU3hITP+WRz714oGpu2qeUdQf4xbr2yeYlQcVa75R8/YHfzM3MtrUGqtagZK+O+FNrptXqLioWTPZ88pcu/sW9dBJULH9rUxI9/FeIihnH75T8aQjVrI83vgxzC6oFHx6l1bQF1QbrPqWsMYBqYfKdkr9IoV5EyXtvQL0GJUeru1AuZWkXQ7me4IvoQTkjYymFckaNpQbUq7GkmVCuwdIkMKBaylJ/HUC1nuCLPw2g2HiesTTsWFCrtzmwFG1aUCvpTliKYEKt0a3OUg2qjRoLvrTbBhRzFwuPUraNoVartd3ZlLRtALXcje45lDK9C7VGRYOlfpFCLXdR9yiJZieAUklSu9uUTqeHAaVGRZ2l9iKAUr3edskX73DpQKlH91vTobRr53MoFI47s4ylpZ5DodC9rL8JSnb7fR1DoXFcX3oszd6SFpSxRvGxLhxKTV+fGlCmhaL4nvHF7utTI4QilpV0dU1wT9LhbtfZQJWWMS2W77Qp+X29mMOEEta8NzyfhGNTEoeoMFwoEJrjXqo3DhPalGyxPD/GIf5WksCECRMlE61Rso7P0/u7ECyJg66P5jDxt+LGbHhbB904H82D3nUzvX4s6tru4LHk+dpkuBm0TPw9a6p5XibuWW21qi9PK+/OzLYdPjmO53ur3frozlGN8NHImsJ2bDrc8zeHTbHQ9HN3MDZRmTAdfNxW2/62eRdS29aaK205e/voBrEbomKW1XI7eRFE3eijMdQ7UV4kc8NIYEKZEC6SMAxh4sv/2T8XLefQYLd95QAAAABJRU5ErkJggg==');\n background-size: 100%;\n }\n .m-share-tips-bottom {\n font-family: \"PingFang SC\",Arial,\"\\5FAE\\8F6F\\96C5\\9ED1\",Helvetica,sans-serif;\n margin: 0;\n padding: 0;\n font-size: 18px;\n position: fixed;\n color: #fff;\n top: 50%;\n left: 50%;\n width: 100%;\n z-index: 2147483647;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n text-align: center;\n width: 240px;\n line-height: 1.72;\n }\n\n @font-face {font-family: \"m-share-iconfont\";\n src: url('data:application/x-font-ttf;charset=utf-8;base64,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') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/\n }\n .m-share-iconfont {\n font-family:\"m-share-iconfont\" !important;\n font-size:26px;\n font-style:normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n padding: 5px;\n margin:0 0 0 10px;\n }\n .m-share-iconfont:first-child {\n margin: 0;\n }\n .m-share-iconfont-wx {\n color: #7bc549;\n border: 1px solid #7bc549;\n border-radius: 100%;\n }\n .m-share-iconfont-wx:active {\n background: #7bc549;\n color: #fff;\n }\n .m-share-iconfont-wx:before {\n content: \"\\e61e\";\n }\n .m-share-iconfont-sina {\n color: #ff763b;\n border: 1px solid #ff763b;\n border-radius: 100%;\n }\n .m-share-iconfont-sina:active {\n background: #ff763b;\n color: #fff;\n }\n .m-share-iconfont-sina:before {\n content: \"\\e641\";\n }\n .m-share-iconfont-qzone {\n color: #fdbe3d;\n border: 1px solid #fdbe3d;\n border-radius: 100%;\n }\n .m-share-iconfont-qzone:active {\n background: #fdbe3d;\n color: #fff;\n }\n .m-share-iconfont-qzone:before {\n content: \"\\e728\";\n }\n .m-share-iconfont-qq {\n color: #56b6e7;\n border: 1px solid #56b6e7;\n border-radius: 100%;\n }\n .m-share-iconfont-qq:active {\n background: #56b6e7;\n color: #fff;\n }\n .m-share-iconfont-qq:before {\n content: \"\\e630\";\n }\n .m-share-iconfont-wxline {\n color: #33b045;\n border: 1px solid #33b045;\n border-radius: 100%;\n }\n .m-share-iconfont-wxline:active {\n background: #33b045;\n color: #fff;\n }\n .m-share-iconfont-wxline:before {\n content: \"\\e6e9\";\n }\n .m-share-iconfont-menu {\n font-size: 12px;\n }\n .m-share-iconfont-menu:before {\n content: \"\\e67e\";\n }\n .m-share-iconfont-dots {\n font-size: 25px;\n color: #fff;\n }\n .m-share-iconfont-dots:before {\n content: \"\\e656\";\n }\n .m-share-iconfont-share {\n font-size: 17px;\n color: #fff;\n margin: 0;\n }\n .m-share-iconfont-share:before {\n content: \"\\e6ae\";\n }\n " 55 | }; 56 | 57 | var isStyleLoaded = false; 58 | var ui = { 59 | initStyle: function initStyle() { 60 | if (!isStyleLoaded) { 61 | util.execStyle(style.cssText); 62 | isStyleLoaded = true; 63 | } 64 | }, 65 | showActionSheet: function showActionSheet(dom) { 66 | this.showMask(); 67 | var $sheet = document.createElement('div'); 68 | $sheet.id = 'm-share-actionSheet'; 69 | $sheet.appendChild(dom); 70 | document.body.appendChild($sheet); 71 | window.setTimeout(function () { 72 | $sheet.style.cssText = '-webkit-transform: translateY(0);transform: translateY(0);'; 73 | }, 0); 74 | }, 75 | hideActionSheet: function hideActionSheet() { 76 | var dom = document.querySelector('#m-share-actionSheet'); 77 | if (dom) { 78 | dom.remove(); 79 | } 80 | }, 81 | showMask: function showMask() { 82 | var _this = this; 83 | 84 | if (document.querySelector('.m-share-mask')) { 85 | return; 86 | } 87 | var $div = document.createElement('div'); 88 | $div.className = 'm-share-mask'; 89 | $div.addEventListener('click', function () { 90 | _this.hideActionSheet(); 91 | _this.hideBottomTips(); 92 | _this.hideRightTips(); 93 | _this.hideMask(); 94 | }); 95 | document.body.appendChild($div); 96 | window.setTimeout(function () { 97 | $div.style.opacity = 0.7; 98 | }, 0); 99 | }, 100 | hideMask: function hideMask() { 101 | var domList = document.querySelectorAll('.m-share-mask'); 102 | 103 | var _loop = function _loop(i) { 104 | var item = domList[i]; 105 | var removeDom = function removeDom() { 106 | return item.remove(); 107 | }; 108 | 109 | removeDom(); 110 | }; 111 | 112 | for (var i = 0; i < domList.length; i++) { 113 | _loop(i); 114 | } 115 | }, 116 | showBottomTips: function showBottomTips() { 117 | var _this2 = this; 118 | 119 | this.showMask(); 120 | var $tips = document.createElement('div'); 121 | $tips.className = 'm-share-tips-bottom'; 122 | $tips.innerHTML = '请打开浏览器的菜单进行分享点击“”或“”'; 123 | document.body.appendChild($tips); 124 | window.setTimeout(function () { 125 | _this2.hideMask(); 126 | _this2.hideBottomTips(); 127 | }, 1400); 128 | }, 129 | hideBottomTips: function hideBottomTips() { 130 | var domList = document.querySelectorAll('.m-share-tips-bottom'); 131 | for (var i = 0; i < domList.length; i++) { 132 | var _item = domList[i]; 133 | _item.remove(); 134 | } 135 | }, 136 | showRightTopTips: function showRightTopTips() { 137 | var _this3 = this; 138 | 139 | this.showMask(); 140 | var $tips = document.createElement('div'); 141 | $tips.className = 'm-share-tips'; 142 | $tips.innerHTML = '\n \n \n '; 143 | document.body.appendChild($tips); 144 | window.setTimeout(function () { 145 | _this3.hideMask(); 146 | _this3.hideRightTips(); 147 | }, 1400); 148 | }, 149 | hideRightTips: function hideRightTips() { 150 | var domList = document.querySelectorAll('.m-share-tips'); 151 | for (var i = 0; i < domList.length; i++) { 152 | var _item2 = domList[i]; 153 | _item2.remove(); 154 | } 155 | } 156 | }; 157 | 158 | var setNormalShareInfo = (function (info) { 159 | if (info.desc && !document.querySelector('meta[name$="cription"]')) { 160 | var $meta = document.createElement('meta'); 161 | $meta.setAttribute('description', info.desc); 162 | } 163 | 164 | if (info.imgUrl) { 165 | var $img = document.createElement('img'); 166 | $img.style.cssText = 'width: 0;height: 0;position: absolute;z-index: -9999;top: -99999px;left: -99999px;'; 167 | $img.onload = function () { 168 | document.body.insertBefore($img, document.body.firstChild); 169 | }; 170 | $img.onerror = function () { 171 | $img.remove(); 172 | }; 173 | $img.src = info.imgUrl; 174 | } 175 | }); 176 | 177 | var qqJsSdkUrl = '//open.mobile.qq.com/sdk/qqapi.js?_bid=152'; 178 | 179 | var setShareInfo = function setShareInfo(info) { 180 | mqq.data.setShareInfo({ 181 | share_url: info.link, 182 | title: info.title, 183 | desc: info.desc, 184 | image_url: info.imgUrl 185 | }); 186 | }; 187 | 188 | var setQQshareInfo = (function (info) { 189 | if (window.mqq && mqq.data && mqq.data.setShareInfo) { 190 | setShareInfo(info); 191 | } else { 192 | util.loadScript(qqJsSdkUrl, function () { 193 | setShareInfo(info); 194 | }); 195 | } 196 | }); 197 | 198 | var isInit = false; 199 | 200 | var _init = (function (config) { 201 | if (!isInit) { 202 | var info = { 203 | title: config.title, 204 | desc: config.desc, 205 | link: config.link, 206 | imgUrl: config.imgUrl 207 | }; 208 | isInit = true; 209 | ui.initStyle(); 210 | if (config.setNormal !== false) { 211 | setNormalShareInfo(info); 212 | } 213 | 214 | if (util.ua.isFromQQ) { 215 | setQQshareInfo(config.types, info); 216 | } 217 | } 218 | }); 219 | 220 | var wxJsSdkUrl = '//res.wx.qq.com/open/js/jweixin-1.2.0.js'; 221 | 222 | var setShareInfo$1 = function setShareInfo(type, info) { 223 | switch (type) { 224 | case 'wx': 225 | wx.onMenuShareAppMessage(info); 226 | break; 227 | case 'wxline': 228 | wx.onMenuShareTimeline(info); 229 | break; 230 | case 'qq': 231 | wx.onMenuShareQQ(info); 232 | break; 233 | case 'qzone': 234 | wx.onMenuShareQZone(info); 235 | break; 236 | } 237 | }; 238 | 239 | var isConfig = false; 240 | 241 | var setWxShareInfo = (function (types, config) { 242 | var wxConfig = config.wx; 243 | var doSet = function doSet() { 244 | var _wxConfig = Object.assign({ 245 | jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo'] 246 | }, wxConfig); 247 | if (!isConfig) { 248 | wx.config(_wxConfig); 249 | isConfig = true; 250 | } 251 | wx.ready(function () { 252 | try { 253 | types.forEach(function (item) { 254 | var _info = { 255 | title: config.infoMap && config.infoMap[item] && config.infoMap[item].title || config.title, 256 | desc: config.infoMap && config.infoMap[item] && config.infoMap[item].desc || config.desc, 257 | link: config.infoMap && config.infoMap[item] && config.infoMap[item].link || config.link, 258 | imgUrl: config.infoMap && config.infoMap[item] && config.infoMap[item].imgUrl || config.imgUrl 259 | }; 260 | setShareInfo$1(item, _info); 261 | }); 262 | } catch (e) {} 263 | }); 264 | }; 265 | if (window.wx) { 266 | doSet(); 267 | } else { 268 | util.loadScript(wxJsSdkUrl, function () { 269 | doSet(); 270 | }); 271 | } 272 | }); 273 | 274 | var qqShareJsSdk = '//jsapi.qq.com/get?api=app.setShareInfo,app.share'; 275 | 276 | var qqBrowserShare = (function (type, info) { 277 | var doShare = function doShare(to_app) { 278 | var _doShare = function _doShare() { 279 | try { 280 | browser.app.share({ 281 | title: info.title, 282 | description: info.desc, 283 | url: info.link, 284 | img_url: info.imgUrl, 285 | to_app: to_app 286 | }, function (res) {}); 287 | } catch (e) {} 288 | }; 289 | if (window.browser && browser.app && browser.app.share) { 290 | _doShare(); 291 | } else { 292 | util.loadScript(qqShareJsSdk, _doShare); 293 | } 294 | }; 295 | switch (type) { 296 | case 'wx': 297 | doShare(1); 298 | break; 299 | case 'wxline': 300 | doShare(8); 301 | break; 302 | case 'qq': 303 | doShare(4); 304 | break; 305 | case 'qzone': 306 | doShare(3); 307 | break; 308 | case 'sina': 309 | doShare(11); 310 | break; 311 | } 312 | }); 313 | 314 | var wxShare = (function (info) { 315 | if (util.ua.isFromWx) { 316 | ui.showRightTopTips(); 317 | return; 318 | } 319 | 320 | if (util.ua.isFromQQ) { 321 | ui.showRightTopTips(); 322 | return; 323 | } 324 | if (util.ua.isFromUC) { 325 | ui.hideMask(); 326 | if (util.ua.isFromIos) { 327 | window.ucbrowser && window.ucbrowser.web_share(info.title, info.desc, info.link, 'kWeixin', info.imgUrl, '', ''); 328 | } else { 329 | window.ucweb && window.ucweb.startRequest("shell.page_share", [info.title, info.desc, info.link, 'WechatFriends', info.imgUrl, '']); 330 | } 331 | return; 332 | } 333 | 334 | if (util.ua.isFromQQBrower) { 335 | ui.hideMask(); 336 | qqBrowserShare('wx', info); 337 | return; 338 | } 339 | 340 | ui.showBottomTips(); 341 | }); 342 | 343 | var wxlineShare = (function (info) { 344 | if (util.ua.isFromWx) { 345 | ui.showRightTopTips(); 346 | return; 347 | } 348 | 349 | if (util.ua.isFromQQ) { 350 | ui.showRightTopTips(); 351 | return; 352 | } 353 | 354 | if (util.ua.isFromUC) { 355 | ui.hideMask(); 356 | if (util.ua.isFromIos) { 357 | window.ucbrowser && window.ucbrowser.web_share(info.title, info.desc, info.link, 'kWeixinFriend', info.imgUrl, '', ''); 358 | } else { 359 | window.ucweb && window.ucweb.startRequest("shell.page_share", [info.title, info.desc, info.link, 'WechatTimeline', info.imgUrl, '']); 360 | } 361 | return; 362 | } 363 | 364 | if (util.ua.isFromQQBrower) { 365 | ui.hideMask(); 366 | qqBrowserShare('wxline', info); 367 | return; 368 | } 369 | 370 | ui.showBottomTips(); 371 | }); 372 | 373 | var qqShare = (function (info) { 374 | if (util.ua.isFromWx) { 375 | ui.showRightTopTips(); 376 | return; 377 | } 378 | 379 | if (util.ua.isFromQQ) { 380 | ui.showRightTopTips(); 381 | return; 382 | } 383 | 384 | if (util.ua.isFromQQBrower) { 385 | ui.hideMask(); 386 | qqBrowserShare('qq', info); 387 | return; 388 | } 389 | 390 | ui.showBottomTips(); 391 | }); 392 | 393 | var qzoneShare = (function (info) { 394 | if (util.ua.isFromWx) { 395 | ui.showRightTopTips(); 396 | return; 397 | } 398 | 399 | if (util.ua.isFromQQ) { 400 | ui.showRightTopTips(); 401 | return; 402 | } 403 | 404 | if (util.ua.isFromQQBrower) { 405 | ui.hideMask(); 406 | qqBrowserShare('qzone', info); 407 | return; 408 | } 409 | var query = 'url=' + encodeURIComponent(info.link) + '&title=' + encodeURIComponent(info.title) + '&desc=' + encodeURIComponent(info.desc) + '&summary=' + encodeURIComponent(info.desc) + '&site=' + encodeURIComponent(info.link); 410 | location.href = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?' + query; 411 | }); 412 | 413 | var sinaShare = (function (info) { 414 | if (util.ua.isFromQQBrower) { 415 | ui.hideMask(); 416 | qqBrowserShare('sina', info); 417 | return; 418 | } 419 | 420 | var query = 'url=' + encodeURIComponent(info.link) + '&title=' + encodeURIComponent(info.desc) + '&desc=' + encodeURIComponent(info.desc) + '&pic=' + encodeURIComponent(info.imgUrl); 421 | location.href = 'http://service.weibo.com/share/share.php?' + query; 422 | }); 423 | 424 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 425 | 426 | var shareFuncMap = { 427 | wx: wxShare, 428 | wxline: wxlineShare, 429 | qq: qqShare, 430 | qzone: qzoneShare, 431 | sina: sinaShare 432 | }; 433 | 434 | var typesMap = ['wx', 'wxline', 'qq', 'qzone', 'sina']; 435 | 436 | var getDefaultConfig = function getDefaultConfig(config) { 437 | config = config || {}; 438 | var infoMapType = _typeof(config.infoMap); 439 | return { 440 | title: config && config.title || document.title, 441 | desc: config && config.desc || document.querySelector('meta[name$="cription"]') && document.querySelector('meta[name$="cription"]').getAttribute('content') || '', 442 | link: encodeURI(config && config.link || window.location.href), 443 | imgUrl: config && config.imgUrl || document.querySelector('img') && document.querySelector('img').getAttribute('src') || '', 444 | types: config && Array.isArray(config.types) && config.types || ['wx', 'wxline', 'qq', 'qzone', 'sina'], 445 | wx: config && config.wx || null, 446 | fnDoShare: config.fnDoShare, 447 | infoMap: infoMapType === 'function' || infoMapType === 'object' && !!config.infoMap ? config.infoMap : {} 448 | }; 449 | }; 450 | 451 | var index = { 452 | wxConfig: function wxConfig(config) { 453 | var _config = getDefaultConfig(config); 454 | if (util.ua.isFromWx && _config.wx && _config.wx.appId && _config.wx.timestamp && _config.wx.nonceStr && _config.wx.signature) { 455 | setWxShareInfo(typesMap, _config); 456 | } 457 | }, 458 | init: function init(config) { 459 | var _config = getDefaultConfig(config); 460 | _init(_config); 461 | var domList = document.querySelectorAll('.m-share'); 462 | 463 | for (var i = 0; i < domList.length; i++) { 464 | var item = domList[i]; 465 | this.render(item, _config); 466 | } 467 | }, 468 | render: function render(dom, config) { 469 | var _this = this; 470 | 471 | var _config = getDefaultConfig(config); 472 | _init(_config); 473 | var getTmpl = function getTmpl(type) { 474 | if (typesMap.indexOf(type) >= 0) { 475 | return ''; 476 | } 477 | return ''; 478 | }; 479 | var tmp = ''; 480 | _config.types.forEach(function (item) { 481 | tmp += getTmpl(item); 482 | }); 483 | if (typeof dom === 'string') { 484 | dom = document.querySelector(dom); 485 | } 486 | if (!dom) { 487 | return; 488 | } 489 | dom.innerHTML = tmp; 490 | dom.addEventListener('click', function (e) { 491 | var target = e.target; 492 | typesMap.forEach(function (item) { 493 | if (target.classList.contains('m-share-' + item)) { 494 | var shareData = { 495 | title: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].title || _config.title, 496 | desc: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].desc || _config.desc, 497 | link: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].link || _config.link, 498 | imgUrl: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].imgUrl || _config.imgUrl, 499 | fnDoShare: _config.fnDoShare 500 | }; 501 | _this.to(item, shareData); 502 | } 503 | }); 504 | }); 505 | }, 506 | to: function to(type, config) { 507 | var _config = getDefaultConfig(config); 508 | _init(_config); 509 | if (typesMap.indexOf(type) >= 0) { 510 | if (_config.fnDoShare) { 511 | _config.fnDoShare(type); 512 | } 513 | shareFuncMap[type](_config); 514 | } 515 | }, 516 | popup: function popup(config) { 517 | var _this2 = this; 518 | 519 | var _config = getDefaultConfig(config); 520 | _init(_config); 521 | var textMap = { 522 | wx: '微信好友', 523 | wxline: '朋友圈', 524 | qq: 'QQ好友', 525 | qzone: 'QQ空间', 526 | sina: '微博' 527 | }; 528 | var dom = document.createElement('div'); 529 | dom.className = 'm-share-flex'; 530 | var tmp = ''; 531 | var getTmpl = function getTmpl(type) { 532 | if (typesMap.indexOf(type) >= 0) { 533 | return ''; 534 | } 535 | return ''; 536 | }; 537 | _config.types.forEach(function (item) { 538 | tmp += getTmpl(item); 539 | }); 540 | dom.innerHTML = tmp; 541 | dom.addEventListener('click', function (e) { 542 | var target = e.target; 543 | typesMap.forEach(function (item) { 544 | if (target.classList.contains('m-share-' + item)) { 545 | ui.hideActionSheet(); 546 | var shareData = { 547 | title: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].title || _config.title, 548 | desc: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].desc || _config.desc, 549 | link: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].link || _config.link, 550 | imgUrl: _config.infoMap && _config.infoMap[item] && _config.infoMap[item].imgUrl || _config.imgUrl, 551 | fnDoShare: _config.fnDoShare 552 | }; 553 | _this2.to(item, shareData); 554 | } 555 | }); 556 | }); 557 | ui.showActionSheet(dom); 558 | } 559 | }; 560 | 561 | return index; 562 | 563 | }))); 564 | -------------------------------------------------------------------------------- /dist/m-share-es6.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: backtonature 3 | * @Date: 2018-05-22 20:08:19 4 | * @Last Modified by: backtonature 5 | * @Last Modified time: 2018-05-29 11:24:07 6 | */ 7 | const userAgent = window.navigator.userAgent; 8 | var util = { 9 | loadScript(url, callback) { 10 | const doc = document; 11 | const head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement; 12 | const script = doc.createElement('script'); 13 | script.type = 'text/javascript'; 14 | script.charset = 'utf-8'; 15 | if (script.readyState) { 16 | script.onreadystatechange = function () { 17 | if (/loaded|complete/i.test(script.readyState)) { 18 | script.onreadystatechange = null; 19 | callback && callback.call(this); 20 | } 21 | }; 22 | } else { 23 | script.onload = function () { 24 | callback && callback.call(this); 25 | }; 26 | } 27 | script.src = url; 28 | head.insertBefore(script, head.firstChild); 29 | }, 30 | execStyle(cssText) { 31 | const document = window.document; 32 | const styleTag = document.createElement('style'); 33 | styleTag.setAttribute('type', 'text/css'); 34 | if (document.all) { 35 | styleTag.styleSheet.cssText = cssText; 36 | } else { 37 | styleTag.innerHTML = cssText; 38 | } 39 | document.getElementsByTagName("head").item(0).appendChild(styleTag); 40 | }, 41 | ua: { 42 | isFromAndroid: /android/gi.test(userAgent), 43 | isFromIos: /iphone|ipod|ios/gi.test(userAgent), 44 | isFromWx: /MicroMessenger/gi.test(userAgent), 45 | isFromQQ: /mobile.*qq/gi.test(userAgent), 46 | isFromUC: /ucbrowser/gi.test(userAgent), 47 | isFromQQBrower: /mqqbrowser[^LightApp]/gi.test(userAgent), 48 | isFromQQBrowerLight: /MQQBrowserLightApp/gi.test(userAgent) 49 | } 50 | }; 51 | 52 | var style = { 53 | cssText: ` 54 | .m-share-mask { 55 | margin: 0; 56 | padding: 0; 57 | position: fixed; 58 | left: 0; 59 | bottom: 0; 60 | z-index: 2147483646; 61 | width: 100%; 62 | height: 100%; 63 | background: #000; 64 | opacity: 0; 65 | -webkit-transition: opacity .2s ease-in; 66 | transition: opacity .2s ease-in; 67 | } 68 | #m-share-actionSheet { 69 | margin: 0; 70 | padding: 0; 71 | font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif; 72 | position: fixed; 73 | width: 100%; 74 | left: 0; 75 | bottom: 0; 76 | z-index: 2147483647; 77 | background: #fff; 78 | -webkit-box-sizing: border-box; 79 | box-sizing: border-box; 80 | padding: 30px 20px; 81 | -webkit-transform: translateY(100%); 82 | transform: translateY(100%); 83 | -webkit-transition: -webkit-transform .2s ease-in; 84 | transition: transform .2s ease-in; 85 | } 86 | #m-share-actionSheet div { 87 | margin: 0; 88 | padding: 0; 89 | } 90 | #m-share-actionSheet .m-share-sheet-title { 91 | font-size: 12px; 92 | color: #ababab; 93 | text-align: center; 94 | margin:10px 0 0 0; 95 | } 96 | #m-share-actionSheet .m-share-flex { 97 | display: -webkit-box!important; 98 | display: -webkit-flex!important; 99 | display: -ms-flexbox!important; 100 | display: flex!important; 101 | -webkit-flex-wrap: wrap; 102 | -ms-flex-wrap: wrap; 103 | flex-wrap: wrap 104 | } 105 | #m-share-actionSheet .m-share-flex>.m-share-cell { 106 | -webkit-box-flex: 1; 107 | -webkit-flex: 1; 108 | -ms-flex: 1; 109 | flex: 1; 110 | width: 0; 111 | -webkit-flex-basis: 0; 112 | -ms-flex-preferred-size: 0; 113 | flex-basis: 0; 114 | max-width: 100%; 115 | display: block; 116 | padding: 0!important; 117 | position: relative; 118 | text-align: center; 119 | } 120 | #m-share-actionSheet .m-share-iconfont { 121 | margin: 0; 122 | } 123 | .m-share-tips { 124 | font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif; 125 | margin: 0; 126 | padding: 0; 127 | position: fixed; 128 | top: 3px; 129 | color: #fff; 130 | right: 20px; 131 | z-index: 2147483647; 132 | // background-color: #000; 133 | } 134 | .m-share-tips .m-share-tips-w { 135 | margin: 0; 136 | padding: 0; 137 | display: inline-block; 138 | font-size: 18px; 139 | position: relative; 140 | right: 1px; 141 | top: 7px; 142 | } 143 | .m-share-tips .m-share-tips-w .m-share-tips-p { 144 | margin: 0; 145 | padding: 0; 146 | color: #fff; 147 | font-size: 18px; 148 | } 149 | .m-share-tips-arrow { 150 | margin: 0; 151 | padding: 0; 152 | display: inline-block; 153 | width: 54px; 154 | height: 55px; 155 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABuCAMAAAD1cAb0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC6UExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////3HoUvYAAAA9dFJOUwDIjg4CBPr98Av39C4GghgTQOAnv6h97AjcN2dGH+gcbxAVz1WWIqGvuko0tNP+5eN42YhaUF/WmsQ8Y8we7g2hAAAEn0lEQVQYGe3AVXbjSAAF0CcuMZllZnabE6ff/rc1Lqtp5rdVOfORiy9fvnz5nxvg8wyPBT7LY++LhYtPkdw92rXcxCewjivSrnXwCaxO4ZH87uIT5Os+STtKoZ7Z6fNJLFv4BDVKfjqGereM0v0M9QaRoCRSKGflW75kF6h3Zam/MaHaZudRck5dqBZv2yy1BxbUai0mLO1rBRS7zWz+cEigVnoW/GFfv0GpXpTxl0MPKvWiGn9bdaHQ6FjjHyYB1GkNF/yDc+pAnZvu8U+TIIQq6VmQwudPezGFKmmUkdrSoSTae7IZuFBjHmXke/yNktAzkmJoQol4oTn+yWhQct5nO5v0uy5UcOsTTraD+dLn016LNZL+2YUC7ptm3+uxNV1R8jf5xCZt3YUCtbadRTmMK1/01GjYpDObo2rhuEE2jw9gc6DUfjNCvUnapzEqZm0+yMM0BYxZm1IzALoZyXqOaoXdi2+LILZgdnS+3ACkGekceqjWbdhsag88halPqXY1gDxySC0wUaXrTIj6BZKr2Xzy3+YA3K1PsrBQoWDVb0YFXo6aw6f+EE/jq0/6QxfVGUwyMe2EkPKhT0kb4cmM7iSjMSozyLJv3cSCFMY7SqJI8GQNTiTrLqpi6dl7ARMvZo2St73gJdAcOnqOyqwvBX667RyS+2bdhWTGNZucJKiOYeGHgd6k1DZQGtcdOrM1FLC6S0reOkHJ0Gx6kxgKGFe+zKYmSvOZQ0fPocCgT+m0MPBD0ia91RjVGy/7fLLbAX5aR3s6tR4q1zpubUoN/JJopKPFJqrWOXuU3hITP+WRz714oGpu2qeUdQf4xbr2yeYlQcVa75R8/YHfzM3MtrUGqtagZK+O+FNrptXqLioWTPZ88pcu/sW9dBJULH9rUxI9/FeIihnH75T8aQjVrI83vgxzC6oFHx6l1bQF1QbrPqWsMYBqYfKdkr9IoV5EyXtvQL0GJUeru1AuZWkXQ7me4IvoQTkjYymFckaNpQbUq7GkmVCuwdIkMKBaylJ/HUC1nuCLPw2g2HiesTTsWFCrtzmwFG1aUCvpTliKYEKt0a3OUg2qjRoLvrTbBhRzFwuPUraNoVartd3ZlLRtALXcje45lDK9C7VGRYOlfpFCLXdR9yiJZieAUklSu9uUTqeHAaVGRZ2l9iKAUr3edskX73DpQKlH91vTobRr53MoFI47s4ylpZ5DodC9rL8JSnb7fR1DoXFcX3oszd6SFpSxRvGxLhxKTV+fGlCmhaL4nvHF7utTI4QilpV0dU1wT9LhbtfZQJWWMS2W77Qp+X29mMOEEta8NzyfhGNTEoeoMFwoEJrjXqo3DhPalGyxPD/GIf5WksCECRMlE61Rso7P0/u7ECyJg66P5jDxt+LGbHhbB904H82D3nUzvX4s6tru4LHk+dpkuBm0TPw9a6p5XibuWW21qi9PK+/OzLYdPjmO53ur3frozlGN8NHImsJ2bDrc8zeHTbHQ9HN3MDZRmTAdfNxW2/62eRdS29aaK205e/voBrEbomKW1XI7eRFE3eijMdQ7UV4kc8NIYEKZEC6SMAxh4sv/2T8XLefQYLd95QAAAABJRU5ErkJggg=='); 156 | background-size: 100%; 157 | } 158 | .m-share-tips-bottom { 159 | font-family: "PingFang SC",Arial,"\\5FAE\\8F6F\\96C5\\9ED1",Helvetica,sans-serif; 160 | margin: 0; 161 | padding: 0; 162 | font-size: 18px; 163 | position: fixed; 164 | color: #fff; 165 | top: 50%; 166 | left: 50%; 167 | width: 100%; 168 | z-index: 2147483647; 169 | -webkit-transform: translate(-50%, -50%); 170 | transform: translate(-50%, -50%); 171 | text-align: center; 172 | width: 240px; 173 | line-height: 1.72; 174 | } 175 | 176 | @font-face {font-family: "m-share-iconfont"; 177 | src: url('data:application/x-font-ttf;charset=utf-8;base64,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') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 178 | } 179 | .m-share-iconfont { 180 | font-family:"m-share-iconfont" !important; 181 | font-size:26px; 182 | font-style:normal; 183 | -webkit-font-smoothing: antialiased; 184 | -moz-osx-font-smoothing: grayscale; 185 | padding: 5px; 186 | margin:0 0 0 10px; 187 | } 188 | .m-share-iconfont:first-child { 189 | margin: 0; 190 | } 191 | .m-share-iconfont-wx { 192 | color: #7bc549; 193 | border: 1px solid #7bc549; 194 | border-radius: 100%; 195 | } 196 | .m-share-iconfont-wx:active { 197 | background: #7bc549; 198 | color: #fff; 199 | } 200 | .m-share-iconfont-wx:before { 201 | content: "\\e61e"; 202 | } 203 | .m-share-iconfont-sina { 204 | color: #ff763b; 205 | border: 1px solid #ff763b; 206 | border-radius: 100%; 207 | } 208 | .m-share-iconfont-sina:active { 209 | background: #ff763b; 210 | color: #fff; 211 | } 212 | .m-share-iconfont-sina:before { 213 | content: "\\e641"; 214 | } 215 | .m-share-iconfont-qzone { 216 | color: #fdbe3d; 217 | border: 1px solid #fdbe3d; 218 | border-radius: 100%; 219 | } 220 | .m-share-iconfont-qzone:active { 221 | background: #fdbe3d; 222 | color: #fff; 223 | } 224 | .m-share-iconfont-qzone:before { 225 | content: "\\e728"; 226 | } 227 | .m-share-iconfont-qq { 228 | color: #56b6e7; 229 | border: 1px solid #56b6e7; 230 | border-radius: 100%; 231 | } 232 | .m-share-iconfont-qq:active { 233 | background: #56b6e7; 234 | color: #fff; 235 | } 236 | .m-share-iconfont-qq:before { 237 | content: "\\e630"; 238 | } 239 | .m-share-iconfont-wxline { 240 | color: #33b045; 241 | border: 1px solid #33b045; 242 | border-radius: 100%; 243 | } 244 | .m-share-iconfont-wxline:active { 245 | background: #33b045; 246 | color: #fff; 247 | } 248 | .m-share-iconfont-wxline:before { 249 | content: "\\e6e9"; 250 | } 251 | .m-share-iconfont-menu { 252 | font-size: 12px; 253 | } 254 | .m-share-iconfont-menu:before { 255 | content: "\\e67e"; 256 | } 257 | .m-share-iconfont-dots { 258 | font-size: 25px; 259 | color: #fff; 260 | } 261 | .m-share-iconfont-dots:before { 262 | content: "\\e656"; 263 | } 264 | .m-share-iconfont-share { 265 | font-size: 17px; 266 | color: #fff; 267 | margin: 0; 268 | } 269 | .m-share-iconfont-share:before { 270 | content: "\\e6ae"; 271 | } 272 | ` 273 | }; 274 | 275 | /* 276 | * @Author: backtonature 277 | * @Date: 2018-05-27 20:08:19 278 | * @Last Modified by: backtonature 279 | * @Last Modified time: 2018-05-30 21:05:38 280 | */ 281 | 282 | let isStyleLoaded = false; 283 | var ui = { 284 | initStyle() { 285 | if (!isStyleLoaded) { 286 | util.execStyle(style.cssText); 287 | isStyleLoaded = true; 288 | } 289 | }, 290 | showActionSheet(dom) { 291 | this.showMask(); 292 | const $sheet = document.createElement('div'); 293 | $sheet.id = 'm-share-actionSheet'; 294 | $sheet.appendChild(dom); 295 | document.body.appendChild($sheet); 296 | window.setTimeout(() => { 297 | $sheet.style.cssText = '-webkit-transform: translateY(0);transform: translateY(0);'; 298 | }, 0); 299 | }, 300 | hideActionSheet() { 301 | const dom = document.querySelector('#m-share-actionSheet'); 302 | if (dom) { 303 | // 渐变消失 304 | // dom.addEventListener('webkitTransitionend', () => { 305 | // dom.remove(); 306 | // }); 307 | // dom.addEventListener('transitionend', () => { 308 | // dom.remove(); 309 | // }); 310 | // dom.style.cssText = '-webkit-transform: translateY(100%);transform: translateY(100%);'; 311 | dom.remove(); 312 | } 313 | }, 314 | showMask() { 315 | if (document.querySelector('.m-share-mask')) { 316 | return; 317 | } 318 | const $div = document.createElement('div'); 319 | $div.className = 'm-share-mask'; 320 | $div.addEventListener('click', () => { 321 | this.hideActionSheet(); 322 | this.hideBottomTips(); 323 | this.hideRightTips(); 324 | this.hideMask(); 325 | }); 326 | document.body.appendChild($div); 327 | window.setTimeout(() => { 328 | $div.style.opacity = 0.7; 329 | }, 0); 330 | }, 331 | hideMask() { 332 | const domList = document.querySelectorAll('.m-share-mask'); 333 | for (let i = 0; i < domList.length; i++) { 334 | const item = domList[i]; 335 | const removeDom = () => item.remove(); 336 | // 渐变消失 337 | // item.addEventListener('webkitTransitionend', removeDom); 338 | // item.addEventListener('transitionend', removeDom); 339 | // item.style.cssText = 'opacity: 0'; 340 | removeDom(); 341 | } 342 | }, 343 | showBottomTips() { 344 | this.showMask(); 345 | const $tips = document.createElement('div'); 346 | $tips.className = 'm-share-tips-bottom'; 347 | $tips.innerHTML = '请打开浏览器的菜单进行分享点击“”或“”'; 348 | document.body.appendChild($tips); 349 | window.setTimeout(() => { 350 | this.hideMask(); 351 | this.hideBottomTips(); 352 | }, 1400); 353 | }, 354 | hideBottomTips() { 355 | const domList = document.querySelectorAll('.m-share-tips-bottom'); 356 | for (let i = 0; i < domList.length; i++) { 357 | const item = domList[i]; 358 | item.remove(); 359 | } 360 | }, 361 | showRightTopTips() { 362 | this.showMask(); 363 | const $tips = document.createElement('div'); 364 | $tips.className = 'm-share-tips'; 365 | $tips.innerHTML = ` 366 | 370 | 371 | `; 372 | document.body.appendChild($tips); 373 | window.setTimeout(() => { 374 | this.hideMask(); 375 | this.hideRightTips(); 376 | }, 1400); 377 | }, 378 | hideRightTips() { 379 | const domList = document.querySelectorAll('.m-share-tips'); 380 | for (let i = 0; i < domList.length; i++) { 381 | const item = domList[i]; 382 | item.remove(); 383 | } 384 | } 385 | }; 386 | 387 | /* 388 | * @Author: backToNature 389 | * @Date: 2018-05-30 12:54:24 390 | * @Last Modified by: backToNature 391 | * @Last Modified time: 2018-05-30 13:39:38 392 | */ 393 | var setNormalShareInfo = (info) => { 394 | if (info.desc && !document.querySelector('meta[name$="cription"]')) { 395 | const $meta = document.createElement('meta'); 396 | $meta.setAttribute('description', info.desc); 397 | } 398 | // 添加隐藏的img标签在body最前面 399 | if (info.imgUrl) { 400 | const $img = document.createElement('img'); 401 | $img.style.cssText = 'width: 0;height: 0;position: absolute;z-index: -9999;top: -99999px;left: -99999px;'; 402 | $img.onload = () => { 403 | document.body.insertBefore($img, document.body.firstChild); 404 | }; 405 | $img.onerror = () => { 406 | $img.remove(); 407 | }; 408 | $img.src = info.imgUrl; 409 | } 410 | }; 411 | 412 | /* 413 | * @Author: backtonature 414 | * @Date: 2018-05-22 21:31:32 415 | * @Last Modified by: backToNature 416 | * @Last Modified time: 2018-05-23 20:05:09 417 | */ 418 | const qqJsSdkUrl = '//open.mobile.qq.com/sdk/qqapi.js?_bid=152'; 419 | 420 | const setShareInfo = (info) => { 421 | mqq.data.setShareInfo({ 422 | share_url: info.link, 423 | title: info.title, 424 | desc: info.desc, 425 | image_url: info.imgUrl 426 | }); 427 | }; 428 | 429 | var setQQshareInfo = (info) => { 430 | if (window.mqq && mqq.data && mqq.data.setShareInfo) { 431 | setShareInfo(info); 432 | } else { 433 | util.loadScript(qqJsSdkUrl, () => { 434 | setShareInfo(info); 435 | }); 436 | } 437 | }; 438 | 439 | /* 440 | * @Author: backToNature 441 | * @Date: 2018-05-22 17:23:35 442 | * @Last Modified by: backToNature 443 | * @Last Modified time: 2018-05-30 17:39:03 444 | */ 445 | 446 | let isInit = false; 447 | 448 | var init = (config) => { 449 | if (!isInit) { 450 | const info = { 451 | title: config.title, 452 | desc: config.desc, 453 | link: config.link, 454 | imgUrl: config.imgUrl 455 | }; 456 | isInit = true; 457 | ui.initStyle(); // 加载样式 458 | 459 | // 配置通用分享设置 460 | if (config.setNormal !== false) { 461 | setNormalShareInfo(info); 462 | } 463 | // 配置手q分享内容 464 | if (util.ua.isFromQQ) { 465 | setQQshareInfo(config.types, info); 466 | } 467 | 468 | } 469 | }; 470 | 471 | /* 472 | * @Author: backToNature 473 | * @Date: 2018-05-22 20:12:58 474 | * @Last Modified by: backToNature 475 | * @Last Modified time: 2018-05-31 15:16:45 476 | */ 477 | const wxJsSdkUrl = '//res.wx.qq.com/open/js/jweixin-1.2.0.js'; 478 | 479 | const setShareInfo$1 = (type, info) => { 480 | switch (type) { 481 | case 'wx': 482 | wx.onMenuShareAppMessage(info); // 设置分享到微信好友内容 483 | break; 484 | case 'wxline': 485 | wx.onMenuShareTimeline(info); // 设置分享到微信朋友圈内容 486 | break; 487 | case 'qq': 488 | wx.onMenuShareQQ(info); // 设置分享到微信好友内容 489 | break; 490 | case 'qzone': 491 | wx.onMenuShareQZone(info); // 设置分享到qq空间 492 | break 493 | } 494 | }; 495 | 496 | let isConfig = false; 497 | 498 | var setWxShareInfo = (types, config) => { 499 | const wxConfig = config.wx; 500 | const doSet = () => { 501 | const _wxConfig = Object.assign({ 502 | jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo'] 503 | }, wxConfig); 504 | if (!isConfig) { 505 | wx.config(_wxConfig); 506 | isConfig = true; 507 | } 508 | wx.ready(() => { 509 | try { 510 | types.forEach(item => { 511 | const _info = { 512 | title: (config.infoMap && config.infoMap[item] && config.infoMap[item].title) || config.title, 513 | desc: (config.infoMap && config.infoMap[item] && config.infoMap[item].desc) || config.desc, 514 | link: (config.infoMap && config.infoMap[item] && config.infoMap[item].link) || config.link, 515 | imgUrl: (config.infoMap && config.infoMap[item] && config.infoMap[item].imgUrl) || config.imgUrl 516 | }; 517 | setShareInfo$1(item, _info); 518 | }); 519 | } catch (e) {} 520 | }); 521 | }; 522 | if (window.wx) { 523 | doSet(); 524 | } else { 525 | util.loadScript(wxJsSdkUrl, () => { 526 | doSet(); 527 | }); 528 | } 529 | }; 530 | 531 | /* 532 | * @Author: backtonature 533 | * @Date: 2018-05-23 21:36:23 534 | * @Last Modified by: backtonature 535 | * @Last Modified time: 2018-05-29 14:05:55 536 | */ 537 | 538 | const qqShareJsSdk = '//jsapi.qq.com/get?api=app.setShareInfo,app.share'; 539 | 540 | var qqBrowserShare = (type, info) => { 541 | const doShare = (to_app) => { 542 | const _doShare = () => { 543 | try { 544 | browser.app.share({ 545 | title: info.title, 546 | description: info.desc, 547 | url: info.link, 548 | img_url: info.imgUrl, 549 | to_app 550 | }, (res) => { 551 | }); 552 | } catch (e) { 553 | } 554 | }; 555 | if (window.browser && browser.app && browser.app.share) { 556 | _doShare(); 557 | } else { 558 | util.loadScript(qqShareJsSdk, _doShare); 559 | } 560 | }; 561 | switch (type) { 562 | case 'wx': 563 | doShare(1); 564 | break; 565 | case 'wxline': 566 | doShare(8); 567 | break; 568 | case 'qq': 569 | doShare(4); 570 | break; 571 | case 'qzone': 572 | doShare(3); 573 | break; 574 | case 'sina': 575 | doShare(11); 576 | break; 577 | } 578 | }; 579 | 580 | /* 581 | * @Author: backtonature 582 | * @Date: 2018-05-23 21:20:45 583 | * @Last Modified by: backtonature 584 | * @Last Modified time: 2018-06-01 15:07:06 585 | */ 586 | 587 | var wxShare = (info) => { 588 | if (util.ua.isFromWx) { 589 | ui.showRightTopTips(); 590 | return; 591 | } 592 | 593 | if (util.ua.isFromQQ) { 594 | ui.showRightTopTips(); 595 | return; 596 | } 597 | if (util.ua.isFromUC) { 598 | // uc浏览器 599 | ui.hideMask(); 600 | if (util.ua.isFromIos) { 601 | window.ucbrowser && window.ucbrowser.web_share(info.title, info.desc, info.link, 'kWeixin', info.imgUrl, '', ''); 602 | } else { 603 | window.ucweb && window.ucweb.startRequest("shell.page_share", [info.title, info.desc, info.link, 'WechatFriends', info.imgUrl, '']); 604 | } 605 | return; 606 | } 607 | 608 | if (util.ua.isFromQQBrower) { 609 | // qq浏览器 610 | ui.hideMask(); 611 | qqBrowserShare('wx', info); 612 | return; 613 | } 614 | 615 | ui.showBottomTips(); 616 | }; 617 | 618 | /* 619 | * @Author: backtonature 620 | * @Date: 2018-05-24 14:17:21 621 | * @Last Modified by: backtonature 622 | * @Last Modified time: 2018-06-01 15:05:57 623 | */ 624 | 625 | var wxlineShare = (info) => { 626 | if (util.ua.isFromWx) { 627 | // 微信客户端 628 | ui.showRightTopTips(); 629 | return; 630 | } 631 | 632 | if (util.ua.isFromQQ) { 633 | // 手机qq 634 | ui.showRightTopTips(); 635 | return; 636 | } 637 | 638 | if (util.ua.isFromUC) { 639 | // uc浏览器 640 | ui.hideMask(); 641 | if (util.ua.isFromIos) { 642 | window.ucbrowser && window.ucbrowser.web_share(info.title, info.desc, info.link, 'kWeixinFriend', info.imgUrl, '', ''); 643 | } else { 644 | window.ucweb && window.ucweb.startRequest("shell.page_share", [info.title, info.desc, info.link, 'WechatTimeline', info.imgUrl, '']); 645 | } 646 | return; 647 | } 648 | 649 | if (util.ua.isFromQQBrower) { 650 | // qq浏览器 651 | ui.hideMask(); 652 | qqBrowserShare('wxline', info); 653 | return; 654 | } 655 | 656 | ui.showBottomTips(); 657 | }; 658 | 659 | /* 660 | * @Author: backtonature 661 | * @Date: 2018-05-24 14:23:11 662 | * @Last Modified by: backtonature 663 | * @Last Modified time: 2018-06-01 15:05:25 664 | */ 665 | 666 | var qqShare = (info) => { 667 | if (util.ua.isFromWx) { 668 | // 微信客户端 669 | ui.showRightTopTips(); 670 | return; 671 | } 672 | 673 | if (util.ua.isFromQQ) { 674 | // 手机qq 675 | ui.showRightTopTips(); 676 | return; 677 | } 678 | 679 | if (util.ua.isFromQQBrower) { 680 | // qq浏览器 681 | ui.hideMask(); 682 | qqBrowserShare('qq', info); 683 | return; 684 | } 685 | 686 | ui.showBottomTips(); 687 | }; 688 | 689 | /* 690 | * @Author: backtonature 691 | * @Date: 2018-05-24 14:23:11 692 | * @Last Modified by: backtonature 693 | * @Last Modified time: 2018-06-01 15:05:26 694 | */ 695 | 696 | var qzoneShare = (info) => { 697 | if (util.ua.isFromWx) { 698 | // 微信客户端 699 | ui.showRightTopTips(); 700 | return; 701 | } 702 | 703 | if (util.ua.isFromQQ) { 704 | // 手机qq 705 | ui.showRightTopTips(); 706 | return; 707 | } 708 | 709 | if (util.ua.isFromQQBrower) { 710 | // qq浏览器 711 | ui.hideMask(); 712 | qqBrowserShare('qzone', info); 713 | return; 714 | } 715 | const query = `url=${encodeURIComponent(info.link)}&title=${encodeURIComponent(info.title)}&desc=${encodeURIComponent(info.desc)}&summary=${encodeURIComponent(info.desc)}&site=${encodeURIComponent(info.link)}`; 716 | location.href = `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?${query}`; 717 | }; 718 | 719 | /* 720 | * @Author: backtonature 721 | * @Date: 2018-05-24 14:23:11 722 | * @Last Modified by: backtonature 723 | * @Last Modified time: 2018-06-01 15:05:39 724 | */ 725 | 726 | var sinaShare = (info) => { 727 | if (util.ua.isFromQQBrower) { 728 | // qq浏览器 729 | ui.hideMask(); 730 | qqBrowserShare('sina', info); 731 | return; 732 | } 733 | 734 | const query = `url=${encodeURIComponent(info.link)}&title=${encodeURIComponent(info.desc)}&desc=${encodeURIComponent(info.desc)}&pic=${encodeURIComponent(info.imgUrl)}`; 735 | location.href = `http://service.weibo.com/share/share.php?${query}`; 736 | // 都不是则弹层二维码提示分享 737 | }; 738 | 739 | /* 740 | * @Author: backToNature 741 | * @Date: 2018-05-22 17:23:35 742 | * @Last Modified by: backToNature 743 | * @Last Modified time: 2018-06-01 15:00:51 744 | */ 745 | 746 | const shareFuncMap = { 747 | wx: wxShare, 748 | wxline: wxlineShare, 749 | qq: qqShare, 750 | qzone: qzoneShare, 751 | sina: sinaShare 752 | }; 753 | 754 | const typesMap = ['wx', 'wxline', 'qq', 'qzone', 'sina']; 755 | 756 | const getDefaultConfig = (config) => { 757 | config = config || {}; 758 | const infoMapType = typeof config.infoMap; 759 | return { 760 | title: (config && config.title) || document.title, 761 | desc: (config && config.desc) || (document.querySelector('meta[name$="cription"]') && document.querySelector('meta[name$="cription"]').getAttribute('content')) || '', 762 | link: encodeURI((config && config.link) || window.location.href), 763 | imgUrl: (config && config.imgUrl) || (document.querySelector('img') && document.querySelector('img').getAttribute('src')) || '', 764 | types: (config && Array.isArray(config.types) && config.types) || ['wx', 'wxline', 'qq', 'qzone', 'sina'], 765 | wx: (config && config.wx) || null, 766 | fnDoShare: config.fnDoShare, 767 | infoMap: (infoMapType === 'function' || infoMapType === 'object' && !!config.infoMap) ? config.infoMap : {} 768 | }; 769 | }; 770 | 771 | var index = { 772 | wxConfig(config) { 773 | const _config = getDefaultConfig(config); 774 | if (util.ua.isFromWx && _config.wx && _config.wx.appId && _config.wx.timestamp && _config.wx.nonceStr && _config.wx.signature) { 775 | setWxShareInfo(typesMap, _config); 776 | } 777 | }, 778 | init(config) { 779 | const _config = getDefaultConfig(config); 780 | init(_config); 781 | const domList = document.querySelectorAll('.m-share'); 782 | // 初始化 783 | for (let i = 0; i < domList.length; i++) { 784 | const item = domList[i]; 785 | this.render(item, _config); 786 | } 787 | }, 788 | // 渲染 789 | render(dom, config) { 790 | const _config = getDefaultConfig(config); 791 | init(_config); 792 | const getTmpl = (type) => { 793 | if (typesMap.indexOf(type) >= 0) { 794 | return ``; 795 | } 796 | return ''; 797 | }; 798 | let tmp = ''; 799 | _config.types.forEach(item => { 800 | tmp += getTmpl(item); 801 | }); 802 | if (typeof dom === 'string') { 803 | dom = document.querySelector(dom); 804 | } 805 | if (!dom) { 806 | return; 807 | } 808 | dom.innerHTML = tmp; 809 | dom.addEventListener('click', (e) => { 810 | const target = e.target; 811 | typesMap.forEach(item => { 812 | if (target.classList.contains(`m-share-${item}`)) { 813 | const shareData = { 814 | title: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].title) || _config.title, 815 | desc: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].desc) || _config.desc, 816 | link: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].link) || _config.link, 817 | imgUrl: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].imgUrl) || _config.imgUrl, 818 | fnDoShare: _config.fnDoShare 819 | }; 820 | this.to(item, shareData); 821 | } 822 | }); 823 | }); 824 | }, 825 | // 执行分享逻辑 826 | to(type, config) { 827 | const _config = getDefaultConfig(config); 828 | init(_config); 829 | if (typesMap.indexOf(type) >= 0) { 830 | if (_config.fnDoShare) { 831 | _config.fnDoShare(type); 832 | } 833 | shareFuncMap[type](_config); 834 | } 835 | }, 836 | // 弹层分享 837 | popup(config) { 838 | const _config = getDefaultConfig(config); 839 | init(_config); 840 | const textMap = { 841 | wx: '微信好友', 842 | wxline: '朋友圈', 843 | qq: 'QQ好友', 844 | qzone: 'QQ空间', 845 | sina: '微博' 846 | }; 847 | const dom = document.createElement('div'); 848 | dom.className = 'm-share-flex'; 849 | let tmp = ''; 850 | const getTmpl = (type) => { 851 | if (typesMap.indexOf(type) >= 0) { 852 | return ``; 853 | } 854 | return ''; 855 | }; 856 | _config.types.forEach(item => { 857 | tmp += getTmpl(item); 858 | }); 859 | dom.innerHTML = tmp; 860 | dom.addEventListener('click', (e) => { 861 | const target = e.target; 862 | typesMap.forEach(item => { 863 | if (target.classList.contains(`m-share-${item}`)) { 864 | ui.hideActionSheet(); 865 | const shareData = { 866 | title: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].title) || _config.title, 867 | desc: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].desc) || _config.desc, 868 | link: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].link) || _config.link, 869 | imgUrl: (_config.infoMap && _config.infoMap[item] && _config.infoMap[item].imgUrl) || _config.imgUrl, 870 | fnDoShare: _config.fnDoShare 871 | }; 872 | this.to(item, shareData); 873 | } 874 | }); 875 | }); 876 | ui.showActionSheet(dom); 877 | } 878 | }; 879 | 880 | export default index; 881 | --------------------------------------------------------------------------------