微信小程序ActionSheet与分享按钮

ActionSheet就是下图展示：

小程序有提供官方API，调用操作菜单还是比较简单的：

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success: function(res) {
    console.log(res.tapIndex)
  },
  fail: function(res) {
    console.log(res.errMsg)
  }
})

 

然后会返回tapIndex，也就是用户点击的按钮，从上到下的顺序，从0开始。看上去非常简单，但实际上这个ActionSheet 中的菜单本身不能绑定任何事件，只能通过用户的选择结果来处理。也不能在菜单上预设参数，参数要提前设置在data 中。

而微信小程序的分享触发只有一个方法，就是通过button组建，使用open-type="share"来触发，这样通过小程序原生功能是不可能实现通过ActionSheet 来触发分享功能了。

原生的办法不行，那就只能自定义ActionSheet了，好在小程序提供的组件还比较丰富，自定义也不是很麻烦。

wxml 结构：

<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet">
   <action-sheet-item open-type="share">
         <button open-type="share">分享给好友</button>
   </action-sheet-item>
   <action-sheet-item>生成分享卡片</action-sheet-item>
   <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

js代码：

openActionSheet(e){
    var self = this;
    self.setData({
      actionSheetHidden: !self.data.actionSheetHidden
    });

  },
listenerActionSheet: function () {
    var self = this;
    self.setData({
      actionSheetHidden: !self.data.actionSheetHidden
    })
 },

这样就自定义了一个操作菜单，并且可以直接触发分享功能。

这里还有个坑，就是触发分享需要使用button 组件，默认样式是有一个边框的，通过常规的border:0并不能去掉这个边框，原因是这个样式是写在button:after 伪类里的，需要对button:after 进行样式重写才能去掉这个边框。可以说是相当的坑了。