uniapp分享功能

页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
onShareTimeline 监听用户点击右上角转发到朋友圈 微信小程序 2.8.1+
onAddToFavorites 监听用户点击右上角收藏 微信小程序、QQ小程序 2.8.1+
onShareAppMessage 用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序

小程序分享(vue2和vue3书写方式不同)

在 Vue 3 的

用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮();

<script setup>
// 分享微信好友import { onLoad, onReachBottom,	onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app';...onShareAppMessage(() => {return {title: '会员福利社', // 分享标题path: '/pages/index/index', // 分享路径imageUrl:'http://mallzzy.oss-cn-beijing.aliyuncs.com/522454e4c00fa5925d16de531e2caabda220d7a243aefa3be46dc4b7229ba5a3.jpg' // 分享图片路径};});// 分享朋友圈onShareTimeline(() => {return {title: '会员福利社', // 分享标题path: '/pages/index/index', // 分享路径imageUrl: 'http://mallzzy.oss-cn-beijing.aliyuncs.com/522454e4c00fa5925d16de531e2caabda220d7a243aefa3be46dc4b7229ba5a3.jpg' // 分享图片路径};});</script>

可配置的分享字段:参考uniapp官网

在 Vue 2 中,onShareAppMessage 和 onShareTimeline 方法应该在组件的 methods 中定义,并且需要在 onLoad 或 onShow 生命周期钩子中调用 this.setShareAppMessage 和 this.setShareTimeline 来注册这些方法

不需要导入onShareAppMessage,setShareTimeline<script>
onShow() {...其他代码// 注册分享方法this.setShareAppMessage();this.setShareTimeline();},methods: {...其他代码// 分享微信好友setShareAppMessage() {uni.showShareMenu({withShareTicket: true,menus: ['shareAppMessage', 'shareTimeline']});uni.onShareAppMessage(() => {return {title: '门店', // 分享标题path: 'pages/integralIndex/index', // 分享路径success: function (res) {console.log('分享成功', res);}};});},// 分享朋友圈setShareTimeline() {uni.showShareMenu({withShareTicket: true,menus: ['shareAppMessage', 'shareTimeline']});uni.onShareTimeline(() => {return {title: '门店', // 分享标题path: 'pages/integralIndex/index', // 分享路径};});}}
};</script>

说明:
setShareAppMessage 和 setShareTimeline 方法:

在 methods 中定义了 setShareAppMessage 和 setShareTimeline 方法,用于注册分享功能。
使用 uni.showShareMenu 方法显示分享菜单,并注册 uni.onShareAppMessage 和 uni.onShareTimeline 回调函数。
onShow 生命周期钩子:

在 onShow 钩子中调用 setShareAppMessage 和 setShareTimeline 方法,确保每次页面显示时都注册分享功能。

在这里插入图片描述

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

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

相关文章

小程序中引入下载到本地的iconfont字体图标加载不出来问题解决

我这个是uniapp项目,字体图标都是一样的,在vue项目中web端、uniapp运行到h5都没问题,但是运行到小程序加载不出来,报错如下: 不让用本地路径,所以我们要转为base64编码,这里给大家提供一个工具,它可以把本地字体文件转为base64:transfonter 进入官网后,第一步: …

Sql server 备份还原方法

备份 方法1&#xff0c;选择对应的数据库名-------》右键 任务---------》备份 默认备份类型 完整 文件后缀 .bak 方法2,选择对应的数据库名-------》右键 任务----------》生成脚本 选择要编写的数据库对象(表&#xff0c;视图&#xff0c;存储过程等) 选择对应的 服…

中兴光猫修改SN,MAC,修改地区,异地注册,改桥接,路由拨号

前言 请先阅读上一篇博客获取到光猫超级密码电信光猫获取超级密码 电信光猫天翼网关4.0获取超级密码教程 四川电信光猫 中兴 F1855V2 ZXHN F1855V2 telent权限 实战 实测_天翼4.0光猫超级密码-CSDN博客 修改SN-修改地区&#xff0c;光猫异地注册&#xff0c;设置桥接模式&#…

AI大模型开发架构设计(14)——基于LangChain大模型的案例架构实战

文章目录 基于LangChain大模型的案例架构实战1 LangChain 顶层架构设计以及关键技术剖析LangChain 是什么?LangChain的主要功能是什么&#xff1f;LangChain 顶层架构设计LangChain 典型使用场景&#xff1a;QA 问答系统LangChain 顶层架构设计之 Model I/OLangChain 顶层架构…

Ubuntu 的 ROS 操作系统turtlebot3环境搭建

引言 本文介绍如何在Ubuntu系统中为TurtleBot3配置ROS环境&#xff0c;包括安装和配置ROS Noetic的步骤&#xff0c;为PC端控制TurtleBot3提供操作指南。 安装和配置的过程分为PC设置、系统安装、依赖安装等部分&#xff0c;并在最后进行网络配置&#xff0c;确保PC端能够顺利…

009_SSH_Mysql图书管理系统(学生注册 借书 还书 绵阳)——lwplus87(免费送)

