LuatIDE

# 简介 LuatIDE 是一个集单步调试、智能编辑、项目管理、下载等多功能的集成开发环境。可以极大程度的提高软件人员代码编写的效率以及质量,节省大量时间,缩短项目周期。 # 环境 - 运行于 Windows 系统,只要可以正常运行 Windows7 或以上系统即可使用 LuatIDE,不支持mac与linux。 - LuatIDE 属于 VsCode 插件,使用前需要首先安装 VsCode 代码编辑器 。见[vscode安装教程](https://wiki.luatos.com/boardGuide/vscode.html#vscode "vscode安装教程") # 安装 ## 在线安装 通过 VsCode 的插件应用市场搜索 LuatIDE,点击安装即可。 ![image20220222151112935.png](https://cos.easydoc.net/22753220/files/l07vqx82.png) ## 本地安装 通过 [LuatIDE下载链接](https://gitee.com/openLuat/luatide/releases) 将插件下载到本地,然后在 VsCode 中选择 __从 VSIX 安装__ 即可。 ![image.png](https://cos.easydoc.net/22753220/files/l07w2e71.png) # 功能 目前 LuatIDE 集成的功能主要有代码编辑,烧录,代码调试,软件模拟,以及 界面设计。 安装完成后,侧边栏会多出一个 LuatIDE 的图标。界面常用的有两个部分,一个是用户工程,还有一个是当前活动工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07w5rwl.png) ## 编辑 VsCode 本身就是一个代码编辑器的集成环境,所以理所当然的包含了代码编辑的常用的功能,包括代码高亮,智能提示等。LuatIDE 扩展了一些有关 LuatOS API 的一些代码提示,可以使开发人员更加便捷的进行代码编写。除了代码编辑本身以外,LuatIDE 引入了工程的概念,代码开发是以工程为单位。 ### 新建工程 点击新建工程的图标可以创建一个新工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07w6vek.png) 之后可以看到四个选项,空白工程,示例工程,NDK工程和UI工程。我们可以选择新建空白工程,然后填入工程路径,以及工程名称,模块型号可以选择自己对应的模块。如果想使用模拟器,模块型号需要选择 **Simulator**。之后选择好库文件以及 core 文件即可创建一个空白工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07w8ddu.png) 可以看到,默认创建的工程包含两个文件,一个工程配置文件,以及一个默认的 main.lua 文件。 ![image.png](https://cos.easydoc.net/22753220/files/l07w9ry4.png) ### 导入工程 如果我们是在 LuatIDE 从零开发当然是选择新建工程,若当前已经存在一个源码文件夹,那么可以选择导入工程。假设当前桌面存在一个 Demo2 文件夹,里面有我们的源码文件。 ![image.png](https://cos.easydoc.net/22753220/files/l07wckmb.png) 此时可以点击 **打开工程** 的图标,将一个源码文件夹转化为 LuatIDE 工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07weo8x.png) 选择需要导入的文件夹,点击 **选择需要打开的工程目录**。 ![image.png](https://cos.easydoc.net/22753220/files/l07wgwt0.png) 此时会弹出提示 **该项目未配置工程,是否配置?** 点击确认即可。 ![image.png](https://cos.easydoc.net/22753220/files/l07xkw7u.png) 可以看到,我们以另一种方式创建了一个工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07wifd3.png) ### 示例工程 LuatIDE 可以以示例工程为模板,为我们创建一个新工程。IDE 会为我们把示例工程的代码拷贝出一个副本到新工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07wirwb.png) ### 切换工程 若要切换工程,需要点击工程前面的激活工程按钮。 ![image.png](https://cos.easydoc.net/22753220/files/l07wjk2n.png) ### 编辑工程 如果想在工程添加文件,需要先在当前文件中拖入需要添加的文件。例如,这里拖入了需要添加的文件 test.lua。 ![image.png](https://cos.easydoc.net/22753220/files/l07wjz83.png) 之后在当前工程中点击 **活动工程配置** ,然后点击添加文件,再然后选择 test.lua,文件就会被加入工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07wkl4n.png) 如果需要将文件移除工程,需要点击文件前面的删除按钮,然后手动在文件夹删除文件。 ![image.png](https://cos.easydoc.net/22753220/files/l07wl06d.png) ### 删除工程 点击工程前的删除按钮,会将工程删除。此操作只是将工程从 LuatIDE 移除,并不会影响硬盘上文件。 ![image.png](https://cos.easydoc.net/22753220/files/l07wlgdd.png) ## 烧录 代码编写完成之后需要烧录到模块,点击运行按钮即可烧录。 ![image.png](https://cos.easydoc.net/22753220/files/l07wlrnq.png) ## 代码调试 点击 Debug 按钮可以进行代码调试,首先在代码前双击添加断点,随后点击 Debug 按钮进行调试。 ![image.png](https://cos.easydoc.net/22753220/files/l07wmgwl.png) 如图所示,此时已经进入调试模式,代码停在了断点处。此时可以查看局部以及全局变量还有堆栈调用情况。 ![image.png](https://cos.easydoc.net/22753220/files/l07wmty7.png) 调试工具栏如图所示,从左至右依次是 继续,单步跳过,单步调试,单步跳出,重启,停止。 ![image.png](https://cos.easydoc.net/22753220/files/l07wn6ys.png) 调试快捷键如下: ``` 继续 F5 单步跳过 F10 单步调试 F11 单步跳出 Shift + F11 重启 Ctrl + Shift + F5 停止 Shift + F5 ``` 除此之外,也可以通过控制台发送 AT 指令进行调试,例如,这里通过发送 **ATI** 指令查看当前模块版本信息。 ![image.png](https://cos.easydoc.net/22753220/files/l07wnig6.png) ## 模拟器 在没有硬件条件的情况下,LuatIDE 可以用模拟器进行模拟,包括运行代码逻辑以及界面 UI 显示。 若使用模拟器进行调试,首先需要保证创建工程时模块型号选择为模拟器,否则需要修改型号 。 ![image.png](https://cos.easydoc.net/22753220/files/l07wnx9r.png) ![image.png](https://cos.easydoc.net/22753220/files/l07wob0s.png) 可以看到,代码已经正常运行,同时多出了一个手机样式的窗口,因为代码只是普通的日志打印,并没有UI方面的相关操作,所以显示的只是默认待机界面的画面。 ![image.png](https://cos.easydoc.net/22753220/files/l07wors2.png) 重新创建一个UI工程,我们可以看到模拟器显示的效果。 ![image.png](https://cos.easydoc.net/22753220/files/l07wp9fp.png) 在模拟器上右键可以进行设置,可以放大,缩小,或者更换左右横屏显示方式。 ![image.png](https://cos.easydoc.net/22753220/files/l07wpqp2.png) ## 设计器 LuatIDE 可以使用设计器对界面进行可视化编辑,界面所见即得,简化开发过程。 使用界面设计器首先要求工程必须 带界面显示,也就是说需要创建一个UI工程。 ![image.png](https://cos.easydoc.net/22753220/files/l07wq4cq.png) 随后点击 UI 设计器按钮即可进入设计器。 ![image.png](https://cos.easydoc.net/22753220/files/l07wqjmu.png) 界面预览如图所示,这里是一个项目模板,左边可以进行界面拖拽布局设置,右边进行组件属性的编辑。 ![image.png](https://cos.easydoc.net/22753220/files/l07wqtxj.png) ### 设置选项 设计器的设置选项信息如下图所示: ![image.png](https://cos.easydoc.net/22753220/files/l07wr6v7.png) 可以选择是否显示预览控件的 轮廓线,指示图标,类型提示,以及控件名称。以标签为例: ![image.png](https://cos.easydoc.net/22753220/files/l07ws2qk.png) 其他选项可以看到有添加屏幕,移除当前屏幕,以及在屏幕之间转移控件等。其中一个屏幕代表的就是一个 UI 界面。工程创建的时候默认添加了一个屏幕 ScreenA,我们可以添加一个屏幕 ScreenB。 ![image.png](https://cos.easydoc.net/22753220/files/l07wsgcz.png) 创建完成之后,我们可以在两个屏幕之间进行切换。 ![image.png](https://cos.easydoc.net/22753220/files/l07wsvn2.png) ### 添加组件 ![image.png](https://cos.easydoc.net/22753220/files/l07wt6bc.png) ![image.png](https://cos.easydoc.net/22753220/files/l07wtg7n.png) 此时界面就会显示出我们刚刚添加的标签组件。 ![image.png](https://cos.easydoc.net/22753220/files/l07wtr0d.png) ### 编辑组件 添加完组件后,可以在右边的 **组件属性** 栏对这个标签组件进行属性设置。 可以看到,文字标签可以修改的属性有尺寸,外观,属性,事件。 ![image.png](https://cos.easydoc.net/22753220/files/l07wx3kl.png) 一般属性信息,直接在属性框修改数值即可,背景样式之类的属性会弹出二级界面,同样设置即可。 ![image.png](https://cos.easydoc.net/22753220/files/l07wy4gc.png) 这里把背景色更换成了红色,可以看到 UI 设计器上预览发生了变化。 ![image.png](https://cos.easydoc.net/22753220/files/l07wygw2.png) 属性值所代表的具体含义需要查询 LVGL 的 API 文档。 设置完成之后直接运行代码即可预览效果。 ![image.png](https://cos.easydoc.net/22753220/files/l07wz1a1.png) # 常见问题 [终端异常](https://doc.openluat.com/wiki/21?wiki_page_id=2975 "终端异常") [代码行上的错误提示](https://doc.openluat.com/wiki/21?wiki_page_id=2976 "代码行上的错误提示") [无法与设备通讯](https://doc.openluat.com/wiki/21?wiki_page_id=2977 "无法与设备通讯") [运行缓慢/卡顿](https://doc.openluat.com/wiki/21?wiki_page_id=2980 "运行缓慢/卡顿") [IDE无法安装最新版本](https://doc.openluat.com/wiki/21?wiki_page_id=2982 "IDE无法安装最新版本") # 相关资料及链接 点击此处快速下载:[LuatIDE下载链接](https://marketplace.visualstudio.com/items?itemName=luater.luatide&ssr=false#overview) LuatIDE 讨论群:649926645