1. 先新建一个js文件,内容如下:
//全局点亮所有页面的 '分享给朋友' 和 '分享到朋友圈'
export default {
	data() {
		return {
			//设置默认的分享参数
			share: {
				//转发标题
				title: '',
				//转发路径
				path: '',
				//自定义图片路径
				imageUrl: '',
				//自定义页面路径中携带的参数
				query: ''
			}
		}
	},
	//分享给朋友
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log(res)
			},
			fail(res) {
				console.log(res)
			}
		}
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			query: this.share.query,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log(res)
			},
			fail(res) {
				console.log(res)
			}
		}
	}
}

  1. 在main.js中引入
import MyShare from '@/common/myShare.js'//此处为上面的js文件
Vue.mixin(MyShare)
  1. 完成上面两步后,每个页面都会有分享按钮了,在页面的 data 里面可以单独设置参数了
export default {
data(){
        return { //设置默认的分享参数
            share:{
                title:'自定义标题',
                path:'转发路径',
                imageUrl:'自定义图片路径'
            }
        }
    }
}

  1. 效果图如下
    在这里插入图片描述
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