彻底摆脱showModal原生局限，封装出更自由、高效、可控的小程序弹框

在开发微信小程序的过程中，我们经常需要使用到showModal方法来提示用户或获取用户输入。但是，原生showModal方法存在一些局限性，比如只支持字符串参数、无法统一弹框UI等。为了解决这些问题，我们可以对showModal方法进行二次封装。

封装后的showModal方法

封装后的showModal方法具有以下特点：

• 支持字符串和对象两种参数形式
• 可以统一弹框UI
• 支持更多自定义选项

字符串参数形式

字符串参数形式是最简单的调用方式，只需要传入一个字符串即可。字符串参数可以是提示信息、标题或其他内容。

wx.showModal({
  title: '提示',
  content: '这是一个提示框',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

对象参数形式

对象参数形式更加灵活，可以传入更多的自定义选项。

wx.showModal({
  title: '标题',
  content: '这是一个提示框',
  showCancel: false, //是否显示取消按钮
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    }
  }
})

自定义选项

除了上述两个参数之外，封装后的showModal方法还支持以下自定义选项：

• confirmText ：确定按钮的文字
• cancelText ：取消按钮的文字
• confirmColor ：确定按钮的颜色
• cancelColor ：取消按钮的颜色
• mask ：是否显示遮罩层
• maskColor ：遮罩层的颜色

统一弹框UI

通过对showModal方法进行二次封装，我们可以统一弹框的UI。

例如，我们可以定义一个统一的弹框样式，然后在封装后的showModal方法中使用这个样式。这样，所有的弹框都会具有相同的UI风格。

wx.showModal({
  title: '标题',
  content: '这是一个提示框',
  className: 'my-modal' //自定义的弹框样式类名
})

更多自定义选项

除了上述自定义选项之外，封装后的showModal方法还支持更多自定义选项。

例如，我们可以定义一个自定义的弹框组件，然后在封装后的showModal方法中使用这个组件。这样，我们可以创建出更加灵活、强大的弹框。

wx.showModal({
  title: '标题',
  content: '这是一个提示框',
  component: 'MyModal' //自定义的弹框组件
})

结论

通过对showModal方法进行二次封装，我们可以解决原生showModal方法的局限性，让开发更加方便、高效和可控。封装后的showModal方法支持字符串和对象两种参数形式，可以统一弹框UI，支持更多自定义选项。