uniapp-vue3微信小程序实现全局分享

uniapp-vue3微信小程序实现全局分享

微信小程序官方文档的分享说明

onShareAppMessage(Object object)

监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

参数 Object object:

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：

自定义转发内容 基础库 2.8.1 起，分享图支持云图片。

示例代码

在开发者工具中预览效果

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onShareTimeline()

基础库 2.11.3 开始支持，低版本需做兼容处理。

本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

自定义转发内容

事件处理函数返回一个 Object，用于自定义分享内容，不支持自定义页面路径，返回内容如下：

uniapp 官方文档的分享说明

onShareAppMessage(OBJECT)

小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。

• 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（）；
• 此事件需要 return 一个Object，用于自定义分享内容。

微信小程序平台的分享管理比较严格，请参考 小程序分享指引。

平台差异说明

此事件需要 return 一个 Object，用于自定义分享内容，其内容如下：

示例代码

export default {
  onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

复制代码

注意

• 微信、头条平台：只有定义了此事件处理函数，小程序右上角菜单才会显示“转发”按钮
• QQ小程序还支持通过qq.offShareAppMessage取消对系统分享按钮的监听。

实现全局分享

代码结构如下

share.js文件内容

const share = {

	// 分享到好友
	onShareAppMessage() {
		return {
			title: '分享标题', // 分享标题
			path: 'pages/index/index?spreaderid=' + uni.getStorageSync('spid'), // 默认为当前页面路径
			imageUrl: '' // 默认为当前页面的截图
		}
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '分享标题', // 分享标题
			path: 'pages/index/index?spreaderid=' + uni.getStorageSync('spid'), // 默认为当前页面路径
			imageUrl: '' // 默认为当前页面的截图
		}
	}

}
export default share;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

main.js

因为使用的是vue3的语法，所以需要在这个地方修改，增加share的引用后，使用app.mixin混合share

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import  share from '@/apis/share.js'
export function createApp() {
	const app = createSSRApp(App)
	app.mixin(share);
	return {
		app
	}
}
// #endif
1
2
3
4
5
6
7
8
9
10
11
12
13

注意事项

app.mixin()

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。

不推荐

Mixins 在 Vue 3 支持主要是为了向后兼容，因为生态中有许多库使用到。在新的应用中应尽量避免使用 mixin，特别是全局 mixin。

若要进行逻辑复用，推荐用组合式函数来替代。

在vue3中的组合函数形式暂时不学习了，条条大路通罗马，到达目的就拉到。世上无难事，只要肯放弃。

实现效果

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

https://cn.vuejs.org/api/application.html#app-mixin

https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage