uni.showModal 在微信小程序不显示,也不报错,uni-app的坑慢慢踩?

uni.showModal的格式

uni.showModal({
	title: "温馨提示",
	content: "填写100字以上的工作描述,能够提升面试几率哦~",
	confirmText: "提交保存",
	cancelText: "继续补充"
	showCancel:false,
	success: (res) => {
		if (res.confirm) {
			console.log(111)
		}else if (res.cancel) {
			console.log('用户点击取消');
		}
	},
});

这个是没有问题的,但是因为我们的项目要做国际化,然后confirmText: “提交保存”,cancelText: "继续补充"也要修改为英文,直接翻译完就放上去了,但是这时候就出现问题了,英文语言环境下点击方法无法触发uni.showModal,即uni.showModal 在微信小程序不显示,也不报错,奇怪!
在这里插入图片描述
uni-app 官方给出的要求:
小程序平台,cancelText和confirmText有长度限制,最多允许 4 个字符;
然后呢,一个数字和字母也代表一个字符,但是经过调试,uni.showModal中支持8个字母或者8个数字,那最多允许 4 个字符这个说法只是针对中文的个数,4个汉字; 在不同编码下汉字所占的字节是不一样的所以我们暂时也不知道这个汉字字母数字这其中是怎么转换的?
最后的结论就是:
cancelText和confirmText有长度限制,最多允许 4 个汉字或者 8 个数字字母。
在这里插入图片描述

### 解决 `uni.showModal` 样式生效的方法及原因分析 #### 方法一:通过自定义样式覆盖默认样式 对于 `uni.showModal` 的样式问题,可以尝试使用全局样式文件中的 CSS 来覆盖默认样式。由于 `uni.showModal` 是一个内置方法,默认情况下其样式是由底层框架决定的。 为了使自定义样式能够应用到模态框上,可以在项目的根目录下的 `App.vue` 文件中引入全局样式表,并确保该样式表优先级较高: ```css /* App.vue */ <style> /* 覆盖 modal 默认样式 */ .uni-modal { background-color: rgba(0, 0, 0, 0.7); /* 更改背景颜色透明度 */ } .uni-modal__bd { color: red; font-size: 36rpx; /* 修改字体大小 */ } </style> ``` 需要注意的是,同平台(H5、微信小程序等)可能对样式的处理方式有所同,因此建议测试各个端口的表现并调整相应属性[^1]。 #### 方法二:利用插槽机制实现完全定制化 如果上述方案无法满足需求,则可以通过创建一个新的页面作为模拟对话框的形式来替代原生 API 。这种方式允许开发者拥有更高的灵活性去设计和布局自己的弹窗界面。 具体做法如下所示: 1. 创建新的 Vue 组件用于表示自定义 Modal; 2. 在父组件内调用此子组件并通过 props 或事件传递数据; 3. 使用 v-if 控制显示隐藏状态; 这种方法虽然绕过了官方提供的简易接口,但却能更好地掌控整个交互过程以及视觉呈现效果[^2]。 #### 原因分析 之所以会出现这种情况主要是因为 Uni-app 对于某些特定功能模块做了封装优化,在一定程度上限制了一些外部干预的可能性。特别是当涉及到跨平台兼容性的考量时,可能会牺牲部分个性化配置选项以换取更广泛的适配能力。另外,也可能是由于开发过程中未能正确理解文档说明而导致误操作所致[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值