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

365官方登录入口 admin 2025-10-15 04:34:17 阅读 256

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

1.小程序分享功能实现方式2.定义触发分享功能的icon按钮3.onShareAppMessage实现分享

本文是想点击一个icon触发实现分享功能

1.小程序分享功能实现方式

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

2.定义触发分享功能的icon按钮

注意设置open-type="share"用于触发分享功能

效果查看 可以看到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;

}

效果如下 是不是好看了许多

3.onShareAppMessage实现分享

//分享功能

onShareAppMessage(res){

//判断触发的方式是否为按钮

if(res.from=="button"){

//参数

let uid = "111";

return{

title:"标题",

path:"/pages/dynamic/dynamic?uid="+uid

}

}

}

效果如下 就这样,分享功能就简简单单的实现了

相关文章