uni-app 微信小程序全局配置分享好友、朋友圈...

使用uni-app在实际项目中开发微信小程序，经常会遇到给项目添加分享给微信好友、朋友圈...功能，一般来说要将某个页面分享出去，就要在当前页面添加：

<template>
<view></view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {},
		// 分享给好友
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'title', //自定义分享标题
				path: 'path', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: '', //可设置默认分享图，不设置默认截取头部5:4
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			console.log(res);
			return {
				//同上
			}
		}
	}
</script>
<style></style>

 且onShareAppMessage()与onShareTimeline() 与methods同级！！！

官方网址：uniapp.dcloud.io/api/plugins…

这样做虽然实现了分享功能，但是要在每一个页面都添加以上代码，重复代码不说，还特别容易搞混，一不小心就漏掉参数忘记修改。

全局分享实现

为了减少代码量与重复性，可设置全局分享代码：

在当前项目下创建utils文件夹, 在utils 文件夹中新建share.js文件：

share.js代码：

export default {
	data() {
		return {
			//设置默认的分享参数
			//如果页面不设置share，就触发这个默认的分享
			share: {
				title: '',//自定义标题
				path: `/pages/index/index`,  //默认跳转首页
				imageUrl: '',  //可设置默认分享图，不设置默认截取头部5:4
			}
		}
	},
    onShareAppMessage(res) { //发送给朋友
		let that = this
		// 动态获取当前页面栈
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let nowPage = pages[pages.length - 1]; //当前页页面实例
		// let prevPage = pages[pages.length - 2]; //上一页页面实例
		that.share.path = `/${nowPage.route}`
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	onShareTimeline(res) { //分享到朋友圈
	let that = this
		// 动态获取当前页面栈
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let nowPage = pages[pages.length - 1]; //当前页页面实例
		// let prevPage = pages[pages.length - 2]; //上一页页面实例
		that.share.path = `/${nowPage.route}`
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
}

 然后在入口文件main.js引入

// 全局分享
// 小程序分享的封装
import share from "./utils/share.js"
Vue.mixin(share)

 然后就可以了！！！

Vue.mixin()使用方法：混入 — Vue.js