uv-ui

# mpShare 小程序分享

此功能，是对uni的onShareAppMessage 生命周期 (opens new window)的封装。

这里说的小程序，指的是"微信小程序、百度小程序、头条小程序、QQ小程序，支付宝小程序等"。

由于小程序的分享(微信、头条平台)，需要监听页面的onShareAppMessage生命周期，小程序需要在页面声明了此生命周期，点击右上角的"胶囊"才会有分享功能， 而一般情况下，我们希望每个页面都可以分享，那就需要每个页面都写一遍这个生命周期，是很繁琐的。

基于以上，uv-ui通过mixin的形式，给每一个页面注入了onShareAppMessage生命周期，让您简单引入，无需任何后续操作，即可让每一个页面都有分享功能(仅针对小程序)。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x x √ √ √ √ √

# 基本使用

需要注意的是，小程序(uni)没有提供类似"getNavigationBarTitle"这样的接口，所以我们无法获取当前页面导航栏的标题，换言之，我们想要每个页面个性化的 分享标题，需要手动设置，否则默认为小程序的名称。

注意：

分享功能是默认关闭的，但是我们写好各项配置，您只要在main.js中进行相应的配置即可使用，默认关闭，是因为某些用户并不需要此功能。

打开小程序分享功能：

按照下面的方法将mpShare设置为true开启小程序分享功能，非小程序端设置无效。

// main.js
import uvUI from '@/uni_modules/uv-ui-tools'
// 其他内容

// #ifdef VUE2
Vue.use(uvUI,{mpShare:true});
// #endif
// #ifdef VUE3
app.use(uvUI,{mpShare:true});
// #endif
// 其他内容

分享功能，一般有三个参数，如下：

// 该对象已集成到this.$u中，内部属性如下
uni.$uv.mpShare = {
	title: '', // 默认为小程序名称，可自定义
	path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
	// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
	// 支持PNG及JPG，默认为当前页面的截图
	imageUrl: '' 
}

以上这些，uv-ui已通过mixin集成，当某一个页面您需要自定义分享信息时，可以通过"uni.$uv.mpShare"对进行修改，在页面的onLoad生命周期修改即可。

vue2用法：

<script>
export default {
	onLoad() {
		uni.$uv.mpShare.title = '对酒当歌，人生几何';
	}
}
</script>

vue3+setup用法：

这里建议在 onReady 周期函数中实现，或者给一定的延时，避免报错。

<script setup>
	import { onReady } from '@dcloudio/uni-app';
	onReady(() => {
		uni.$uv.mpShare.title = '对酒当歌，人生几何';
	})
</script>

# 重写"onShareAppMessage"生命周期

如果您基于自己的一些业务逻辑，需要更加自定义的实现逻辑，可以在页面中重写onShareAppMessage生命周期即可覆盖uv-ui通过mixin监听的onShareAppMessage生命周期。

vue2用法：

<script>
	export default {
		// 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数，在内部会无法获得this
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/test/test?id=123'
			}
		}
	}
</script>

vue3+setup用法：

这里建议在 onReady 周期函数中实现，或者给一定的延时，避免不能重写的情况。

<script setup>
	import { onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	onReady(() => {
		onShareAppMessage(()=>{
			return {
				title: '自定义分享标题',
				path: '/pages/test/test?id=123'
			}
		})
	})
</script>

# 分享到朋友圈

此功能为微信小程序最新加入的功能，仅适用于微信小程序，uv-ui也全局监听了此生命周期。

同理，你也可以在页面中重写onShareTimeline生命周期即可覆盖uv-ui通过mixin监听的onShareTimeline生命周期。

vue2用法：

<script>
	export default {
		onShareTimeline(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/test/test?id=123'
			}
		}
	}
</script>

vue3+setup用法：

这里建议在 onReady 周期函数中实现，或者给一定的延时，避免不能重写的情况。

<script setup>
	import { onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	onReady(() => {
		onShareTimeline(()=>{
			return {
				title: '自定义分享标题',
				path: '/pages/test/test?id=123'
			}
		})
	})
</script>

←