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

一、引言

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

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

二、平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x x x
参数 类型 说明 平台差异说明
from String 分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮)
target Object 如果 from 值是 button,则 target 是触发这次分享事件的 button,否则为 undefined
webViewUrl String 页面中包含 <web-view> 组件时,返回当前 <web-view> 的url 微信小程序1.6.4+、支付宝小程序、京东小程序

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

参数名 类型 必填 说明 平台差异说明
title String 分享标题
path String 页面 path ,必须是以 / 开头的完整路径。注意:京东小程序,开头不要加'/' QQ小程序不支持
imageUrl String 分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4
content String 百度小程序表现为:分享内容;支付宝小程序表现为:吱口令文案 百度小程序、支付宝小程序
desc String 自定义分享描述 支付宝小程序、抖音小程序、京东小程序
bgImgUrl String 自定义分享二维码的背景图,建议大小750*950(网络图片路径) 支付宝小程序
query String QQ小程序查询字符串,必须是 key1=val1&key2=val2 的格式。从这条转发消息进入后,可通过 qq.getLaunchOptionSync() 或 qq.onShow() 获取启动参数中的 query。 QQ小程序
templateId String 开发者后台设置的分享素材模板 id 抖音小程序
mpId String 微信小程序id,此场景用于分享到微信后,用户点击分享卡片,进入该appid对应的微信小程序,实现引流到微信小程序 京东小程序
type Number 转发形式(0 - 微信小程序正式版 ;1 - 微信小程序开发版;2 - 微信小程序体验版;京东App9.0.0开始不填或者其他值都会先判断是否有url参数,如果有打开分享后显示url对应页面,否则默认生成京东小程序官方的一个分享中间页面,点击可跳到京东app里面的对应小程序。) 京东小程序
mpPath String 微信小程序路径 京东小程序
channel String 渠道(不写默认微信朋友,微信朋友圈) 京东小程序
url String h5链接地址(h5分享填写,不填默认中间页) 京东小程序
success Function 接口调用成功的回调函数 支付宝小程序、百度小程序
fail Function 接口调用失败的回调函数 支付宝小程序、百度小程序
complete Function 接口调用结束的回调函数(调用成功、失败都会执行) 百度小程序

注意

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

三、踩坑

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

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

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

解决方案:注冊全局的onShareAppMessage

globalShare.ts

TypeScript 复制代码
/*
 * @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'
          })
        }
      }
    }
  }
}
html 复制代码
 <button
      open-type="share"
      :data-url="url ?? ''"
      :data-title="title"
      class="share-btn"
  >
     <ekr-icon open-type="share" name="icon-share"></ekr-icon>
  </button>
相关推荐
qq229511650215 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
尚学教辅学习资料14 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23414 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟14 小时前
小程序跳转另一个小程序
小程序
17 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
21 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji21 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域1 天前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序