合宙 LuatOS 开发避坑指南：智能售货机 APP 从调试到上架

本文将以智能售货机APP开发为例详细拆解基于合宙Air8101引擎主机的完整开发流程全程实操落地帮助新手快速上手并实现专属嵌入式APP。一、准备硬件环境WIN10 以及 WIN10 以上的 Windows 操作系统电脑一台合宙引擎主机8101一块 type-c 接口 usb 数据线一根这一步的环境不是必须的如果没有这个环境可以直接在模拟器上开发调试 app二、准备软件环境2.1 代码仓库当前阶段合宙引擎主机8101项目的代码在 LuatOS 仓库的 develop 分支点击这里可以通过网络浏览器打开 LuatOS 代码仓库的 develop 分支2.1.1 了解代码结构在这个代码分支中以下三项内容和本项目直接相关1、 LuatOS/module/Air8101/project/AirUIFrame/ui_play_board/factory合宙引擎主机8101项目的默认出厂软件支持开机欢迎界面、待机界面、主菜单界面支持 WiFi 设置系统设置应用市场功能如果把 合宙引擎主机8101比作一个手机这里的 factory 就相当于是手机出厂自带的默认软件功能2、 LuatOS/module/Air8101/project/AirUIFrame/ui_play_board/app_store所有可以在 合宙引擎主机8101项目上运行的 app例如 airplane_battle飞机大战、game_20482048 游戏、luatos_competitionLuatOS 知识竞赛等等等等这里的每个 app不是默认出厂软件支持的功能而是通过默认出厂软件中的应用市场下载安装后才可以在模拟器或者 合宙引擎主机8101上运行如果把 合宙引擎主机8101比作一个手机这里的每个 app 就相当于手机通过应用商店下载安装的每一个应用本文所描述的内容最重要的一个目标就是根据自己的 app 需求生成 app 代码把代码提交到这个 app_store 目录下3、 LuatOS/script/libsLuatOS 扩展库和 factory 中的默认出厂软件目录一起在模拟器上运行或者烧录到 合宙引擎主机8101上运行具体到本项目软件代码架构如下图所示黄色背景的你将要开发的某个 app就是参照本文所描述的内容你要开发完成的某一个 app2.1.2 下载代码到自己的电脑上大家可以通过 TortoiseGit 或者其他客户端工具拉取代码到自己的电脑上一定要通过客户端下载代码到自己的电脑上因为后续还要通过客户端提交代码在这里仅以 TortoiseGit 为例来说明如果使用其他的客户端工具自行通过 AI 学习如何使用此处仅仅说明 TortoiseGit 最基本的使用方法遇到不懂的问题可以随时沟通或者借助 AI 学习在 https://gitee.com 注册账户如果已经有账户跳过这一步如果账户还没有添加到合宙 LuatOS 仓库在群里面发出来账户申请添加只有将户号添加到 LuatOS 仓库后续才能提交代码下载安装 gitGit 官网最新 windows 版本下载地址如果官网地址很难打开可以通过国内镜像 https://mirrors.ustc.edu.cn/github-release/git-for-windows/git/下载也可以问豆包推荐几个国内可以下载git的地址下载下来之后一路默认安装即可下载安装 TortoiseGit 客户端TortoiseGit 官网最新版本软件下载地址一路默认安装在下图需要填写第 1 步注册的名称和邮箱地址通过 TortoiseGit 下载代码在你的电脑上随便找一个目录空白处点击右键选择 Git Clone…URL 输入https://gitee.com/openLuat/LuatOS.gitDirectory 的最后一级目录修改为 LuatOS-develop下载过程中如下图所示下载成功后如下图所示2.1.3 代码切换到 develop 分支找到刚才下载的 LuatOS-develop 代码目录鼠标点击右键选择 TortoiseGit选择 Switch/Checkout…如下图所示在打开的小窗口中Branch 选择 remote/origin/develop然后点击 OK如下图所示切换成功后会弹出下图所示窗口此时可以打开 LuatOS-develop 目录去看下 2.1.1 章节中所描述的三部分内容是否存在如果存在就证明切换成功2.2 模拟器点击此处学习 LuatOS 模拟器使用模拟器时直接使用在本文 2.1.3 章节下载的 LuatOS-develop 分支代码进行学习在本小节使用 LuatOS 模拟器 LuatOS-develop 分支代码可以正常运行起来一个 UI 项目就算达标2.3 AI 工具AI 工具有很多种有 TraeCopilot 等等每一种 AI 工具都可以配置不同的大模型我们并不限制你使用哪一种 AI 工具各种 AI 工具使用的基本思路都是相同的在本文我们仅仅基于 Trae 这种 AI 工具来介绍如果你使用其他 AI 工具遇到不懂的问题可以自行解决参考 Trae 的安装和智能体概念理解 和 安装 luatos-docs-code 智能体、规则和技能 安装好 Trae配置 luatos-docs-code 智能体配置项目规则和技能其中在 Trae 的安装和智能体概念理解第三章节中不用再新建项目直接打开自己电脑上的 LuatOS-develop 目录即可Trae 的配置使用有以下三点特别重要1、当你安装配置好智能体、规则和技能后最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确2、Trae中内置的免费大模型会经常排队并且性能不可控容易出问题所以推荐参考001 发送会话请求时提示排队如何解决的方法订阅收费的大模型目前每月40元这样可以大大提高AI性能如果不想使用收费模型在非正常工作时间段内使用内置的免费模型也能勉强凑合3、选择收费大模型时经过我们的实际测试根据工作任务的不同可以按照如下建议选择仅供参考具体情况还需要根据你自己的实际使用情况来定代码开发任务优先选择GLM可能是使用的人数太多有时候处理较慢如果GLM处理太慢再考虑切换到MiniMax其他任务可以首先选择ark-code-latest其次选择MiniMax最后选择GLM可能是使用的人数太多有时候处理较慢三、定义自己的 app 原始需求接下来我们以一个实际的 app 需求为例来演示完整的开发过程这个 app 的名字叫做智能售货机如果需求不是特别明确就简单描述一下即可如果需求特别明确则详细描述每个页面如何设计以及业务逻辑如何设计在本示例中因为售货机 app 仅仅是一个虚拟的演示项目并不是一个真正的 app 需求所以我们描述的原始需求比较简单如下所述设计一个可用于嵌入式设备的售货机项目页面和交互业务逻辑分辨率为480*800输出可以交互的html页面四、根据 app 需求借助 AI 工具生成 html 文件和图片等资源文件根据定义的 app 需求可以使用 Trae也可以使用网页版的豆包也可以使用网页版的 deepseek生成“包含业务逻辑、可交互体验”的 html 文件经过我的对比测试网页版的 deepseek 生成的 html ui 效果比较你可以根据自己的实际情况来对比选择在这一章节我仅仅演示使用 deepseek 网页版来生成 html 的过程4.1 第一轮交互原始需求4.1.1 输入设计一个可用于嵌入式设备的售货机项目页面和交互业务逻辑分辨率为480*800输出可以交互的html页面4.1.2 输出等完全生成后参考下图体验效果4.1.3 存在的问题可以看到生成的 html 中仅支持投币购买不支持现在主流的扫码购买所以这个问题比较严重4.2 第二轮交互仅支持扫码支付4.2.1 输入仅支持扫码支付选择支付后弹出一个二维码让用户扫码支付提示支付结果4.2.2 输出4.2.3 存在的问题在 合宙引擎主机8101上每个 app 都需要一个退出按钮点击这个按钮可以关闭退出本 app可以看到生成的 html 中还没有这个按钮4.3 第三轮交互支持退出按钮4.3.1 输入主页的下面增加一个退出按钮可以不实现退出按钮的业务逻辑4.3.2 输出等完全生成后第一张图片已经增加了退出按钮如下图所示4.3.3 html 满足需求经过本轮设计生成的三个页面和业务逻辑可以满足需求所以本阶段的 html 设计就算完成此时我们把 html 源码文件保存下来命名为 vending_machine.html;大家可以用电脑上网页浏览器打开右键点我另存为下载html文件实际看一下效果4.4 第四轮交互导出所有图片资源虽然在 4.3 小节已经生成了最终可以满足需求的 html 文件但是还有一个问题没有解决html 中使用到的图片资源还没有导出来所以我们此时让 AI 把图片资源导出来4.4.1 输入帮我导出这里面的所有图片资源4.4.2 输出结果它在 html 效果图中增加了一个导出图片按钮如下图所示点击这个按钮就导出了大部分图片资源4.4.3 图片资源我们把导出的图片资源包命名为 vending_machine_images.zip解压缩打开查看如下图所示除了二维码图片异常外其余图片看起来正常接下来再次告诉 AI我点击导出图片按钮后导出的图片中二维码图片不正确AI 开始重新生成最终点击导出图片按钮后导出了全部正确的图片右键点我另存为下载图片资源包4.5 总结这个阶段主要就是根据需求不断的和 AI 交互生成 html你自己的实际 app根据自己的规划以及实际运行的效果可能需要调整多次才行按照同样的交互思路进行多轮交互即可直到生成的 html 界面和交互逻辑可以满足你的需求最后再导出来用到的所有图片资源具体到本项目最终输出了 vending_machine.html 和 vending_machine_images.zip 两个文件我们在接下来的编码环节会用到这两个文件五、根据 html 文件 图片等资源文件 代码仓库让 AI 工具生成 app 代码5.1 app 代码的基本格式要求app 代码有基本的格式要求我们先来看看 2.1.3 章节下载下来的 LuatOS-develop 代码仓库中的 app_store 目录在 app_store 内每个子目录都是一个单独的 app如下图所示我们以 airplane_battle 为例来说明 app 内部的代码结构和格式要求5.1.1 main.luaapp 的入口文件必须存在于单独 app 的根目录下文件内容按照以下格式编写即可PROJECTAIRPLANE_BATTLEVERSION001.999.000log.info(main, PROJECT, VERSION)requireairplane_winsys.publish(OPEN_AIRPLANE_BATTLE_WIN)sys.run()注意事项如下前 4 行代码对 app 的项目和版本信息进行配置并且打印实际上没有任何用处但是为了和我们 LuatOS 开发的完整项目中的 main.lua 格式保持一致所以也加上了减少对外沟通解释的成本第 6 行的require airplane_win和第 8 行的sys.publish(OPEN_AIRPLANE_BATTLE_WIN)加载当前 app 的 user 目录下用户脚本模块并且运行具体的每个 app需要根据自己的 app 业务逻辑加载很行第 10 行的sys.run()实际上没有任何用处但是为了和我们 LuatOS 开发的完整项目中的 main.lua 格式保持一致所以也加上了 sys.run()的调用减少对外沟通解释的成本5.1.2 icon.pngapp 的图标文件必须存在于单独 app 的根目录下要求png 格式32*32 像素背景色透明5.1.3 meta.jsonapp 的元数据文件必须存在于单独 app 的根目录下文件内容按照以下格式编写即可{app_name_cn:飞机大战,app_name_en:airplane-battle,version:1.0.0,publish_time:2026-04-04 12:00:00,category:游戏,description:拖拽飞机躲避敌机自动发射子弹并挑战更高分数,resolution:480x800,supported_models:{Air8101:[{firmware_id:104,min_firmware_version:2010},{firmware_id:105,min_firmware_version:2010}]},zip_size_kb:100,origin_size_kb:300}注意事项如下文件内容必须是 json 格式version 的格式必须是 x.y.z 格式从 1.0.0 开始其余字段参考示例都很好理解5.1.4 user 目录存放 app 具体功能模块的用户 Lua 脚本文件user 目录下不能再包含子目录5.1.5 res 目录存放 app 使用到的图片音频视频字体等资源文件只要不是 Lua 脚本文件都存放到这里代码中使用时直接以/luadb/*.*方式使用res 目录下不能再包含子目录5.1.6 libs 目录存放 app 使用到的扩展库脚本文件如果用到的扩展库脚本文件在默认出厂软件中已经包含则此处的 libs 目录是否包含重复的扩展库脚本文件都没有任何影响即使包含了也没有任何用处app 使用的仍然是默认出厂软件环境中的扩展库脚本文件如果用到的扩展库脚本文件在默认出厂软件中没有被包含则此处的 libs 目录必须包含进来为了节省空间如果不确定默认出厂软件中是否已经包含 app 需要的扩展库文件则可以默认已经包含在调试 app 过程中如果发现没有需要的扩展库会提示出错此时再加上扩展库脚本文件调试已经包含在默认出厂软件中的扩展库文件有dhcpsrv、dnsproxy、exapp、excloud、exmtn、exnetif、exwin、httpdns、httpplus、udpsrv2026 年 4 月 7 日的默认出厂软件包含这么多仅供参考后续可能会动态增加或者删除libs 目录下不能再包含子目录5.1.7 其他注意事项每个独立的 app 内部不再需要初始化 lcd 和 tp因为在默认出厂软件中已经完成这两项动作每个 app 都可以使用 fskv 来存储键值对参数仅可以读、写、清除 app 自己创建的参数没有权限操作每个 app 之外的其他 fskv 参数每个 app 都可以使用 io 核心库执行文件和目录操作仅可以控制自己 app 内的目录和文件自己 app 的所有目录和文件都可读自己 app 内的部分目录和文件可写操作目录和文件时以/luadb/或者/开头app 内部会自动做路径映射路径映射关系如下前面三种只读最后两种可读写/luadb/icon.png映射到 \/icon.png应用图标特殊处理/luadb/xxx.lua 或 /luadb/xxx.luac按优先级映射\/xxx.lua 或者 luac\/user/xxx.lua 或者 luac\/libs/xxx.lua 或者 luac/luadb/xxx非 lua 文件映射到 \/res/xxx资源文件目录/ram/xxx直接返回 /ram/xxx内存文件系统不做转换/xxx其他以/开头的路径映射到 \/data/xxx数据存储目录5.2 Trae 生成 app 代码前的准备工作在了解了每个 app 的代码基本格式和要求之后接下来我们使用 Trae 来生成自动售货机的 app 代码注意5.2.1 和 5.2.2 的顺序不能颠倒必须是先打开项目代码然后再验证项目规则和技能如果此处验证不通过返回到本文的 2.3 章节重新学习操作一遍5.2.1 打开 Trae切换为 SOLO 模式打开 LuatOS-develop 项目代码打开 Trae切换为 SOLO 模式如下图所示在工具的左上角有 SOLO 字样打开 LuatOS-develop 项目代码如下图所示在会话窗口的左上角可以显示当前打开的项目目录如果目录不对可以点击箭头处选择打开文件夹找到正确的目录打开即可5.2.2 验证 Trae 中的智能体模型项目规则和技能配置是否正确使用 luatos-docs-code 智能体写本篇文章时最新版本为luat-docs-code-101当你阅读本文章时如果有更新的版本使用更新的版本即可如下图所示在会话窗口有智能体名称如果不对点击箭头处选择正确的智能体根据实际情况配置合适的模型Trae 中内置的免费大模型会经常排队并且性能不可控容易出问题所以推荐参考001 发送会话请求时提示排队如何解决的方法订阅收费的大模型目前每月 40 元这样可以大大提高 AI 编程的质量如果不想使用收费模型在非正常工作时间段内使用内置的免费模型也能勉强凑合选择大模型时经过实际测试GLMMiniMax 的效果比较好大家根据自己实际使用的情况对比选择最终建议能使用收费模型尽量使用收费模型会让你在接下来的工作中省很多时间模型配置如下图所示我使用的是收费的 GLM-4.7 模型在会话窗口输入内容完整的告诉我给你配置了哪些提示词、规则和技能如果给出的回复包含以下红框中的几点信息则表示项目规则和技能配置正确5.2.3 新建一个会话任务专门用来处理售货机 app 代码生成调试5.2.4 打开编辑器窗口可以查看 LuatOS-develop 目录内容5.3 Trae 生成 app 代码为了演示整个过程的字节此处拆分为多步来逐步生成5.3.1 在 app_store 下创建 vending_machine 目录首先我们在LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store下创建一个vending_machine目录创建目录的方式有很多种此处仅仅演示使用 Trae 创建的过程在工具右侧的资源管理器中找到LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store目录鼠标点击右键在弹出的菜单中选择添加到对话此时可以看到 app_store 目录已经被添加到会话窗口如下图所示在会话窗口继续输入在这个目录下创建一个vending_machine目录如下图所示然后点击发送箭头按钮如下图所示最终创建成功5.3.2 在 vending_machine 目录下创建 resuserlibs 目录会话窗口输入在vending_machine目录下创建resuserlibs目录最终创建成功如下图所示5.3.3 把第四章节生成的 html 和图片文件复制过来这一步就不借助 Trae 完成了直接人工手动操作手动将 vending_machine.html 复制到 vending_machine 目录下将下图红框中的几张图片改名为英文名称然后复制到 vending_machine/res 目录下完成这两步操作之后如下图所示5.3.4 第一次自动生成 app 代码在会话窗口输入以下内容LuatOS-develop 路径需要根据你自己电脑上的实际路径来修改并且发送1、参考G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\vending_machine\vending_machine.html 中的UI界面和交互逻辑在vending_machine中生成LuatOS代码2、代码文件格式以及内容参考G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\下的其他目录包含main.luameta.jsonvending_machine\user目录下存储具体UI和业务功能的lua代码文件3、代码中需要的图片资源在vending_machine\user目录下代码中用到的图片资源使用\luadb\xxx.png的路径方式然后luatos-docs-code-101智能体就开始工作了几分钟之后生成了第一份代码思考输出的过程如下图所示可以看出这次交互生成了 main.lua、meta.json、vending_machine_win.lua 三个文件如下图所示依次点击这三个文件在中间的编辑器窗口点击保留按钮如下图所示5.3.5 手动生成一个售货机的 icon.png之前尝试过让 Trae 从网上搜索一个 app 的图标处理成 32*32 像素背景色透明的样式但是 Trae 搜索的过程非常漫长看起来效率比较低所以此处就不再使用 Trae 来生成 icon.png首先使用网页版的豆包输入帮我搜索或者生成一个适用于智能售货机应用的图标png格式32*32像素背景色透明豆包可以生成但是像素不满足需求一直输出 20482048 像素让他改成 3232 像素总是改不过来接着使用网页版的 deepseek输入帮我搜索或者生成一个适用于智能售货机应用的图标png格式32*32像素背景色透明直接生成了一个 html 页面运行这个页面可以下载下来一个 32*32 像素的图标能直接使用如下图所示把下载下来的图片改名为 icon.png然后复制到 vending_machine 目录下如下图所示六、在模拟上运行 app根据运行结果让 Trae 不断的调试代码直到运行通过在本章节我们在 LuatOS 模拟器上不断地运行刚才生成的 vending_machine 代码如果发现问题让 Trae 不断的调试直到在模拟器上可以正常运行如果你忘记了模拟器怎么使用再参考本文的 2.2 章节回顾学习一下6.1 将 app_store 目录复制到 LuatOS 模拟器所在的目录如下图所示将G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store整个目录复制到 LuatOS 模拟器所在的目录G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store6.2 使用 cmd 命令行 LuatOS 模拟器运行LuatOS 扩展库代码 合宙引擎主机8101出厂软件双击打开模拟器所在目录的 cmd如下图所示在命令行窗口粘贴输入luatos-pc.exe G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\factory\ G:\code\LuatOS-develop\script\libs\如下图所示按回车键就可以在模拟器上运行 合宙引擎主机8101出厂软件的出厂软件启动后如下图所示点击右下角的主菜单按钮打开主菜单窗口如下图所示可以看到出现了智能售货机app点击智能售货机app 图标就可以正式运行这个 app我们点击一下看看是否可以正常运行点击之后第一个窗口如下图所示点击扫码支付按钮打开二维码支付窗口如下图所示点击我已支付完成按钮直接提示运行错误模拟器异常关闭如下图所示除此之外很多图片和小图标都没有显示出来总的来说虽然已经有基本的轮廓但是也存在不少问题这里就不完整列举具体的问题了接下来我们使用智能体来修复每一个问题尝试修复之后再次复制 app_store 代码到模拟器所在目录下再次运行模拟器来验证6.3 修复问题商品中的图片没有正常显示6.3.1 第一轮修复输入商品中的图片没有正常显示注意使用g:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\vending_machine\res中的图片资源思考修复过程如下图从智能体的思考过程我们可以看出他把 emoji 替换为了 res 目录下的图片资源看起来思路没问题我们先不管智能体修复的是否正确先来看下它这次具体修改了什么代码这次仅仅修改了 vending_machine_win.lua打开这个文件如下图所示点击上下切换按钮可以查看具体的修改内容如果你会 LuatOS 编程就知道智能体这次的修复还是存在问题我们先不管有什么问题把 app_store 复制到模拟器目录再运行一下看看效果仍然没有显示出来图片6.3.2 第二轮修复输入你刚才修复之后图片仍然没有显示出来思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行效果图和上次完全一样图片仍然没有显示出来此时还多了一些错误日志如下图所示6.3.3 第三轮修复输入你刚才修复之后图片仍然没有显示出来另外出现了以下错误日志信息 [2026-04-06 09:54:17.608][00000008.575] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\cola.png [2026-04-06 09:54:17.613][00000008.580] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\sprite.png [2026-04-06 09:54:17.616][00000008.583] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\orange_juice.png [2026-04-06 09:54:17.619][00000008.586] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\material_water.png [2026-04-06 09:54:17.623][00000008.590] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\potato_chips.png [2026-04-06 09:54:17.624][00000008.592] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\chocolate.png [2026-04-06 09:54:17.628][00000008.595] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\biscuit.png [2026-04-06 09:54:17.632][00000008.599] E/user.[/app_store/vending_machine/] resolve_file_path path must start with /luadb/ or /: \luadb\energy_drink.png思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下可以看出这次的商品图片和二维码图片都显示出来了但是商品图片太大显示区域太小我们需要调整一下图片大小才行另外还有一个比较好的结果我们让它修复商品中的图片显示问题它把二维码图片显示问题也修复了它会一起修复类似的问题6.3.4 第四轮修复输入商品中的图片可以正常显示了但是图片尺寸太大没有显示完整思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行仍然没有显示完整6.3.5 第五轮修复输入图片还是没有显示完整你要缩小图片尺寸才能显示完整好好思考一下思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行仍然没有显示完整6.3.6 第六轮修复看来智能体在这方面的处理能力比较差接下来我们需要人工介入详细告诉他什么原因以及怎么修改看他能不能完成修改输入图片还是没有显示完整你之前的修改思路不对你应该看一下创建的 airui.img 控件的宽和高是多少然后再对比看下实际图片的宽和高是多少代码中airui.image 的 w 和 h 分别是 100 和 60实际上最大图片的尺寸的 w 和 h 分别为 268 和 138每张图片的尺寸不完全一样你要么把所有原始图片给我处理一下尺寸变小要么写一套算法自动缩放这些图片来适配 airui.image 的尺寸思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下所示图片终于可以正常显示了通过 6.3 小节调试修复这个问题我们可以总结出重要的一点智能体修复过程中你要学会看代码根据代码思路和实际效果给智能体更详细的输入信息和指令它可以理解得更透彻6.4 修复问题很多小图标显示不正常问题如下图红框所示6.4.1 第一轮修复输入以下几类文字前面的小图标没有显示出来不用显示这些图标了把图标删除删除后适当调整对应的文字位置让显示更美观 1、当前选中前面的图标 2、每种商品价格前面的图标 3、扫码支付等按钮上面的图标 4、还有其他类似的这种小图标思考修复过程如下图重点关注红框部分这一次思考处理的过程很长有 10 几分钟之久感觉 GLM-4.7 大模型变慢了如果以后还是这么慢可以考虑换 MiniMAX 模型试下复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下所示可以看到大部分的小图标已经删除了还有三处没有删除6.4.2 第二轮修复输入大部分的图标已经被删除了还有以下三处没有删除 1、选中商品后在窗口右上角显示商品名称和价格之间的图标 2、二维码支付窗口价格左方的图标 3、二维码支付窗口我已支付完成按钮上的图标思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下所示小图标显示不正常的问题已经全部修复6.5 修复问题删除主窗口最下方的一段提示文字问题如下图红框所示6.5.1 第一轮修复因为在前面两轮会话过程中使用的收费 GLM-4.7 模型处理速度有点儿慢所以在这里我把模型切换为收费的 MiniMAX-M2.5看看处理速度和效果如何如下图所示输入删除主窗口下方的 “点击商品- 扫码支付…”这一行提示语思考修复过程如下图重点关注红框部分让人惊喜的是它还把之前漏掉的一处修复给解决了复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下所示最下方的提示语已经被删除6.6 修复问题扫码支付窗口布局调整问题如下图红框所示布局不好竖直滚动条滑动才能看到完整的按钮6.6.1 第一轮修复输入扫码支付窗口删除竖直滚动条我已支付完成和取消两个按钮并排显示完整思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下所示虽然整体窗口的整体竖直滚动条已经去掉了并且下面的两个按钮也并排正常显示了但是二维码区域却给加上了竖直滚动条还要继续修改6.6.2 第二轮修复输入二维码那个区域也不要竖直滚动条思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行仍然没有解决6.6.3 第三轮修复输入改了之后还是没有显示完整还有竖直滚动条你再好好计算一下看看控件的宽和高看看实际图片的宽和高思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行效果图如下所示已经解决问题6.7 修复问题扫码支付窗口点击我已支付按钮后异常死机问题如下图所示6.7.1 第一轮修复输入点击扫码支付窗口的我已支付成功按钮后出现异常日志 E/main /app_store/vending_machine/user/vending_machine_win.lua:138: attempt to call a nil value (method ‘set_alpha’)思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行仍然没有解决此时提示找不到 set_opacity 方法此时我们看一下 vending_machine_win.lua 的 138 行代码card.container:set_opacity(255)可以知道这个异常表示 airui 的容器组件找不到 set_opacity 函数我们再去 airui 核心库看一下确实不支持这个函数应该是 ai 自己杜撰的一个函数接下来我们不告诉智能体怎么修复仅仅告诉它错误信息看它能不能解决6.7.2 第二轮修复输入点击扫码支付窗口的我已支付成功按钮后出现异常日志 E/main /app_store/vending_machine/user/vending_machine_win.lua:138: attempt to call a nil value (method ‘set_opacity’)思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行运行正常6.8 增加功能实现退出按钮的逻辑目前主窗口的退出按钮还没有任何功能所以我们需要添加退出业务逻辑6.8.1 第一轮交互输入目前的退出按钮还没有实际功能参考 app_store 下面的其他 app 的退出业务逻辑代码实现退出业务逻辑思考修复过程如下图重点关注红框部分复制代码到模拟器目录之后模拟器关闭之后再次运行退出功能正常可以关闭当前 app返回到主菜单6.9 总结6.9.1 完整演示截止到这里基本的售货机 UI 和模拟业务逻辑已经调试完成可以正常运行了下面是完整的演示视频6.9.2 后续功能迭代还有其他一些小问题或者新的功能需求大家如果自己想练手可以借助 Trae 进一步解决实现例如商品和滚动条小范围重叠显示的问题各个控件的色彩和 html 文件不符二维码动态显示给代码添加详细注释…七、基本功能测试说明app 内部有退出按钮可以点击返回到主菜单窗口app 退出后在主菜单窗口再次点击可以再次正常进入 app如果有问题参考 6.8 章节检查代码app 内部的基本业务逻辑和 UI 界面都正常退出 app 后app 内部的业务逻辑也要停止不要在后台运行如果自己的 app 内部有运行日志可以通过日志判断是否在后台运行八、UI分辨率自适应说明1、“智能售货机”app的UI界面目前基于竖屏480*800分辨率设计我们称这个分辨率为“app基准分辨率”2、合宙有多款不同lcd分辨率的竖屏引擎主机例如Air8000W引擎主机的lcd分辨率为320480Air8101引擎主机的lcd分辨率为480854Air1602引擎主机的lcd分辨率为720*1280后续可能还有其他型号的引擎主机3、合宙引擎主机的默认出厂软件可以根据“app基准分辨率”自适应为引擎主机硬件的lcd分辨率这个自适应过程是自动完成的不需要你的app做特殊处理4、也就是说虽然app只是基于了某一种分辨率来设计但是从理论上说app可以自动地在不同分辨率的引擎主机和模拟器上自适应运行5、虽然引擎主机的出厂软件支持自适应分辨率功能不需要app内部再设计自适应但是也不禁止你在app内部设计自适应分辨率功能如果你在app内部设计了自适应分辨率功能在app内的meta.json文件中将display_zoom字段填写为adaptive即可九、打包 app在应用市场上架在本地模拟器上开发调试完成会后就可以打包提交到应用市场了打包提交流程如下1、找到本地的 vending_machine 目录在这个目录下仅保留本文 5.1 章节所描述的文件其余文件和文件夹全部删除例如我们在 5.3.3 章节复制了 vending_machine.html此时需要把这个文件从本目录移除在我的电脑上完整路径为 G:\code\LuatOS-develop\module\Air8101\project\AirUIFrame\ui_play_board\app_store\vending_machine最终这个目录内的内容如下图所示2、返回到 vending_machine 目录所在的上一级目录 app_store在这里找到 vending_machine 目录在 vending_machine 目录点击鼠标右键使用压缩工具选项压缩为 vending_machine.zip这里需要特别注意压缩后的 zip 文件第一级是 vending_machine 目录完整的结构如下不同压缩工具的压缩表现不一样无论使用什么工具压缩要确保压缩后的 zip 文件中的目录结构满足下面的要求vending_machine.zip|------vending_machine 目录|------main.lua|------meta.json|------icon.png|------user 目录|------res 目录|------libs 目录3、在电脑上访问https://iot.luatos.com/登录之后打开Turnkey方案-我的应用管理菜单点击应用上传按钮在弹出的上传应用小窗口上传 vending_machine.zip 文件即可如下面几张图片所示十、在模拟器上通过应用市场下载安装 app运行验证 app在本章节我们通过模拟器的应用市场去下载、安装并且测试 vending_machine 这个 app操作过程如下1、删除 LuatOS 模拟器所在目录下的 app_store 目录如下图所示2、模拟器上的 app_store 目录有什么作用 - app_store 是模拟器内置文件系统根目录/下的一个子目录所有的 app 都保存到了这个 app_store 目录下 - 在本篇文章的前文中我们开发调试 vending_machine 这个 app 的代码时为了开发调试方便都是直接将代码放到模拟器同级的 app_store 目录下模拟器可以直接识别并且运行 - 现在我们开发调试结束将 app 上传到了应用市场可以通过模拟器端的应用市场功能将 app 下载安装到模拟器的内置文件系统/app_store/目录下所以我们需要在下载安装 app 之前将之前我们手动复制过来的 app_store 下面的 app 删除方便在真实的使用环境中测试验证 3、运行模拟器进入主菜单打开应用市场功能找到智能售货机安装成功后返回再打开主菜单就能看到这个 app运行测试即可如下面几张图片所示4、安装成功之后我们再看模拟器所在的目录自动创建了 app_store 目录并且 vending_machine 子目录保存到了这个目录中如下图所示十一、在 合宙引擎主机8101上通过应用市场下载安装 app运行验证 app上一章节如果在模拟器上已经测试通过在 合宙引擎主机8101测试功能上不应该出问题只有可能出现性能问题例如打开 app 比较慢运行 app 比较卡如果出现性能问题可以告诉 Trae看看它是否可以优化如果无法优化发出来一起讨论看看是否可以优化以及如何优化在 合宙引擎主机8101上下载、安装并且测试 vending_machine 这个 app操作过程如下准备一块 合宙引擎主机8101和一根 type-c usb 数据线使用 Luatools 同时烧录以下四部分内容Air8101 105 编号的最新版本内核固件https://docs.openluat.com/air8101/luatos/firmware/如果找不到 105 编号的固件在合宙内部群沟通获取LuatOS 仓库的 develop 分支中 合宙引擎主机8101的默认出厂软件factoryLuatOS 仓库的 develop 分支中的扩展库LuatOS/script/libs一定不要勾选使用 Luatools 的默认 lib默认发布的 lib 还没支持全部功能文件系统中选择 hzfont 字库参考烧录 hzfont 字库烧录成功后开机运行之后的操作方式和模拟器上的操作方式完全一样十二、提交代码到 LuatOS 仓库的 develop 分支自己开发的 app 验证通过之后就可以提交代码到服务器了使用 TortoiseGit 提交代码简单的操作过程如下更详细的流程自行上网或者借助 AI 学习1、在自己电脑上的代码仓库目录的空白区域鼠标点击右键先 pull 下来服务器最新代码如下图所示2、在自己电脑上的代码仓库目录的空白区域鼠标点击右键add 自己新增的文件如下图所示3、在自己电脑上的代码仓库目录的空白区域鼠标点击右键提交自己的修改如下面两张图片所示今天就分享到这了