小程序 自定义可转发分享showActionSheet

小程序自带的wx.showActionSheet(）api并不能自定义界面样式。如何做一个带分享按钮的actinSheet呢？

eaa3h-usdiz.gif

我们知道小程序的分享除了右上角三个小点就是用带open-type="share"属性的按钮来分享，那么首先得自定义一个actinSheet弹窗，然后再在弹层中放带分享属性的按钮。

.wxml文件

<view>
  <view class='g_mask' wx:if="{{isActionSheet}}" catchtap='asClose'></view>
  <view class='g_tybottom g_transition5s g_ty2 {{isActionSheet ? "g_ty0" : ""}}' style="background:transparent">
    <view class="as_content">
      <view class="as_title">当前选择活动：{{asContent.title}}</view>
      <button class="as_item as_item_share" open-type="share">
        <image src="/images/activity/to_share.png" class="as_icon"></image>
        <text>分享</text>
      </button>
      <view catchtap="asEdit">
        <image src="/images/activity/setup_edit.png" class="as_icon"></image>
        <text>编辑</text>
      </view>
      <view catchtap="asDelete">
        <image src="/images/activity/to_del.png" class="as_icon"></image>
        <text>删除</text>
      </view>
      
    </view>
  </view>
</view>

注意这里的分享是放在button里的，否则不能实现分享功能。这里不多讲如何实现弹窗的具体做法啦，不清楚的同学可参照我的小程序 css3动画弹层 文章。
.js文件

onShareAppMessage: function (e) {
    this.setData({ isActionSheet: false }) //关闭弹层
    let as = this.data.asContent;              //点击item内容
    let types =  as.types== 'free_competition' ? '“活动1”' : '“活动2”';

    return {
      title: `${this.data.merchant.name} 邀请您参加 ${types}`, //分享标题
      imageUrl: this.data.asContent.thumb, //分享图片，不设置时默认为点击分享按钮时的截图
      path: `pages/mc/mc?id=${as.mid}&pid=${as.id}&types=${as.types}`, //点击分享内容后进入连接
    }
  }

关于onShareAppMessage函数，e.from 可以帮我们区分 用户是点击什么进行分享的。还可以用e.traget.dataset自定义属性来做一些判断，例如：

 onShareAppMessage: function (e) {

      let title = '';

      if(e.from == 'menu'){ //点击菜单的分享
          title = ' 活动1 '
      }

      if(e.from == 'buttton'){ // 点击按钮的分享
         title = e.target.dataset.i == 0 ?  ' 免单大擂台 ' :  ' 活动2 '
      }

      return {
          title: `快来参加${title}`,
          path: `pages/mc/mc?id=${this.data.mid}`, 
      }
    
}