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

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

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

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

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

一个用于 SAP UI5 学习的脚手架应用，没有任何后台 API 的依赖

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

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

不会编程也能开发 Web 应用，小学生都能学会的 AI IDE

我准备用 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 AI 工具 Joule

• 使用 SAP 自家的 AI 工具 Joule 辅助 SAP Fiori 应用开发

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

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

本例提到的 Trae 生成的 SAP UI5 二维码创建代码，笔者后来有时间也仔细阅读了，发现其风格狂放粗犷，只管实现功能了事。笔者进行了人工修改，让其符合 SAP UI5 开发规范和最佳实践，完整的代码和讲解已经放到了我的 SAP UI5 开发教程里：