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

theMuseCatcher2024-05-08 14:28

参考文档

useShareAppMessage

注意

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

1. 全局转发分享

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

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:4
        imageUrl: LOGO, // 相对路径图片
        // imageUrl: 'https://image-path.png' // 网络图片
      }
    }
  }
  // 将全局分享配置合并到当前页面的配置中
  const newPageConfig = Object.assign({}, globalShareConfig, pageConfig)
  // 使用原始Page函数创建页面实例
  return originPage(newPageConfig)
}

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

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

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

ts 复制代码

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

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

ts 复制代码

<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>