技术栈:Taro+vue3
需求:所有页面均可实现分享转发功能,且指定跳转到统一页面
方法一:
每个页面单独配置分享转发功能
javascript
<script setup lang="ts">
import { useShareAppMessage } from '@tarojs/taro'
// 每个vue文件页面配置 enableShareAppMessage
definePageConfig({
navigationBarTitleText: '首页',
enableShareAppMessage: true
})
// 使用 useShareAppMessage 钩子来自定义分享内容,并指定跳转路径为首页。
useShareAppMessage((res) => {
console.log('share', res)
return {
title: '欢迎访问我们的小程序', // 自定义分享标题
path: '/pages/index/index' // 指定跳转到首页
}
})
</script>
方法二:
进行全局配置
注意: Taro 没有直接提供全局设置分享内容的方法
可以通过覆盖 Taro 的 Page 函数,为每个页面添加全局默认的分享配置。这样,所有页面都会自动具备相同的分享功能,而无需在每个页面单独配置。
javascript
// app.ts
const app = createApp({
//@ts-ignore
// 先保存原生Page函数
const originPage = Page
// @ts-ignore
// 通过直接赋值方式,覆盖Taro的Page函数
Page = (pageConfig)=>{
const globalShareConfig = {
// 设置全局默认分享
onShareAppMessage:(res:any) => {
if(res.from === 'button') {
console.log(res.target)
}
return {
path: 'pages/index/index'
}
}
}
// 全局默认的分享配置 globalShareConfig 和页面的原始配置 pageConfig 合并到一个新的对象 newPageConfig
const newPageConfig = Object.assign({},globalShareConfig,pageConfig)
// 使用原始Page函数创建页面实例
return originPage(newPageConfig);
}
})