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

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

wxml文件

    
       
       分享
      
    

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;    //圆角处理
}

效果

效果图

代码下载

地址：https://github.com/wxplug/add-tips 欢迎star