Abstract IV 第1章 概述... 1 1.1 课题背景... 1 1.2 课题意义... 1 1.3 文献综述... 2 1.3.1 技术综述... 2 1.4 总体设计原则... 2 第2章 系统分析... 4 2.1 系统的需求分析... 4 2.2 业务流程分析... 5 2.2.1 系统管理员业务流程分析... 5 2.3 数据流程分析... 7 2.3.1 图书…

微服务电商平台课程三:搭建后台服务

前言 上节课,我们一起完成基础环境搭建,这节课, 我们利用上节课搭建我们电商平台.这节课我们采用开源代码进行搭建, 不论大家后续从事什么行业,都要学会站在巨人的肩膀上. 之前所说的,整个微服务平台的技术栈也是非常多的, 由于时间和效果的关系, 我们不可能从每个技术一步一…

解决MySQL中整型字段条件判断禁用不生效的问题

MySQL中&#xff0c;当尝试将整数与字符串进行比较时&#xff0c;数据库可能会尝试将字符串转换为整数。在这种情况下&#xff0c;空字符串会被转换为整数0&#xff0c;所以0 ! 会被解释为0 ! 0&#xff0c;结果自然是false。 在开发过程中&#xff0c;我们经常需要对数据库中的…

大数据技术在金融风控中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 大数据技术在金融风控中的应用 大数据技术在金融风控中的应用 大数据技术在金融风控中的应用 引言 大数据技术概述 定义与原理 发…

微信小程序_模板与配置_day2

一、目标 A. 能够使用WXML模板语法渲染页面结构 B. 能够使用WXSS样式装饰页面结构 C. 能够使用app.json对小程序进行全局性配置 D. 能够使用page.json对小程序页面进行个性化配置 E. 能够知道如何发起网络数据请求 二、目录 A. WXML模板语法 B. WXSS模板样式 C. 全局配置 D.…

网络安全技术在能源领域的应用

摘要 随着信息技术的飞速发展&#xff0c;能源领域逐渐实现了数字化、网络化和智能化。然而&#xff0c;这也使得能源系统面临着前所未有的网络安全威胁。本文从技术的角度出发&#xff0c;探讨了网络安全技术在能源领域的应用&#xff0c;分析了能源现状面临的网络安全威胁&a…

设计模式-七个基本原则之一-单一职责原则 + SpringBoot案例

单一职责原理:(SRP) 面向对象七个基本原则之一 清晰的职责&#xff1a;每个类应该有一个明确的职责&#xff0c;避免将多个责任混合在一起。降低耦合&#xff1a;通过将不同的职责分开&#xff0c;可以降低类之间的耦合度&#xff0c;提高系统的灵活性。易于维护&#xff1a;当…

nvm 安装指定node版本时--list 显示为空

1、安装nvm 2、查看nvm 可安装的list 语句&#xff1a; nvm list available 注&#xff1a; 可能需要安装的不在list 中&#xff0c;可直接 用命令语句 安装指定版本 nvm install 12.18.1 如果安装list 显示为空 找到安装路径下的 settings.txt,最后两行没有的添加上&#x…

[HNCTF 2022 Week1]ret2shellcode-好久不见12

知识点&#xff1a;1.shellcode获取 获取Shellcode的两种方法&#xff1a; 手写&#xff1a;想办法调用execve("/bin/sh",null,null) 传入字符串&#xff1a;/bin///sh 系统调用execve pwntools自动生成&#xff1a; 先指定context.arch"i386/amd64" …

实现3D热力图

实现思路 首先是需要用canvas绘制一个2D的热力图&#xff0c;如果你还不会&#xff0c;请看json绘制热力图。使用Threejs中的canvas贴图&#xff0c;将贴图贴在PlaneGeometry平面上。使用着色器材质&#xff0c;更具json中的数据让平面模型 拔地而起。使用Threejs内置的TWEEN&…

力扣 LeetCode 977. 有序数组的平方(Day1:数组)

解题思路&#xff1a; 方法一&#xff1a;先平方再快排 方法二&#xff1a;双指针 因为可能有负数&#xff0c;所以对于一个数组 [ -5 , -3 , 0 , 2 , 4 ] 可以从两边向内靠拢&#xff0c;最大值一定出现在两端 设置指针 i 和指针 j 分别从左右两边靠拢 因为要从小到大排序…

[vulnhub] DarkHole: 1

https://www.vulnhub.com/entry/darkhole-1,724/ 端口扫描主机发现 探测存活主机&#xff0c;184是靶机 nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 09:59 CST Nmap scan report for 192.168.75.1 Host is up (0.00027s latency). MA…

[免费]SpringBoot+Vue3校园宿舍管理系统(优质版)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue3校园宿舍管理系统(优质版)&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue3校园宿舍管理系统(优质版) Java毕业设计_哔哩哔哩_bilibili 项目介绍 随着信息技术的不断发展&…

docker基础:搭建centos7(详见B站泷羽sec)

docker的简单学习&#xff1a; sudo apt-get update //这个命令让系统检查有没有新软件 sudo apt-get install docker.io //安装 Docker sudo docker version //查看是否安装成功&#xff0c;显示docker的版本信息 启用Docker 启…