记录近期遇到的bug：安卓深色模式导致字体变白色、系统调大字体导致H5中picker组件失效、页面keepalive缓存导致H5先加载缓存页面的title

最新推荐文章于 2024-11-26 00:28:11 发布

Ara_tsubomi

最新推荐文章于 2024-11-26 00:28:11 发布

阅读量1k

点赞数 13

文章标签： bug 前端 uni-app 缓存 react.js

本文链接：https://blog.csdn.net/weixin_62192841/article/details/135977474

版权

文章讲述了开发者在uni-app项目中遇到的两个问题：安卓深色模式下字体显示问题和H5picker组件因系统大字体失效。通过排查和解决过程，分享了如何处理这些问题以保证跨平台用户体验的一致性。

摘要由CSDN通过智能技术生成

最近遇到了些不太明显的bug，特此记录一下：

1.安卓深色模式导致字体变白色

背景：uni-app项目，同一套代码，有发布微信小程序，也有制作应用wgt包放在原生app里面。

问题：在app里面的下拉框，点开看不到内容，但能点击选择。微信小程序中正常显示。

解决过程：这个问题让我好一通找，因为本身出现问题的这个手机，是鸿蒙系统，之前开发的时候也会有别人都没有的bug。我又没办法拿他的手机调试，所以就一直在考虑是不是什么样式在鸿蒙上不兼容。后来实在想不出啥问题了，拿到他的手机，才发现，是可以点击选中的，就考虑是不是字体颜色不对了，然后换了背景色，原来是因为字体变成了白色，下拉框背景也是白色的，所以才看不见了。

原因：app根据系统模式，改成了暗黑模式，暗黑模式下，很多组件的字体颜色变成了白色，比如input、disable的button、和这次的uni-data-select。但背景也是白色，所以就看不见了。

解决办法：由于我们的ui本身就是以明亮色系为主，改成暗黑模式反而风格不统一，就让原生在进入wgt的设置中，固定成浅色模式，这样嵌套在原生的小程序，也就会固定成浅色模式了。（下图是暗黑和跟随系统，改成light就行了）。

2.系统大字体导致H5中picker组件失效

背景：嵌套在微信小程序的H5项目（umi@3.5+react@17+antd-mobile@5.20）。

问题：领导手机上，picker组件，选择日期时，在弹框里选择的日期-时间，确定后，回显的是比选择时小的时间或日期。且弹框里的日期根本不在选择的正中间显示。

原因：这部手机的微信调大了字体，导致picker的字体变大了，所以选中不准确或者没法选中。

解决：找了方法，设置了不跟随系统字体大小而改变（原文：H5字体大小不受用户手机设置影响的方法_禁止页面字体被机型字体影响-CSDN博客）：

在src/pages/document.ejs里加了下面这段代码：

<script>
	(function() {
		if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
			handleFontSize();
		} else {
			if (document.addEventListener) {
				document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
			} else if (document.attachEvent) {
                document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
            }
		}
		function handleFontSize() {
			// 设置网页字体为默认大小
			WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
			// 重写设置网页字体大小的事件
			WeixinJSBridge.on('menu:setfont', function() {
				WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
			});
		}
	})();
</script>