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

一. 前言

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

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

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

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

二. 问题分析

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

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

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

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

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

三. Trae 国内版

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

Trae 的主要修改逻辑是:

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

修改 config 文件

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

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

具体修改的代码如下图:

修改 store 文件

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

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

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

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

四. 通义灵码

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

修改 config 文件

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

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

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

修改 store 文件

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

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

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

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

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

五. Cursor

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

使用的是:Composer Agent auto 模式

修改 config 文件

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

修改 store 文件

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

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

六. 总结

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 国际版收费了,据说有更强的能力,但还没有用过,不知道效果如何。

相关推荐
余防10 小时前
存储型XSS,反射型xss
前端·安全·web安全·网络安全·xss
ObjectX前端实验室11 小时前
从零到一:系统化掌握大模型应用开发【目录】
前端·llm·agent
guoyp212611 小时前
前端实验(二)模板语法
前端·vue.js
葡萄城技术团队11 小时前
Excel 转在线协作难题破解:SpreadJS 纯前端表格控件的技术方案与实践
前端·excel
我的xiaodoujiao11 小时前
Windows系统Web UI自动化测试学习系列3--浏览器驱动下载使用
前端·windows·测试工具·ui
一只小风华~11 小时前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
泻水置平地11 小时前
若依前后端分离版实现前端国际化步骤
前端
Villiam_AY11 小时前
从后端到react框架
前端·react.js·前端框架
CodeCraft Studio11 小时前
全球知名的Java Web开发平台Vaadin上线慧都网
java·开发语言·前端·vaadin·java开发框架·java全栈开发·java ui 框架
一只小风华~11 小时前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript