ultralight搭建/运行/打包

最新推荐文章于 2024-09-15 07:57:14 发布

三巧

最新推荐文章于 2024-09-15 07:57:14 发布

阅读量1.2k

点赞数 1

文章标签：前端 c++ electron javascript html5

本文链接：https://blog.csdn.net/qq_39124701/article/details/129546650

版权

本文详细介绍了如何搭建Ultralight开发环境，包括安装Git、CMake、MicrosoftC++生成工具和VSCode，然后克隆Ultralight-quick-start项目，构建并运行HelloWorld示例。此外，还涉及到修改app.html，添加自定义图标以及打包应用程序的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0、ultralight的github更新

截至2023年3月17日，ultralight的github仓库最近的提交时间为2022年12月10日。

1、ultralight

ultralight是使用C或C++语言和HTML/JS构建界面，基于WebKit的HTML渲染器。
支持系统：Windows(7+、x64)、macOS(Sierra或更高版本)、Linux(Ubuntu/Debian9.5+、x64)。
可以与React/Vue.js/Angular等技术一起使用。可以与支持动态纹理的游戏一起使用。
年收入低于10万美元的独立开发者免费。

2、ultralight网址

官网、github、ultralight-quick-start
编写第一个程序 - 文档

3、安装Git

阿里镜像、GitClone、Git官网
可能的文件名：Git-2.40.0-64-bit.exe

4、安装CMake

官网、腾讯软件、用IDM、Motrix等下载软件加速下载
可能的文件名：cmake-3.26.0-windows-x86_64.msi
选择Add CMake to the system PATH for all users
在这里插入图片描述

5、安装Microsoft C++ 生成工具或者VisualStudio社区版

VisualStudio社区版
 Microsoft C++ 生成工具
安装哪个都行，不下载IDE的情况下C++生成工具比较小所以安装Microsoft C++ 生成工具

选择使用 C++ 的桌面开发，按图勾选
仅勾选两项，MSVC v143 - VS 2022 C++ x64/x86 生成工具和Windows 11 SDK (10.0.22000.0)
在这里插入图片描述

6、安装VSCode

如何下载安装VSCode
插件：C/C++ Extension Pack、Prettier

7、编写一个HelloWorld

git clone https://github.com/ultralight-ux/ultralight-quick-start
cd .\ultralight-quick-start\
mkdir build
cd build
cmake ..
cmake --build . --config Release

报红：CUSTOMBUILD : error : downloading 'https://ultralight-sdk.sfo2.cdn.digitaloceanspaces.com/ultralight-sdk-latest-win-x64 .7z' failed [.\ultralight-quick-start\build\UltralightSDK.vcxproj]
报红不用管，再运行一次
cmake --build . --config Release
再运行一次就有下载进度了，就像这样：-- [download 1% complete]
打开文件运行试试：.\ultralight-quick-start\build\Release\MyApp.exe
在这里插入图片描述

8、修改一下 app.html

将.\ultralight-quick-start\assets\app.htm替换为以下内容

<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>我的应用</title>
        <style>
            body {
                background-color: aliceblue;
                font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",
                    sans-serif;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>你好，世界！</h1>
    </body>
</html>

9、添加一个 build.bat 脚本

VSCode插件Code Runner可以直接运行bat脚本
新建文件.\ultralight-quick-start\build.bat，内容如下：

@echo off
cd build && cmake --build . --config Release && goto aa||goto end

:aa
for /r %%i in (*.exe) do (
echo %%i| findstr %cd%\Release >nul &&(start %%i && goto end)
)

:end

10、运行build

右键build.bat，Run Code，因为只改了html所以特别快
在这里插入图片描述

11、添加exe文件图标

新建文件.\ultralight-quick-start\src\logo.rc
```
IDI_ICON1 ICON DISCARDABLE "yeah.ico"
```
将一个ico文件放进logo.rc相同的目录下，就像这样：.\ultralight-quick-start\src\yeah.ico

修改.\ultralight-quick-start\CMakeLists.txt，set语句添加一行"src/logo.rc"

project(MyApp C CXX)
cmake_minimum_required(VERSION 3.3.2)

include(cmake/App.cmake)

set(SOURCES "src/MyApp.h"
            "src/MyApp.cpp"
            "src/main.cpp"
            "src/logo.rc")

add_app("${SOURCES}")