Sciter

Sciter 是一个高质量但小众的嵌入式 UI 引擎，适合追求性能、体积和原生集成的桌面应用开发者。

我觉得 Sciter 比较有意思，它很小众，商业使用需要购买许可，还不算贵。它由 Terra Informatica Software（由 Andrew Fedoniouk 创建）开发，他拥有应用物理与数学的硕士学位，并有艺术文凭背景。这种跨领域背景使他既具备深厚的技术功底，又懂得用户界面设计的艺术。

官网：https://sciter.com/

本次入门开发环境：window 10 + Clion 2024.3 + Sciter-js v6.0.2.28(2025-11-15最新版) + Bundled MinGW 11.0

对比主流的pc ui框架

特性 / 框架 Sciter Electron Tauri Qt (Widgets/QML) Flutter (Desktop)
授权模式 闭源，免费用于非商业；商用需授权 MIT（完全开源免费） MIT（完全开源免费） LGPL/GPL 或商业授权 BSD 3-Clause（完全开源免费）
语言支持 HTML/CSS + JavaScript（JS版） HTML/CSS/JS + Node.js HTML/CSS/JS + Rust（后端） C++（QML 可用 JS） Dart
渲染引擎 自研轻量引擎 Chromium + Node.js 系统 WebView + Rust 后端 自研（QWidget / Qt Quick） Skia（自绘引擎）
安装包体积 极小（<10 MB） 很大（通常 >100 MB） 小（通常 5–20 MB） 中等（依赖 Qt 运行时） 中等（约 30–60 MB）
内存占用 极低（10–50 MB） 高（常 >200 MB） 低（接近原生 WebView） 中等 中等偏高
启动速度 极快（毫秒级） 慢（需启动 Chromium） 快 快 中等
跨平台支持 Windows, macOS, Linux Windows, macOS, Linux Windows, macOS, Linux Windows, macOS, Linux, 嵌入式 Windows, macOS, Linux
是否依赖系统 WebView 否（自带引擎） 否（自带 Chromium） 是（调用系统 WebView） 否 否（自绘）
UI 开发体验 类 Web，但 JavcaScript 支持有限 完全 Web 生态 Web 前端 + Rust 安全后端 C++/QML，学习曲线较陡 响应式 Dart UI，热重载优秀
原生集成能力 强（可调用任意原生 API） 通过 Node.js 或插件 通过 Rust FFI 极强（C++ 原生） 通过 Platform Channels
适合项目类型 工具类、配置界面、嵌入式 HMI 复杂 Web 应用桌面化（如 VS Code） 安全敏感、轻量 Web 前端应用 大型桌面应用、工业软件 多端统一 UI（含移动端）
社区生态 小众，文档齐全但社区弱 极大，生态丰富 快速增长，Rust 社区支持 成熟，历史悠久 快速增长，Google 支持
离线运行能力 完全支持（无网络依赖） 支持 支持 支持 支持

下载SDK

现在 2025-11-15最新版 v6.0.2.28， 它的sdk代码放在Gitlabel上 https://gitlab.com/sciter-engine/sciter-js-sdk，直接下载zip即可，解压得到 sciter-js-sdk-main

image-1763203230081

Sciter 的 hello 入门

Clion 创建项目

通常Windows开发c使用vs2022，但我用clion 2024.3.x 版本，创建项目c项目hello_sciter20251115：
image-1763203546001

首先查看我的编译环境配置如下：

image-1763203633124

配置头文件

修改项目的 CMakeLists.txt

cmake_minimum_required(VERSION 3.30)
project(hello_sciter20251115)

set(CMAKE_CXX_STANDARD 17)

add_executable(hello_sciter20251115 main.cpp)

# sciter头文件所在目录
include_directories("C:\\Users\\Administrator\\Desktop\\project\\sciter\\sciter-js-sdk-main\\include")


# 自动复制 sciter.dll 到exe输出目录（保证运行时不会缺少dll）
add_custom_command(TARGET hello_sciter20251115 POST_BUILD
        COMMAND ${CMAKE_COMMAND} -E copy_if_different
        "C:\\Users\\Administrator\\Desktop\\project\\sciter\\sciter-js-sdk-main\\bin\\windows\\x64\\sciter.dll"
        $<TARGET_FILE_DIR:hello_sciter20251115>
)

CMaKe 项目

image-1763207718076

编写UI的html

hello-ui.html

<!DOCTYPE html>
<html
        window-width=600px
        window-height=450px
        window-resizable=true>
<head>
    <meta charset="UTF-8">
    <title>lingkang的sciter入门hello演示</title>
</head>
<body>
<button type="button" id="btn">点击调用c++能力</button>
<script>
    // 给按钮绑定点击事件
    document.getElementById('btn').onclick = function () {
        // 一定要用 Window.this.c++定义的类名.要调用的方法名称
        const result = Window.this.myWindow.nativeCallHello()
        console.log('result=' + result)
    }
</script>
</body>
</html>

编写启动入口 main

修改 main.cpp

#include <cstdint>  // C++ 标准头文件（首选）
#include <windows.h>
#include "sciter-x-window.hpp"
#include "aux-cvt.h"
#include "sciter-x.h"

class myWindow : public sciter::window {
public:
    myWindow() : window(SW_MAIN | SW_ENABLE_DEBUG) {}

    // 将c++的调用接口暴露给前端，前端调用时：Window.this.myWindow.nativeCallHello()
    SOM_PASSPORT_BEGIN(myWindow)
        SOM_FUNCS(
                SOM_FUNC(nativeCallHello)
        )
    SOM_PASSPORT_END

    // 暴露给前端js调用的方法
    sciter::string nativeCallHello() {
        MessageBoxW(NULL, L"hello，我是后端c++方法", L"确认", MB_OK);
        return WSTR("ok");
    }

};

int uimain(std::function<int()> run) {
    // 创建ui窗口实例
    sciter::om::hasset<myWindow> window = new myWindow();

    // 加载前端UI的html文件
    window->load(WSTR("file://C:/Users/Administrator/Desktop/project/sciter/app/hello_sciter20251115/ui/hello-ui.html"));

    window->expand();
    return run();
}

/**
 * 图形用户界面（GUI）应用程序的标准入口函数，相当于控制台程序中的 main 函数。
 * 2025-11-15 by lingkang
 */
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
    // 启用试调
    SciterSetOption(NULL, SCITER_SET_SCRIPT_RUNTIME_FEATURES,
                    ALLOW_FILE_IO |
                    ALLOW_SOCKET_IO |
                    ALLOW_EVAL |
                    ALLOW_SYSINFO);
    // 初始化sciter
    sciter::application::start();
    // 加载我们的窗口
    uimain([]() -> int { return sciter::application::run(); });
    // 结束时 关闭
    sciter::application::shutdown();
    return 0;
}

static std::vector<sciter::string> _argv;
// 设置 sciter 的初始化应用
namespace sciter {

    namespace application {
        HINSTANCE hinstance() {
            return nullptr; // not used
        }

        const std::vector<sciter::string> &argv() {
            // 获取命令行参数
            return _argv;
        }
    }

}

// TIP See CLion help at <a
// href="https://www.jetbrains.com/help/clion/">jetbrains.com/help/clion/</a>.
//  Also, you can try interactive lessons for CLion by selecting
//  'Help | Learn IDE Features' from the main menu.

项目结构和运行、调试截图

image-1763207852292