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

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

1、wxml文件

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

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

3、效果

 

4、演示

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