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

一、引言

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

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

 二、平台差异说明

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

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

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

注意

  • 微信、头条平台:只有定义了此事件处理函数,小程序右上角菜单才会显示“转发”按钮
  • 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() {debuggeruni.showToast({title: '分享成功'})},fail() {uni.showToast({title: '分享失败',icon: 'none'})}}}}
}
 <buttonopen-type="share":data-url="url ?? ''":data-title="title"class="share-btn"><ekr-icon open-type="share" name="icon-share"></ekr-icon></button>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/772821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SpringBoot整合系列】SpringBoot3.x整合Swagger

目录 产生背景官方解释&#xff1a;作用SpringBoot3整合Swagger注意事项swagger3 常用注解SpringBoot3.x整合Swagger1.创建工程(jdk:17,boot:3.2.4)2.引入pom依赖3.application.yml添加配置4.添加swagger3.0配置5.控制器层(Controller)6.模型层(Model)7.启动并测试【Get请求接口…

一、Spring Cloud(Base工程构建)

一、Spring Cloud&#xff08;Base工程构建&#xff09; 1.1 Spring Cloud 简述 1.1.1 Spring Cloud 版本推荐 在讲解 Spring Cloud 之前&#xff0c;首先推荐一下各个依赖的版本&#xff0c;以免出现版本错误 版本推荐 必须根据以上版本&#xff0c;否则可能会出现一些不…

鸿蒙harmonyOS常用基础标签、组件、事件等用法介绍

基础组件 text &#xff1a; 字体标签&#xff0c;汉字显示必须用字体组件包裹&#xff0c;规范规定&#xff0c;不写不显示image&#xff1a;图片标签&#xff0c;属性&#xff1a;src&#xff0c;路径相对路径…/方式button&#xff1a;按钮标签&#xff0c;属性&#xff1a…

Hana数据库 No columns were bound prior to calling SQLFetch or SQLFetchScroll

在php调用hana数据库的一个sql时报错了&#xff0c;查表结构的sql&#xff1a; select * from sys.table_columns where table_name VBAP SQLSTATE[SL009]: <<Unknown error>>: 0 [unixODBC][Driver Manager]No columns were bound prior to calling SQLFetch …

智能小程序开发 —— meature API 汇总(二)

resetStatistics 重置设备的统计数据。 注意&#xff1a;该方法会清空统计数据&#xff0c;请注意使用方式&#xff01; 请求参数 参数数据类型说明是否必填devIdstring设备 ID是 请求示例 // ray-js/ray^1.2.12 import {resetStatistics} from ray-js/ray;resetStatisti…

基于SpringBoot和Leaflet的行政区划地图掩膜效果实战

目录 前言 一、掩膜小知识 1、GIS掩膜的实现原理 2、图层掩膜流程 二、使用插件 1、leaflet-mask介绍 2、核心代码解释 三、完整实例实现 1、后台逻辑实现 2、省级行政区划查询实现 3、行政区划定位及掩膜实现 4、成果展示 总结 前言 在之前的博客提过按空间矢量…

hadoop 常用命令

hadoop 常用命令 hadoop fs -mkdir /test hadoop fs -put /opt/frank/tb_test03.txt /test/ hadoop fs -ls /test/ hadoop fs -cat /test/tb_test03.txt hadoop fs -rm /test/tb_test03.txt hadoop dfs 也能使用、但不推荐&#xff0c;执行会提示&#xff1a; DEPRECATED: Us…

GPT大语言模型助力R语言开展数据统计分析

自2022年GPT&#xff08;Generative Pre-trained Transformer&#xff09;大语言模型的发布以来&#xff0c;它以其卓越的自然语言处理能力和广泛的应用潜力&#xff0c;在学术界和工业界掀起了一场革命。在短短一年多的时间里&#xff0c;GPT已经在多个领域展现出其独特的价值…

【STM32+HAL】I2C+DMA读取AS5600编码器

一、DMA的应用 有关更多DMA的应用&#xff0c;详见【STM32HAL】DMA应用 二、HAL库配置 1、开启I2C 开启对应DMA及中断 2、开启串口通信 至此&#xff0c;HAL库配置完毕 三、DMA版&#xff08;高效但不稳定&#xff09; 1、as5600.c #include "AS5600.h" #includ…

