vue3 使用uniapp onShareAppMessage 添加点击按钮

在Vue3中，可以使用uniapp提供的onShareAppMessage方法来添加分享功能，并且可以在分享弹窗中添加自定义按钮。

首先，在组件中添加onShareAppMessage方法，该方法会返回一个对象，用于配置分享信息。例如：

export default {
  methods: {
    onShareAppMessage() {
      return {
        title: '分享标题',
        path: '/pages/index/index',
        imageUrl: 'https://example.com/share.jpg',
        success: function(res) {
          console.log('分享成功', res)
        }
      }
    }
  }
}

其中，title为分享标题，path为分享路径，imageUrl为分享图片的链接，success为分享成功后的回调函数。

接着，在模板中添加一个自定义按钮，并绑定一个点击事件：

<template>
  <view>
    <button @tap="onCustomShare">自定义分享</button>
  </view>
</template>

最后，在onCustomShare方法中调用uniapp提供的showShareMenu方法，打开分享弹窗，并且可以在弹窗中添加自定义按钮。例如：

export default {
  methods: {
    onCustomShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline'],
        success: function() {
          uni.onShareAppMessage(function() {
            return {
              title: '分享标题',
              path: '/pages/index/index',
              imageUrl: 'https://example.com/share.jpg',
              success: function(res) {
                console.log('分享成功', res)
              }
            }
          })
          uni.onShareTimeline(function() {
            console.log('分享到朋友圈')
          })
          uni.addShareButton({
            title: '自定义按钮',
            imageUrl: 'https://example.com/share-button.jpg',
            success: function(res) {
              console.log('自定义分享按钮点击', res)
            }
          })
        }
      })
    }
  }
}

其中，withShareTicket表示是否开启分享到群的功能，menus表示分享弹窗中显示的按钮，uni.onShareAppMessage和uni.onShareTimeline分别用于配置分享到好友和分享到朋友圈的信息，uni.addShareButton用于添加自定义分享按钮。

总结起来，使用uniapp的onShareAppMessage方法可以方便地在Vue3中添加分享功能，并且还可以自定义分享弹窗中的按钮。