uni-app中uni.Modal显示的背景框为黑色

uni-app中uni.Modal显示的背景框为黑色

示例代码：

uni.showModal({
confirmColor: "#576B95",
content: str,
showCancel: false,
confirmText: this.language.I_see,
success: res => {},
});

操作步骤：

随便一个uni.showModal在苹果12的微信小程序中都是一样

预期结果：

蒙板是黑的，弹出的框不应该是白底吗！！！

实际结果：

蒙板是黑的，弹出的框也是黑色

bug描述：

uni.Modal的弹款在苹果12的微信小程序中显示的框为黑色.

Image


| 项目         | 值               |
|--------------|------------------|
| 产品分类     | uniapp/小程序/微信 |
| PC开发环境操作系统 | Mac              |
| PC开发环境操作系统版本号 | 10.15.4          |
| HBuilderX类型 | 正式             |
| HBuilderX版本号 | 3.1.22           |
| 第三方开发者工具版本号 | 1.03             |
| 基础库版本号 | 2.14.1           |
| 项目创建方式 | HBuilderX        |

更多关于uni-app中uni.Modal显示的背景框为黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

不好意思，找到原因了，是测试把系统改为深色模式了。

更多关于uni-app中uni.Modal显示的背景框为黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是微信小程序基础库在iOS设备上的已知样式问题。uni-app的uni.showModal底层调用的是微信小程序的wx.showModal，其背景色由微信小程序框架控制。

在iOS设备上，微信小程序基础库可能会将模态框背景渲染为深色，这是微信小程序框架对iOS系统深色模式的适配行为。虽然您没有主动开启深色模式，但微信小程序框架在某些版本中可能存在样式判断逻辑问题。

临时解决方案：

  1. 自定义模态框：使用uni-popup组件替代原生模态框，完全自定义样式：
<uni-popup ref="popup" type="dialog">
  <uni-popup-dialog type="info" :content="str" :confirmText="language.I_see"
    @confirm="handleConfirm"></uni-popup-dialog>
</uni-popup>

  1. 检查微信开发者工具设置：在微信开发者工具中，确保"模拟操作系统的深色模式"选项未被勾选。

  2. 基础库版本调整：尝试在manifest.json中设置不同的基础库版本：

"mp-weixin": {
  "setting": {
    "urlCheck": false,
    "es6": true,
    "enhance": true,
    "postcss": true,
    "minified": true
  },
  "usingComponents": true,
  "libVersion": "2.14.1" // 可尝试调整为2.15.0或更高版本
}
  1. 动态样式检测：在App.vue中监听系统主题变化，强制浅色模式：
onLaunch() {
  // iOS微信小程序中尝试强制浅色主题
  if (uni.getSystemInfoSync().platform === 'ios') {
    uni.setBackgroundColor({
      backgroundColor: '#ffffff'
    })
  }
}
回到顶部