Taro@3.x+Vue@3.x+TS开发微信小程序，设置转发分享

embedded/2024/9/24 14:23:56/

参考文档

useShareAppMessage

注意

使用时，必须为页面配置 enableShareAppMessage: true。（修改配置文件后请重新编译项目）
当 onShareAppMessage 没有触发时，请在页面配置中设置 enableShareAppMessage: true
只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

1. 全局转发分享

在 src/app.ts 中加入以下配置：

import LOGO from './images/logo.jpg'interface ShareType {from: 'button'|'menu' // 页面内转发按钮 | 右上角转发菜单target: object
}
// @ts-ignore
const originPage = Page
console.log('originPage', originPage)
// @ts-ignore
Page = function (pageConfig) {console.log('pageConfig', pageConfig)// 设置全局默认分享const globalShareConfig = {onShareAppMessage: (res: ShareType) => {console.log('index share', res)if (res.from === 'button') {// 来自页面内转发按钮console.log(res.target)}return {title: '纵横命运之上', // 转发标题 当前小程序名称// path: '/pages/index/index', // 转发路径，当前页面 path ，必须是以 / 开头的完整路径// 使用默认截图 设置转发显示的图片，可以使用网络图片 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及 JPG 。显示图片长宽比是 5:4imageUrl: LOGO, // 相对路径图片// imageUrl: 'https://image-path.png' // 网络图片}}}// 将全局分享配置合并到当前页面的配置中const newPageConfig = Object.assign({}, globalShareConfig, pageConfig)// 使用原始Page函数创建页面实例return originPage(newPageConfig)
}

2. 单个页面自定义转发分享

例如：在首页设置自定义转发分享

在 pages/index/index.config.ts 加入相关配置:

export default definePageConfig({navigationBarTitleText: '首页',enableShareAppMessage: true
})

在 pages/index/index.vue 自定义转发分享:

<script setup lang="ts">
import { useShareAppMessage } from '@tarojs/taro'useShareAppMessage((res) => {console.log('share', res)if (res.from === 'button') {// 来自页面内转发按钮console.log(res.target)}return {title: '纵横命运之上',path: '/page/index/index'}
})
</script>
<template><button open-type="share">分享</button>
</template>