微信小程序点击icon实现分享功能

news/2024/11/8 20:58:33/

1.小程序分享功能实现方式
小程序分享功能有两种方式,监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。
使用微信小程序的分享功能需要定义onShareAppMessage(Object object)函数,存在该函数分享功能才能被触发
官网介绍如下:

2.定义触发分享功能的icon按钮
注意设置open-type="share"用于触发分享功能

<button class="iconfont icon-yaoqing" style="font-size:65rpx;width:100%" open-type="share"></button>
1
效果查看
在这里插入图片描述

可以看到icon显示在按钮上了,但存在自带样式,有点丑,需要去掉
我的按钮存在于student-orther-icon下,将该class下的按钮样式清除 

/* button自带样式清除 */
.student-orther-icon button::after {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.student-orther-icon button {
  background-color: transparent !important;
  padding: 0 !important;
  line-height: inherit !important;
  margin: 0 !important;
  width: auto !important;
  font-weight: 500 !important;
  border-radius: none !important;
}
 

  //分享功能
  onShareAppMessage(res){
    //判断触发的方式是否为按钮
    if(res.from=="button"){
      //参数
      let uid = "111";
      return{
        title:"标题",
        path:"/pages/dynamic/dynamic?uid="+uid
      }
    }
  }
 

在这里插入图片描述

就这样,分享功能就简简单单的实现了 


http://www.ppmy.cn/news/77922.html

相关文章

免费开源 | 基于SpringBoot的学生信息管理系统

一、项目简介 学生信息管理后台&#xff0c;包括学生管理、课程管理、成绩管理&#xff0c;适用于课设等&#xff0c;仅具有管理功能&#xff0c;感兴趣的伙伴可以再次完善。 二、软件架构 springboot mybatis thymeleaf 三、系统运行 注&#xff1a;mysql数据库要8.0以上…

pytest+requests+Python3.7+yaml+Allure+Jenkins+docker实现接口自动化

目录 接口自动化测试框架&#xff08;用例自动生成&#xff09; 项目说明 技术栈 环境部署 框架流程图与目录结构图及相关说明 1、框架流程图如下 2、代码目录结构图如下 关联详解 函数助手详解 代码设计与功能说明 1、定义运行配置文件 runConfig.yml 2、接口配置…

数慧时空20年磨一剑:推出智能遥感云平台DIEY,自然资源多模态大模型“长城”,为地理信息产业提速

作者 | 伍杏玲 出品 | CSDN 据中国地理信息产业发展报告公布的数据&#xff0c;截至2020年末&#xff0c;行业从业单位13.8万家&#xff0c;从业人数336.6万&#xff0c;到2021年末&#xff0c;从业单位增加到16.4万家&#xff0c;从业人数增加到398万&#xff0c;产业规模越…

CSDN第54期编程竞赛活动经验

题目1&#xff1a;陶陶摘苹果 陶陶家的院子里有一棵苹果树&#xff0c;每到秋天树上就会结出 10 个苹果。苹果成熟的时候&#xff0c;陶陶就会跑去摘苹果。陶陶有个 30 厘米高的板凳&#xff0c;当她不能直接用手摘到苹果的时候&#xff0c;就会踩到板凳上再试试。 现在已知 10…

css学习-内容加载占位动画(渐变动画)

文章目录 学习链接纯CSS渐变动画结合vue指令简单使用 学习链接 Git Hub前端50天50个项目 | 第24 内容文本 纯CSS渐变动画 <style lang"scss" scoped> .card-wrapper {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center; …

安卓基础巩固(一):工程结构、基本概念、常用布局、基本组件、动画

文章目录 安卓项目结构AndroidMainfest.xmlres资源目录简介 基本概念LayoutR类 Application与ActivityContextIntent数据传递可传递的数据类型intent.putExtra&#xff08;&#xff09;和使用Bundle的区别数据传递大小的限制 通过Intent 过滤器接收隐式 Intent&#xff1a; 单位…

Hadoop部署完全分布式

​ 在真实的企业环境中&#xff0c;服务器集群会使用到多台机器&#xff0c;共同配合&#xff0c;来构建一个完整的分布式文件系统。而在这样的分布式文件系统中&#xff0c;HDFS相关的守护进程也会分布在不同的机器上&#xff0c;例如: NameNode守护进程&#xff0c;尽可能的…

go-gf框架两个表以事务方式写入示例

下面是对每一行代码的中文解释&#xff1a; // 创建数据库连接对象 var tx gdb.TX这行代码声明了一个名为tx的变量&#xff0c;类型为gdb.TX&#xff0c;表示数据库事务对象。 // 开启事务 if tx, err g.DB().Ctx(ctx).Begin(ctx); err nil {这行代码通过在数据库连接&…