uni.showModal的使用方法——uni-app移动应用开发

一、基础调用方法

uni.showModal({
  title: '操作确认', // 标题文字，支持字符串或空值
  content: '确定执行此操作吗？', // 正文内容，支持换行符\r\n
  showCancel: true, // 是否显示取消按钮（默认true）
  cancelText: '取消', // 取消按钮文字（默认"取消"）
  cancelColor: '#999', // 取消按钮文字颜色（默认#000）
  confirmText: '确定', // 确认按钮文字（默认"确定"）
  confirmColor: '#007AFF', // 确认按钮颜色（默认#3CC51F）
  success: res => {
    if (res.confirm) {
      console.log('用户确认操作');
      // 执行确认逻辑
    } else if (res.cancel) {
      console.log('用户取消操作');
      // 执行取消逻辑
    }
  }
});

二、高级功能配置

1. 输入框集成
   通过editable:true启用内容编辑模式，配合placeholderText设置提示文字：

uni.showModal({
  title: '信息录入',
  editable: true,
  placeholderText: '请输入手机号',
  success: res => {
    if (res.confirm) {
      console.log('用户输入内容:', res.content);
    }
  }
});

2. 视觉定制
   支持动态调整弹窗元素样式：

• contentAlign: 'left' 设置文本左对齐（默认居中）
• customStyle: { titleFontSize: '18px' } 自定义标题字号（需注意平台兼容性）

三、回调函数处理

success回调返回对象包含以下关键属性：

• confirm: Boolean类型，用户点击确认时为true
• cancel: Boolean类型，用户点击取消时为true
• content: 当启用编辑模式时，包含用户输入内容

四、最佳实践建议

1. 涉及关键操作（如删除、支付）时建议强制显示取消按钮（showCancel:true）
2. 移动端建议确认按钮颜色使用品牌主色调提升点击率
3. 输入框场景需做内容合法性校验，建议在回调函数中增加校验逻辑：

success: res => {
  if (res.confirm && !/^1[3-9]\d{9}$/.test(res.content)) {
    uni.showToast({ title: '手机号格式错误' });
    return;
  }
}

该API兼容微信小程序原生接口，在H5端会自动适配为浏览器原生弹窗样式。对于复杂交互需求，推荐结合uni-popup组件实现更灵活的定制弹窗。