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

参考文档

注意

  • 使用时,必须为页面配置 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>
相关推荐
bin91534 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云5 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
HappyAcmen7 小时前
关于微信小程序的面试题及其解析
微信小程序·小程序·notepad++
乔冠宇7 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
lvbb668 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
爱上大树的小猪11 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
计算机-秋大田12 小时前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
禾苗种树12 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
小盼江14 小时前
水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 代码+开发文档+视频教程
vue.js·spring boot·ui
初遇你时动了情14 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss