使用 SAP UI5 渲染和显示二维码？60 秒钟搞定！

笔者昨天下午收到一个朋友的求助，需求是在 SAP UI5 应用里生成二维码。

这个需求笔者之前也没做过。因为白天工作忙，一直没时间回复。晚上处理完客户的问题，准备关电脑睡觉了。忽然想起这个需求。

如果在过去，我的思路是在 Github 上找一个第三方的二维码生成库，集成到 SAP UI5 应用里。

我以前开发了一个 SAP UI5 脚手架应用，专门用来快速集成和验证这种需求：

但是现在有了 AI IDE，这些脚手架应用都可以扔了。因为用 AI IDE 生成应用，连命令行都省了，直接用自然语言发布指令即可。

仍然使用笔者之前文章介绍的 Trae：

我准备用 Trae 快速把这个需求做出来，好早点睡觉。

迅速写好指令：

创建一个 SAP UI5 应用，具有一个用户输入框和按钮。在用户输入框里输入文字后，点击按钮，会生成一个包含该输入文字的二维码。

目前除了 Claude-3.7-Sonnet 之外，Trae 也开始支持最新的 Gemini-2.5-Pro 和 GPT-4.1 了。

笔者选择的是 GPT-4.1，指令编辑好之后，点击发送按钮。

Trae 就吭哧吭哧地帮我创建应用，编写代码了。英雄所见略同，Trae 选择了一个第三方的二维码生成方案：qrcodejs，还贴心的给出了 github 地址，省去了我人工搜索的功夫。

点击 Accept 按钮，SAP UI5 项目所需的代码，就整整齐齐躺在左边的 Explorer 里了。

我简单看了下 Github， 这个 QRCode.js 提供了以下核心功能：

二维码生成：支持生成包含文本、URL、联系方式等信息的二维码。

自定义样式：允许开发者设置二维码的大小、颜色、纠错级别等参数。

跨浏览器兼容性：兼容 IE6~10、Chrome、Firefox、Safari、Opera、Mobile Safari、Android、Windows Mobile 等主流浏览器。

无外部依赖：无需引入 jQuery 等第三方库即可使用。

直接运行，看一下效果。在 SAP UI5 Input 控件里输入 Hello world，单击按钮生成二维码：

拿手机一扫描，完美解析出来。

我甚至连 Trae 生成的详细源代码都懒得看，让它帮我总结一下得了。

发出指令：

请你逐一分析整个项目里的每个文件，详细分析每个文件内的实现源代码。

Trae 先是泛泛介绍了一下：

然后我使用 Trae 的 # File context 功能，让它逐行分析最关键的二维码生成逻辑所在的 Main.controller.js 文件里每一行的内容。

看完之后心头有数了。

从第一个指令发送到 Trae 生成完整的 SAP UI5 工程，只花了一分钟时间。随后的浏览器里测试，阅读 Trae 对于生成代码的概要分析，总共只花了五分钟时间，合上电脑，打完收工。

有了 Trae 的辅助，让我恍恍惚惚有了"我要打十个"的错觉。当然，大家也可以试试 SAP Joule:

比起 SAP Joule，笔者更喜欢用 Trae，因为做 SAP UI5 开发的话，只能在浏览器里使用 SAP Joule，而笔者家里的电信宽带，打开 SAP BTP 的速度真的是很感人......

Trae 虽然在高峰期时发送请求后会排队，但因为是本地安装的 IDE，在使用体验上笔者还是觉得很丝滑。