微信小程序如何實現簡易封裝彈窗

# 微信小程序如何實現簡易封裝彈窗

## 引言

在微信小程序開發中，彈窗（Modal）是常見的交互組件之一。系統自帶的`wx.showModal`雖然簡單易用，但在復雜業務場景下往往無法滿足定制化需求。本文將詳細介紹如何從零開始封裝一個功能完善、可復用的自定義彈窗組件，涵蓋設計思路、核心代碼實現、進階優化技巧以及實際應用案例。

---

## 一、為什么需要封裝自定義彈窗？

### 1.1 原生彈窗的局限性
- **樣式固定**：無法修改按鈕顏色、圓角等視覺樣式
- **功能單一**：不支持插入輸入框、圖片等自定義內容
- **交互死板**：動畫效果有限，無法實現漸顯/滑動等效果
- **維護困難**：相同彈窗邏輯需要在多個頁面重復編寫

### 1.2 自定義彈窗的優勢
```javascript
// 對比示例：原生彈窗 vs 自定義彈窗
wx.showModal({
  title: '提示',
  content: '確定刪除嗎？',
  confirmText: '刪除',
  cancelText: '取消'
})

// 自定義彈窗調用方式
this.selectComponent('#customModal').show({
  title: '高級確認',
  content: '刪除后將無法恢復',
  buttons: [
    { text: '取消', type: 'default' },
    { text: '永久刪除', type: 'danger' }
  ],
  showClose: true
})

二、基礎封裝實現

2.1 組件文件結構

components/
  └── custom-modal/
      ├── custom-modal.wxml
      ├── custom-modal.wxss
      ├── custom-modal.js
      └── custom-modal.json

2.2 核心WXML模板

<!-- custom-modal.wxml -->
<view class="modal-mask" wx:if="{{visible}}" catchtouchmove="preventTouchMove">
  <view class="modal-container" animation="{{animationData}}">
    <!-- 標題區 -->
    <view class="modal-header" wx:if="{{title}}">
      <text>{{title}}</text>
      <view class="close-btn" wx:if="{{showClose}}" bindtap="handleClose">
        ×
      </view>
    </view>
    
    <!-- 內容區（支持slot插槽） -->
    <view class="modal-body">
      <slot name="content">{{content}}</slot>
    </view>
    
    <!-- 按鈕區 -->
    <view class="modal-footer">
      <block wx:for="{{buttons}}" wx:key="text">
        <button 
          class="footer-btn {{item.type}}" 
          bindtap="handleButtonTap"
          data-index="{{index}}"
        >
          {{item.text}}
        </button>
      </block>
    </view>
  </view>
</view>

2.3 樣式實現要點

/* custom-modal.wxss */
.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

.modal-container {
  width: 80%;
  background: #fff;
  border-radius: 12rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 動畫效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.modal-enter {
  animation: fadeIn 0.3s forwards;
}

2.4 JavaScript邏輯封裝

// custom-modal.js
Component({
  properties: {
    title: String,
    content: String,
    showClose: Boolean
  },
  
  data: {
    visible: false,
    buttons: [],
    animationData: {}
  },
  
  methods: {
    // 顯示彈窗
    show(options) {
      this.setData({
        visible: true,
        ...options,
        animationData: this._createAnimation(true)
      })
    },
    
    // 隱藏彈窗
    hide() {
      this.setData({
        animationData: this._createAnimation(false)
      }, () => {
        setTimeout(() => {
          this.setData({ visible: false })
        }, 300)
      })
    },
    
    // 創建動畫
    _createAnimation(show) {
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease'
      })
      animation.opacity(show ? 1 : 0)
        .translateY(show ? 0 : 20).step()
      return animation.export()
    },
    
    // 按鈕點擊事件
    handleButtonTap(e) {
      const { index } = e.currentTarget.dataset
      this.triggerEvent('buttonclick', { index })
      this.hide()
    },
    
    // 阻止觸摸穿透
    preventTouchMove() {}
  }
})

三、進階功能擴展

3.1 支持Promise調用

// 在組件中新增promiseCall方法
promiseCall(options) {
  return new Promise((resolve) => {
    this.setData({
      buttons: options.buttons.map(btn => ({
        ...btn,
        resolve
      })),
      visible: true
    })
  })
}

// 頁面調用示例
async function confirmDelete() {
  const res = await modal.promiseCall({
    title: '確認刪除',
    buttons: [
      { text: '取消', type: 'default' },
      { text: '確認', type: 'primary' }
    ]
  })
  if (res.index === 1) {
    // 執行刪除操作
  }
}

3.2 表單彈窗實現

<!-- 在modal-body中添加表單 -->
<input 
  placeholder="請輸入內容" 
  model:value="{{inputValue}}"
  wx:if="{{mode === 'form'}}"
/>

<!-- JS中新增表單處理邏輯 -->
handleFormSubmit() {
  this.triggerEvent('submit', {
    value: this.data.inputValue
  })
}

3.3 全局彈窗管理

// 在app.js中掛載全局方法
App({
  globalData: {
    modal: null
  },
  
  // 初始化全局彈窗
  initModal() {
    this.globalData.modal = this.globalData.modal || 
      this.selectComponent('#globalModal')
  }
})

// 任意頁面調用
getApp().initModal().show({...})

四、性能優化方案

4.1 減少setData調用

// 合并數據更新
this.setData({
  visible: true,
  title: options.title,
  content: options.content
})

// 替代多次setData
this.setData({ visible: true })
this.setData({ title: options.title })

4.2 使用純數據字段

Component({
  options: {
    pureDataPattern: /^_/ // 指定純數據字段
  },
  
  data: {
    _timer: null // 不會參與頁面渲染
  }
})

4.3 彈窗預加載方案

// 在onLoad時預先創建實例
onLoad() {
  this.modal = this.selectComponent('#customModal')
  this.modal.hide() // 初始隱藏
}

// 需要時直接調用
this.modal.show()

五、實際應用案例

5.1 二次確認彈窗

showConfirm() {
  this.modal.show({
    title: '操作確認',
    content: '確定要執行此操作嗎？',
    buttons: [
      { text: '取消', type: 'default' },
      { text: '確定', type: 'primary' }
    ],
    callback: (res) => {
      if (res.index === 1) {
        // 執行確認操作
      }
    }
  })
}

5.2 加載狀態彈窗

showLoading(text = '加載中...') {
  this.modal.show({
    showClose: false,
    customContent: true,
    buttons: []
  })
  
  // 通過slot插入loading組件
  this.setData({
    modalContent: `
      <view class="loading-wrapper">
        <loading size="40px"></loading>
        <text>${text}</text>
      </view>
    `
  })
}

5.3 復雜內容彈窗

<!-- 頁面調用 -->
<custom-modal id="complexModal">
  <view slot="content">
    <image src="/assets/banner.jpg" mode="widthFix"></image>
    <rich-text nodes="{{htmlContent}}"></rich-text>
  </view>
</custom-modal>

結語

通過本文的封裝方案，我們實現了： 1. 樣式可定制的彈窗組件 2. 支持Promise的異步調用 3. 豐富的擴展能力（表單、全局管理等） 4. 性能優化實踐

完整代碼已上傳至GitHub倉庫（示例鏈接）。建議根據實際項目需求進行適當調整，后續可考慮加入TypeScript支持、單元測試等進階功能。

最佳實踐建議：對于企業級項目，推薦使用像vant-weapp等成熟UI庫的彈窗組件；對于需要深度定制的場景，可基于本文方案進行二次開發。 “`

（注：實際文章約2750字，此處展示核心內容框架，完整實現需配合具體代碼文件和詳細說明）