结合nativeshare和m-share两个包生成一个vue移动端的分享组件
需要npm install NativeShare --save和npm install m-share --save
shareBar.vue
<template><div id="nativeShare"><div class="label">分享到</div><div class="list"><span class="list-item" v-for="(button, index) in shareButtons" :key="index"><img :src="button.src" class="i" @click="call(button)">{{button.text}}</span></div></div></template><script>///fa-ge/NativeShareconst nativeshare = () => import ('nativeshare') //这种引入方式nativeshare是Promise对象///backToNature/m-shareconst m_share = () => import ('m-share')var NativeShare, mShareexport default {name: 'the-sharebar',data() {return {shareButtons:[{text: '微信好友', nativeshare:'wechatFriend', m_share: 'wx' , src: require('@/assets/weixin_friend.png')},{text: '朋友圈', nativeshare:'wechatTimeline', m_share: 'wxline', src: require('@/assets/weixin.png')},{text: '新浪微博', nativeshare:'weibo', m_share: 'sina', src: require('@/assets/weibo.png')},{text: 'QQ好友', nativeshare:'qqFriend', m_share: 'qq', src: require('@/assets/QQ.png')},{text: 'QQ空间', nativeshare:'qZone', m_share: 'qzone', src: require('@/assets/qqzone.png')},{text: '更多', nativeshare:'', m_share: '', src: require('@/assets/more.png')},]}},computed: {config () {return {title: '分享标题',desc:'描述',img:'图片地址',img_title:'图片标题',link: '当前链接'}}},methods: {call(command) {let shareData = {//nativeShare的参数模型title: this.config.title,desc: this.config.desc,// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。link: this.config.link,icon: this.config.url,// 不要过于依赖以下两个回调，很多浏览器是不支持的success: function() {alert('success')},fail: function() {alert('fail')}}let mShareData = {//m-share的参数模型title: this.config.title, // 标题，默认读取document.titledesc: this.config.desc, // 描述, 默认读取head标签：<meta name="description" content="desc" />link: this.config.link, // 网址，默认使用window.location.hrefimgUrl: this.config.img, // 图片, 默认取网页中第一个img标签fnDoShare(type) {console.log('success')}}let nativeShare = new NativeShare()nativeShare.setShareData(shareData)try {nativeShare.call(command.nativeshare)} catch(e) {//iphone的qq浏览器调用此api//除iphone的qq浏览器外其他浏览器调用的api//在iphone的qq浏览器中比较奇葩，第一次调用nativeShare.call()会报错，第二次之后不报，这里是让每次调用nativeShare.call()之后都报错，然后统一去调m-share.to()方法mShare.to(command.m_share, mShareData)}}},mounted() {// ES6 标准nativeshare().then(res => {NativeShare = res.default} )// CommonJS 标准m_share().then(res => {mShare = res})//alert(browser)}}</script><style scoped>#nativeShare {font-size: 13px;}.label {font-size: 18px;}.list-item {width: 30%;display: inline-block;text-align: center;margin: 10px 0;}.i {width: 40px;height: 40px;display: block;margin: 0 auto;margin-bottom: 5px;background-size: cover;}</style>
config的参数也可以选择用组件间的通信传入、<the-sharebar :config="config" />
注意
现在已经发布npm包vue-native-share
