手把手、轻松实现Windows+vscode环境开发LVGL
如果能在Windows系统下运行vscode对LVGL进行开发学习,那么将会大大地提高我们的开发效率。下面是详细教程。
如果通过看文档教程无法实现效果,请查看此文档教程的视频教程:https://space.bilibili.com/3546857808595431
资料准备
- cmake:cmake-4.0.1-windows-x86_64.zip
- Mingw:x86_64-14.2.0-release-win32-seh-msvcrt-rt_v12-rev2.7z
- SDL2:SDL2-devel-2.32.4-mingw.zip
- VSCode:VSCodeUserSetup-x64-1.99.3.exe
- Python:python-3.13.3-amd64.exe
- 7Z解压缩:7z2409-x64.exe
- Git:Git-2.49.0-64-bit.exe
- LVGL工程代码:lv_port_pc_vscode
上述所有的资料可以直接在这里下载(任选一种方法):
- 百度云:链接: https://pan.baidu.com/s/10a6duAFRjSe9p-cLk_IhQQ?pwd=unkx 提取码: unkx
- 前往unkx的官网获取:https://dl.unkx.net
- 进入QQ群获取资料:1038885053
获取到的所有的资料如图所示:
注意:资料提供的软件包后续可能会更新,如果进行了更新,那么文件名称会改变,但是改变的只会是版本号,关键信息不会改变,比如cmake压缩包,不管版本如何变化都会保留有cmake关键字,通过该关键字对应即可。
资料的使用
如果电脑没有安装VScode、Python、解压缩软件和Git,那么先双击安装下面的软件:
VSCodeUserSetup-x64-1.99.3.exe
python-3.13.3-amd64.exe
7z2409-x64.exe
Git-2.49.0-64-bit.exe
VScode建议直接使用我们资料包或者下载最新版的重新安装一次,以确保版本是最新的或者和教程的一样。VScode的安装过程有一步骤是需要注意的(其他软件按照默认的选项安装即可),详细请看安装视频或者下图所示:
确定上面的软件都已就绪后,接下来进行下面的操作,这个过程不需要安装软件,这里就是为编译LVGL工程做准备:
-
新建一个文件夹用于存放资料,建议在资料盘或系统的根目录(如果是长路径,那么路径不要有中文或特殊字符)创建文件夹,本教程在C盘根目录新建一个文件夹,其名称为:
unkx
。打开进入该文件夹目录,下面所有的资料解压都存放入在该文件夹中。 -
解压
cmake-4.0.1-windows-x86_64.zip
到上面新建的unkx
文件中,如下第5步骤所示。 -
解压
x86_64-14.2.0-release-win32-seh-msvcrt-rt_v12-rev2.7z
到上面新建的unkx
文件中,如下第5步骤所示。 -
解压
SDL2-devel-2.32.4-mingw.zip
到上面新建的unkx
文件中,如下第5步骤所示。 -
上述解压操作所得的文件夹:
添加环境变量
按下键盘上的win按键,然后在弹出的搜索栏中输入环境变量
,进入系统的环境变量设置,如下图所示:
接着,添加如下路径信息:
-
C:\unkx\mingw64\bin
-
C:\unkx\cmake-4.0.1-windows-x86_64\bin
-
C:\unkx\SDL2-2.32.4\x86_64-w64-mingw32\bin
添加过程如下图所示:
测试添加的环境变量是否正确:
-
按下键盘的组合键:
WIN+R
在屏幕左下角弹出的窗口的输入框中输入:cmd
,打开windows的命令行终端。 -
在弹出的windows命令行终端,按照下图所示分别输入这两条命令,对比结果:
在VScode中编译工程
- 插件安装,打开vscode按照下图所示安装插件:
- 选择工具链。在VScode中按下组合按键:
Ctrl+Shift+P
即可弹出此窗口按照下图说明操作:
接着,按照下图所示选择cmake使用的工具链
- 编译问题解决,第一次编译会遇到如下问题,按照下图所示解决问题:
-
编译成功的提示:
-
运行、查看效果: