- 发布：2022-09-19 15:42
- 更新：2024-10-22 16:39
- 阅读：1155
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
第三方开发者工具版本号： stable 1.06.2209070
基础库版本号： 2.25.3
手机系统： 全部
页面类型： vue
项目创建方式： CLI
CLI版本号： 3.0.0-alpha-3060120220907002
SDK版本号： 3.0.0-alpha-3060120220907002
测试过的手机：
示例代码：
// main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uView from '@/uni_modules/vk-uview-ui'
import { pinia } from './store/pinia'
const mixin = {
onShareAppMessage() {
return {
title: '分享我的小程序',
path: '/pages/home/index'
}
}
}
export function createApp () {
const app = createSSRApp(App)
app.use(pinia)
app.use(uView)
app.mixin(mixin)
return {
app,
pinia // 此处必须将 Pinia 返回
}
}
// pages/home/index.vue
<script setup lang="ts">
onShareAppMessage() {
return {
title: 'test',
path: '/pages/home/index'
}
}
</script>
// main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uView from '@/uni_modules/vk-uview-ui'
import { pinia } from './store/pinia'
const mixin = {
onShareAppMessage() {
return {
title: '分享我的小程序',
path: '/pages/home/index'
}
}
}
export function createApp () {
const app = createSSRApp(App)
app.use(pinia)
app.use(uView)
app.mixin(mixin)
return {
app,
pinia // 此处必须将 Pinia 返回
}
}
// pages/home/index.vue
<script setup lang="ts">
onShareAppMessage() {
return {
title: 'test',
path: '/pages/home/index'
}
}
</script>
操作步骤：
1.在main.ts中定义mixin
import { createSSRApp } from 'vue'
import App from './App.vue'
import uView from '@/uni_modules/vk-uview-ui'
import { pinia } from './store/pinia'
const mixin = {
onShareAppMessage() {
return {
title: '分享我的小程序',
path: '/pages/home/index'
}
}
}
export function createApp () {
const app = createSSRApp(App)
app.use(pinia)
app.use(uView)
app.mixin(mixin)
return {
app,
pinia // 此处必须将 Pinia 返回
}
}
2.在页面 pages/home/index.vue 中定义onShareAppMessage
<script setup lang="ts">
import { onShareAppMessage } from '@dcloudio/uni-app'
onShareAppMessage() {
return {
title: 'test',
path: '/pages/home/index'
}
}
</script>
1.在main.ts中定义mixin
import { createSSRApp } from 'vue'
import App from './App.vue'
import uView from '@/uni_modules/vk-uview-ui'
import { pinia } from './store/pinia'
const mixin = {
onShareAppMessage() {
return {
title: '分享我的小程序',
path: '/pages/home/index'
}
}
}
export function createApp () {
const app = createSSRApp(App)
app.use(pinia)
app.use(uView)
app.mixin(mixin)
return {
app,
pinia // 此处必须将 Pinia 返回
}
}2.在页面 pages/home/index.vue 中定义onShareAppMessage
<script setup lang="ts">
import { onShareAppMessage } from '@dcloudio/uni-app'
onShareAppMessage() {
return {
title: 'test',
path: '/pages/home/index'
}
}
</script>预期结果：
pages/home/index.vue首页中分享显示分享标题为"test"
pages/home/index.vue首页中分享显示分享标题为"test"
实际结果：
pages/home/index.vue首页中分享显示分享标题为"分享我的小程序"
pages/home/index.vue首页中分享显示分享标题为"分享我的小程序"
bug描述：
vue3 使用mixins 设置分享onShareAppMessage， 页面中 setup 定义onShareAppMessage无法覆盖, 仍然是mixin中定义的分享内容。
若是移除mixins中的分享，则会显示页面定义的分享内容
剑齿虎 - 全栈开发接单，php/vue/react/nodejs 微信：Base1024
解决办法:
不把 onShareAppMessage, onShareTimeline 写到 setup 中, 写到 onLoad / onMounted 里面即可解决
onLoad(() => {
onShareAppMessage(() => {...});
})
watchRoute() {
uni.onAppRoute((res) => {
console.log('===>', res);
let pages = getCurrentPages();
let view = pages[pages.length - 1];
if (view) {
// console.log(view, 'aaaaaa');
view.onShareAppMessage = function () {
//你的分享配置
return {
imageUrl: '/static/img/share.png',
title: '全局分享',
path: '/pages/a/a',
};
};
}
});
}在你的App.vue，onLaunch调用这个方法，在需要分享的页面加上onShareAppMessage() {}，就可以全局分享了
a***@163.com (作者)
蟹蟹你的回复，请教下，如果每个页面都默认设置同一个分享，除了hooks有别的方式能统一设置吗
2022-09-20 09:59
c***@163.com
解决没老铁
2023-08-01 12:04
c***@163.com
我使用mixin像vue2那样也可以
2023-08-01 12:14