数据结构与算法 顺序表的基本运算

一、实验内容 编写一个程序实现&#xff0c;实现顺序表的各种基本运算&#xff08;假设顺序表的元素类型为char&#xff09;&#xff0c;并以此为基础设计一个程序完成下列功能&#xff1a; &#xff08;1&#xff09;初始化顺序表&#xff1b; &#xff08;2&#xff09;采…

docker 安装 kibana

使用Docker安装Kibana相对简单且易于管理。以下是使用Docker安装Kibana的基本步骤&#xff1a; 安装Docker&#xff1a; 确保你的CentOS系统上已经安装了Docker。如果没有&#xff0c;请按照以下命令安装&#xff1a; sudo yum install -y yum-utils device-mapper-persistent-…

用指针处理链表(二)

4建立动态链表 所谓建立动态链表是指在程序执行过程中从无到有地建立起一个链表&#xff0c;即一个一个地开辟结点和输入各结点数据,并建立起前后相链的关系。 例11.8 写一函数建立一个有3名学生数据的单向动态链表。 先考虑实现此要求的算法(见图11.12)。 设3个指针变量:he…

企业级快速开发框架 nbsaas-boot 1.1.8-2024 发布了

<parent><groupId>com.nbsaas.boot</groupId><artifactId>nbsaas-boot</artifactId><version>1.1.8-2024</version> </parent> 本次更新内容 1. 重构代码生成器&#xff0c;采用类提取和字段提取两种方式&#xff0c;提取功能…

HDFSRPC通信框架详解

本文主要对HDFSRPC通信框架解析。包括listener&#xff0c;reader&#xff0c;handler&#xff0c;responser等实现类的源码分析。注意hadoop版本为3.1.1。 写在前面 rpc肯定依赖于socket通信&#xff0c;并且使用的是java NIO。读者最好对nio有一定的了解&#xff0c;文章中…

HTML5 、CSS3 、ES6 新特性

HTML5 新特性 1. 新的语义化元素&#xff1a;article 、footer 、header 、nav 、section 2. 表单增强&#xff0c;新的表单控件&#xff1a;calendar 、date 、time 、email 、url 、search 3. 新的 API&#xff1a;音频(用于媒介回放的 video 和 audio 元素)、图形&#x…

古河云科技校园数字孪生解决方案

智慧校园需将环境信息、资源信息和应用信息全部转化为数字化信息&#xff0c;为管理决策和服务提供强有力的支持。智慧系统集智能化感知、智能化控制、智能化管理、智能化互动反馈、智能化数据分析、智能化视窗等功能于一体&#xff0c;旨在实现校园信息服务的全面提升。 行业…

教程1_图像视频入门

一、图像入门 1、cv2.imread()函数 cv2.imread() 是 OpenCV 库中的一个函数&#xff0c;用于读取图像文件。下面是 cv2.imread() 函数的基本介绍和使用方法&#xff1a; 函数定义 cv2.imread(filename, flagscv2.IMREAD_COLOR) 参数 filename&#xff1a;要读取的图像的路…

使用Spring Data Elasticsearch实现与Elasticsearch的集成,进行全文搜索和数据分析。

使用Spring Data Elasticsearch实现与Elasticsearch的集成&#xff0c;进行全文搜索和数据分析。 使用Spring Data Elasticsearch可以很容易地实现与Elasticsearch的集成&#xff0c;从而进行全文搜索和数据分析。下面是一个简单的示例&#xff0c;演示如何在Spring Boot应用程…

Excel 导入、导出的封装

最近在封装公司统一使用的组件&#xff0c;主要目的是要求封装后开发人员调用简单&#xff0c;不用每个项目组中重复去集成同一个依赖l&#xff0c;写的五花八门&#xff0c;代码不规范&#xff0c;后者两行泪。 为此&#xff0c;我们对EasyExcel进行了二次封装&#xff0c;我…

flutter const InviteFriendReward(),用setState刷新不了

列布局里面添加了InviteFriendReward()&#xff0c;InviteFriendReward()里面有请求接口的开关是否显示&#xff0c;但是因为里面有波浪形&#xff0c;所以加了const&#xff0c;导致setState时&#xff0c;即使开关是开的&#xff0c;也没有再显示了 const InviteFriendRewar…