微信小程序之分享或轉發功能（自定義button樣式）

小程序頁面內發起轉發

通過給 button 組件設置屬性 open-type="share"，可以在用戶點擊按鈕后觸發 Page.onShareAppMessage 事件，如果當前頁面沒有定義此事件，則點擊后無效果。相關組件：button

wxml：

<!-- 分享 -->
<!--/pages/detail/detail.wxml--> 
<view class='share'>
  <image src='/images/share.png'></image>
  <text>分享</text>
  <button open-type='share'></button>
</view>

wxss:

.share { 
  height: 120rpx;
  width: 120rpx;
  position: fixed;
  bottom: 170rpx;
  right: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  background: rgba(0, 0, 0, .6);
  border-radius: 50%;
  z-index: 10;
} 
.share image {
  height: 70rpx;
  width: 70rpx;
}
.share text {
  color: #fff;  
}

.share button {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.1;
  z-index: 99;
}

js：

onShareAppMessage(res) {
    let id = wx.getStorageSync('shareId') // 分享產品的Id
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '轉發標題',
      path: `pages/detail/detail?id=${id}` // 分享后打開的頁面
    }
},

按鈕樣式如圖：