uniapp微信小程序分享给好友朋友圈-封装全局分享

不封装直接使用

onLoad同级

onLoad(){},
// 1.发送给朋友
onShareAppMessage(res) {
	console.log("res",res);
	console.log("page",uni.$u.page());
	if (res.from === 'button') {// 来自页面内分享按钮
		return {
			title: '首页',
			path: '/pages/home/home',
			imageUrl: this.share.image,
		}
	}
	return {
		title: '首页',
		path: '/pages/home/home',
		imageUrl: this.share.image|| '',
	}
},
//2.分享到朋友圈
onShareTimeline(res) {
	console.log("this.share.path",this.share.path);
	return {
		title: this.share.title,
		path: this.share.path  || '/pages/home/home',
		imageUrl: this.share.image|| '',
	}
},

1、使用uview封装的

uview全局分享地址：https://uviewui.com/js/mpShare.html

2、自己封装如下，下面有使用方法

创建全局分享文件，封装按钮分享和小程序右上角操作分享，

// minxin文件  '@/utils/share.js'
export default {
	data() {
		return {
			// 默认的全局分享内容
			share: {
				title: '',
				path: '', // 全局分享的路径，比如 首页
				image: '', // 全局分享的图片(可本地可网络)
			}
		}
	},
	// 定义全局分享
	// 1.发送给朋友
	onShareAppMessage(res) {
		console.log("res",res);
		console.log("page",uni.$u.page());
		if (res.from === 'button') {// 来自页面内分享按钮
			return {
				title: this.share.title,
				path: this.share.path || '/pages/home/home',
				imageUrl: this.share.image,
			}
		}
		return {
			title: this.share.title,
			path: this.share.path || '/pages/home/home',
			imageUrl: this.share.image|| '',
		}
	},
	//2.分享到朋友圈
	onShareTimeline(res) {
		console.log("this.share.path",this.share.path);
		return {
			title: this.share.title,
			path: this.share.path  || '/pages/home/home',
			imageUrl: this.share.image|| '',
		}
	},
	methods: {
	    setGlobalValue(value) {
			this.share = value;
	    },
	    getGlobalValue() {
			return this.share;
	    }
	}
}

main.js 全局引入

import share from '@/utils/share.js'
Vue.mixin(share)

使用方法

点击按钮分享，选择性添加

<button class="share_style" open-type="share">分享</button>

传递分享数据，你可以放在获取页面数据的接口里，右上角分享好友朋友圈就实现了

如果分享页使用了自定义导航栏，分享路径后面加个参数判断，分享打开的页面获取参数，自定义按钮跳转到首页即可

this.setGlobalValue({
	title: '分享名称',
	path: `/pages/detail/detail?id=${this.id}`,
	image：'分享图片'
})