- 基于uni-app 小程序全局挂载 onShareTimeline 和 onShareAppMessage 方法
- 动态设置 onShareTimeline 和 onShareAppMessage 方法
1. 创建一个share.js 全局混入模块
js
// utils/share.js
export default {
data() {
return {
// 计数器 奇数不能分享
count: 0
}
},
onShareTimeline(res) {
this.count++
return {
title: '转发朋友圈',
query: 'id=123',
imageUrl: '你的图片',
promise: new Promise((resolve, reject) => {
// 判断是否进行分享 偶数可以分享
if (this.count % 2 === 0) {
resolve({
title: `转发朋友圈${this.count}`,
query: 'id=123',
imageUrl: '你的图片',
})
} else {
reject()
uni.showToast({
title: `奇数不允许分享${this.count}`,
icon: 'none'
})
}
})
}
},
onShareAppMessage(e) {
this.count++
return {
title: '转发给好友',
path: '/pages/main/main',
imageUrl: '你的图片',
promise: new Promise((resolve, reject) => {
// 判断是否进行分享
if (this.count % 2 === 0) {
resolve({
title: `转发给好友${this.count}`,
path: '/pages/main/main',
imageUrl: '你的图片',
})
} else {
reject()
uni.showToast({
title: `奇数不允许分享${this.count}`,
icon: 'none'
})
}
})
}
}
}
2. 在全局入口文件main.js全局混入
js
import App from './App'
import { useSentry } from './utils/sentry'
import share from './utils/share'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.mixin(share)// 非 vue3 项目
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
useSentry(app)
app.mixin(share)// vue3 项目
return {
app
}
}
// #endif
- 扩展
- 案例中的
count判断,可以换成当前页面的path,再维护一个可分享页面池子,判断path是否在池中,决定是否能分享 button类型的分享,可以在页面中向share.js传递参数,实现特殊的分享内容。也可以使用uni.$emit等方法实现
html<template> <button open-type="share" @click="setShareInfoTomixin"></button> </template> <script setup lang="ts"> import { getCurrentInstance } from 'vue' const { ctx } = getCurrentInstance() as any // setShareInfoTomixin方法必须先触发,不能写在 <button open-type="share"></button> 里面 const setShareInfoTomixin = (index: number)=>{ // setShareInfo 可以是share.js文件 methods 中的任意方法 ctx.setShareInfo({ title: `转发朋友圈${this.count}`, query: 'id=123', imageUrl: '你的图片', }) } </script>