uni-app -- 小程序分享遇到的问题

关于小程序分享的问题，该需求很常见。在uni-app中如何能够优雅的配置每个页面都有分享功能呢？

1. 全局混入mixins

1.1 创建mixins.vue

<script>
	export default {
		name: "mixin",
		data() {
			return {
				// 设置默认分享参数
				share: {
					title: 'ALAPI',
					path: '/pages/index/index',
					imageUrl: '',
					desc: '',
					content: ''
				}
			};
		},
		// 分享触发的回调
		onShareAppMessage(options) {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
	}
</script>

1.2 全局混入

main.js

import mixin from './mixin.vue'
import Vue from 'vue'
Vue.mixin(mixin)

如此，所有页面内就都可以使用分享功能。

1.3 页面分享数据

某页面单独设置分享的数据,只需在当前页面的data里配置一个share对象即可
***.vue

	share: {
		title: 'ALAPI',
		path: '/pages/about/about',
		imageUrl: '',
		desc: '',
		content: ''
	}

2.使用的方式

分享的可以分为右上角转发菜单和页面内转发按钮两个途径。但是在触发页面的分享按钮时，却执行了两次分享函数的回调。

页面内转发:

<button open-type='share'>转发<button>

经过实验，发现执行两次回调是因为点击页面按钮时也会触发右上角转发菜单的回调。

那么该如何区分是哪种方式出发的回调呢？

在上述代码的onShareAppMessage的方法中，可以发现我写了一个参数，但是并没有进行使用。在该参数中就可以结构出这么一个参数from。

转发事件来源。
button：页面内转发按钮；
menu：右上角转发菜单

如此即可区分分享事件的来源，进而进行一定的限制逻辑。