【前端篇】微信小程序ActionSheet封装 -- 封装特性，开发只需要关注功能

微信小程序 ActionSheet 封装

微信小程序作为一款轻量级的应用，提供了丰富的组件和API以帮助开发者快速构建应用界面。其中，ActionSheet 组件用于显示一系列操作选项，用户点击后可选择不同的行为。为了提高我们的开发效率，减少重复代码，我们可以对 ActionSheet 进行封装，使得开发者在使用时只需关注功能，而无需关心实现细节。

1. 封装的必要性

在多个页面中，我们可能都会需要用到 ActionSheet，比如在用户点击某个按钮时展示编辑、删除等选项。如果每次都重复编写同样的代码，会导致代码冗长且维护困难。因此，封装 ActionSheet 是一种高效的开发方式。

2. 封装方案

下面我们将会通过创建一个简单的 ActionSheet 组件来实现我们的需求。

2.1 创建组件

首先，创建一个名为 action-sheet 的组件，目录结构如下：

components/
    action-sheet/
        action-sheet.wxml
        action-sheet.wxss
        action-sheet.js
        action-sheet.json

2.2 action-sheet.wxml

<view class="action-sheet" wx:if="{{visible}}">
  <view class="action-sheet-mask" bindtap="close"></view>
  <view class="action-sheet-content">
    <view class="action-sheet-title">{{title}}</view>
    <view class="action-sheet-options">
      <block wx:for="{{options}}" wx:key="index">
        <view class="option" bindtap="onOptionTap" data-index="{{index}}">{{item}}</view>
        <view class="divider"></view>
      </block>
    </view>
    <view class="action-sheet-cancel" bindtap="close">取消</view>
  </view>
</view>

2.3 action-sheet.wxss

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.action-sheet-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
}

.action-sheet-content {
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.action-sheet-title {
  padding: 16px;
  font-weight: bold;
}

.option {
  padding: 16px;
  text-align: center;
}

.divider {
  height: 1px;
  background-color: #ccc;
}

.action-sheet-cancel {
  padding: 16px;
  text-align: center;
  color: #999;
}

2.4 action-sheet.js

Component({
  properties: {
    title: {
      type: String,
      value: '请选择'
    },
    options: {
      type: Array,
      value: []
    },
    visible: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    onOptionTap(e) {
      const index = e.currentTarget.dataset.index;
      this.triggerEvent('optionSelect', { index });
      this.triggerEvent('close');
    },
    close() {
      this.triggerEvent('close');
    }
  }
});

2.5 action-sheet.json

{
  "component": true
}

3. 使用组件

在需要使用 ActionSheet 的页面中，我们可以直接引用这个组件。

3.1 页面 WXML

<view>
  <button bindtap="showActionSheet">显示操作菜单</button>
  <action-sheet title="选择操作" options="{{options}}" visible="{{showSheet}}" bind:optionSelect="handleOptionSelect" bind:close="hideActionSheet"></action-sheet>
</view>

3.2 页面 JS

Page({
  data: {
    showSheet: false,
    options: ['编辑', '删除']
  },
  showActionSheet() {
    this.setData({ showSheet: true });
  },
  hideActionSheet() {
    this.setData({ showSheet: false });
  },
  handleOptionSelect(e) {
    const index = e.detail.index;
    if (index === 0) {
      wx.showToast({ title: '编辑操作' });
    } else if (index === 1) {
      wx.showToast({ title: '删除操作' });
    }
    this.hideActionSheet();
  }
});

4. 总结

通过封装 ActionSheet 组件，我们能够在多个页面中复用同一份代码，同时使得代码更加简洁。在这个过程中，我们使用了子组件与父页面的通信方式，使得组件的使用更加灵活。这种封装思路不仅适用于 ActionSheet，实际上可以用于各种需求的场景，是微信小程序开发中提升效率的一个实用策略。希望本文能够帮助到你在小程序开发中更好地理解组件的封装与使用。