记一次解决 uni-app 真机运行时导致的白屏问题:Trae vs 通义灵码 vs Cursor

1,308 阅读5分钟

一. 前言

说来奇怪,一直保持正常运行的代码突然间爆出了问题!这套代码打包了 H5 端、小程序端、Android 端、iOS 端等四端应用,打包运行都没有问题,而最近在 Android 端安装应用运行时出现了白屏(white screen)问题。

起初令人费解,这部分代码已经有两年没有改动过了,讲道理不应该出现这种问题。

image.png

原因在哪里?最近手贱,升级了 HBuilder X 4.66.2025051912,升级完后运行就出现了这个问题,用真机调试一下看报的什么问题:

image.png

而将 HBuilder X 切换到上一个版本后,一切又正常了!也不知道最新版本更新了什么,HBuilder X 真是巨坑!坑了我多次了。

image.png

image.png

二. 问题分析

最终,坑还得需要有人填,在 uni-app 官方社区检索一下,是否有人遇到同样的问题:

image.png

确实有人遇到这种白屏问题,但是出现白屏的原因不一,还得具体问题具体分析。

image.png

然而,我的问题从报错日志里不难看出,是在调用 setDefaultLanguage 的方法时,dispatch 方法找不到,undefined 导致运行时异常。

再次检验一下之前写的代码,发现 storeconfig 两个文件出现了循环依赖的问题,导致在 config 文件中调用 setDefaultLanguage 出现异常。

其实这个问题也很好改,但是我试着用 AI 解决一下这个代码问题,正好对比一下 Cursor、Trae 和 通义灵码的能力!

三. Trae 国内版

使用 Trae 的 Builder 模式,选中这两个文件,直接询问:解决这两个文件的循环调用问题。

Trae 的主要修改逻辑是:

  • 移除 config/index.js 文件中对 store 的引用
  • 移除 store/index.js 文件中对 config 的依赖

image.png

修改 config 文件

主要是移除 store 依赖,对代码中使用 store 的方法进行删除,还加入了一个无声明的参数:serverInfoParam ?

这代码能跑起来才怪,一看全是问题。不相信这是 Trae!

具体修改的代码如下图:

image.png

image.png

image.png

image.png

修改 store 文件

这里 Trae 主要是移除 config 文件中的 env 导入,直接使用了 this.env ?

显然的,有问题,根本就是在乱改,还改不全。

image.png

image.png

结果看上面就能知道,修改有误,感觉它就在乱改,直接运行不起来。

Trae 也用过一段时间,感觉尚可,但是这个小问题的改动流程实在是不应该。

四. 通义灵码

Trae 并没有完美的修改成功,接下来我们试一下通义灵码的能力。同样的,我在通义灵码的智能会话中,选中这两个文件,直接询问:解决这两个文件的循环调用问题。

image.png

image.png

修改 config 文件

通义灵码主要对 config 文件进行了以下操作:

  • 移除了 store 和 envConfig 的导入
  • 删除了调用 store 的方法
  • 对 getBaseUrl 提供一个 serverInfo 的入参
  • 导出 DevFactory 方法

代码删除多了,envConfig 的引入为什么给删除了?而且删除了下面代码中还在引用呢,唉。。。

image.png

image.png

image.png

image.png

修改 store 文件

结合以上通义灵码给修改的 config 文件,提供了 DevFactory 的导出。

这里主要新增了 DevFactory 导入,修改了 store 里对 locale 值的初始化,而对 getBaseUrl 做出的改动并没有修改。

image.png

image.png

通义灵码的改动也是一言难进。多删除代码,少使用代码是家常便饭。因此它的改动也是错误的。

通义灵码我用了大概 1 个月左右,在使用期间,体验上有如下问题:

  • 代码生成有误,生成和使用不对应,代码运行不起来
  • 经常性的给删代码,尤其注释,必删
  • 生成的代码变复杂

五. Cursor

通过 Trae 和通义灵码一次性并不能修改成功,同样的逻辑,我直接询问下 Cursor:解决这两个文件的循环调用问题。

使用的是:Composer Agent auto 模式

image.png

修改 config 文件

  • 在 config 文件中移除了对 store 的依赖
  • 对使用 store 的方法统一替换成了读取缓存的方式

image.png

image.png

image.png

修改 store 文件

在 store 文件中,主要处理了 state 的初始化问题,对 locale、language、country 的默认值进行处理

image.png

以上的代码初步看是没有问题的,在修改完成后,重新运行一下应用,编译成功了,而且是一次性成功。

image.png

六. 总结

uni-app 运行时出现的真机白屏问题,需要具体问题具体分析,一般会在报错日志中体现出来。

但是出现白屏问题的原因一般都是在初始化应用的时候,调用报错,包括不限于:

  • Cannot read property 'xxx' of undefined
  • Uncaught ReferenceError: xxx is not defined
  • Uncaught SyntaxError: Invalid or unexpected token

而本文出现的 Cannot read property 'xxx' of undefined 造成的白屏问题解决起来也很简单,只要找到引用对象排查原因即可。所以我使用 AI 来帮我生成代码解决,其实三款 AI 的解决思路相仿,都是想移除对方相互引用的依赖,然后再修改代码。

本篇文章不偏不倚,使用事实说话,本着对初始的场景和参数一致,分别对 Tare、通义灵码、Cursor 的代码生成能力作了一个简单的测试,单单就这几行代码的生成,只有 Cursor 一次性成功了,也许对 Trae 和通义灵码多次询问后也能成功,但 Cursor 一次性成功就给了我们非常好的体验。

所以,谁强谁弱,一目了然,Trae 国际版收费了,据说有更强的能力,但还没有用过,不知道效果如何。