微信小程序开发-分享或转发悬浮按钮-CSDN博客

本文链接：https://blog.csdn.net/weixin_38228689/article/details/122375018

通过给 button 组件设置属性open-type="share"，可以在用户点击按钮后触发 [Page.onShareAppMessage]事件，如果当前页面没有定义此事件，则点击后无效果。

wxml文件

    <view class='share'>
       <image src='../../images/forward.png'></image>
       <text>分享</text>
      <button hoverClass="btn-hover" open-type='share' ></button>
    </view>

wxss文件

  .share { 
    height: 95rpx;
    width: 95rpx;
    position: fixed;
    bottom: 170rpx;
    right: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    background: #15aa07;
    border-radius: 50%;
    z-index: 10;
    opacity: 0.9;  透明度
    top: 1150rpx;
  } 
  .share image {
    height: 70rpx;
    width: 70rpx;
  }
  .share text {
    color: #fff;
    font-weight: bold; 
  }
   
  .share button {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.1;
    z-index: 99;
  }

  .btn-hover {
    background: #033f18;   //点击效果，颜色不必太深
    border-radius: 50px;    //圆角处理
}