小程序-uniapp小程序中onShareAppMessage(OBJECT)实现带参数的分享功能

一、引言

小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。

• 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（<button open-type="share">）；
• 此事件需要 return 一个Object，用于自定义分享内容

 二、平台差异说明

此事件需要 return 一个 Object，用于自定义分享内容，其内容如下：

注意

• 微信、头条平台：只有定义了此事件处理函数，小程序右上角菜单才会显示“转发”按钮
• QQ小程序还支持通过qq.offShareAppMessage取消对系统分享按钮的监听

三、踩坑

问题：vue3 setup scirpt语法使用onShareAppMessage编译到微信小程序，小程序分享不生效

原因：当前onShareAppMessage其实是被全局的onShareAppMessage给覆盖了，执行顺寻是先执行的页面，再执行的全局。

ui-app issiiues： https://github.com/dcloudio/uni-app/issiiues/3084

解决方案：注冊全局的onShareAppMessage

globalShare.ts

/*
 * @Author: LYM
 * @Date: 2024-03-25 19:23:20
 * @LastEditors: LYM
 * @LastEditTime: 2024-03-26 11:39:47
 * @Description: 分享
 */
import { onShareAppMessage } from '@dcloudio/uni-app'
import share from '@/assets/images/share-1.jpg'

export const globalShare = {
  onShareAppMessage(e: any) {
    if (e.from === 'button') {
      return {
        title: e.target.dataset.title ?? '科创知识订阅',
        path: `/pages/detail/index?url=${encodeURIComponent(
          e.target.dataset.url
        )}`,
        imageUrl: share,
        success() {
          debugger
          uni.showToast({
            title: '分享成功'
          })
        },
        fail() {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      }
    }
  }
}

 <button
      open-type="share"
      :data-url="url ?? ''"
      :data-title="title"
      class="share-btn"
  >
     <ekr-icon open-type="share" name="icon-share"></ekr-icon>
  </button>