SciterUI模块 V1.0 - 让易语言用上 HTML/CSS/JS 开发现代化界面

chungbin · 发表于 2025-12-11 13:48:30

本帖最后由 chungbin 于 2025-12-11 17:09 编辑

# [已开源] SciterUI模块 V1.0 - 让易语言用上 HTML/CSS/JS 开发现代化界面 (支持双向交互/GPU加速)

源码地址：[开源] SciterUI模块 V1.0 - 让易语言用上 HTML/CSS/JS 开发现代化...
https://bbs.ijingyi.com/forum.php?mod=viewthread&tid=14869170
(出处: 精易论坛)

**软件名称**：SciterUI 模块
**软件版本**：V1.0
**编译环境**：易语言 5.93 / Visual Studio 2026 (DLL)
**开源协议**：MIT / Sciter License

---

前言
还在为易语言原生界面丑陋、ExDui/ExUi 学习成本高而烦恼吗？
**Sciter** 是一个轻量级、可嵌入的 HTML/CSS/脚本引擎，专为桌面 UI 设计。它支持 GPU 加速，渲染速度极快，且体积小巧（老版本DLL 仅几 MB，新版本也才 10 几 MB）。
本模块通过封装 `SciterWrapper.dll`，解决了易语言无法直接调用 Sciter 复杂函数指针的问题，让易语言也能轻松使用 Web 前端技术开发界面！

部分界面预览

核心功能 (V1.0)

1.  **极速渲染**：基于 Sciter.JS 引擎，支持 ES6、CSS3、Flex/Grid 布局，GPU 硬件加速。
2.  **双向交互**：
* **易语言 -> JS**：支持调用 JS 函数，获取返回值（支持整数、小数、文本）。
* **JS -> 易语言**：支持注册回调函数，JS 中直接调用 `__eplCall('函数名', 参数...)` 触发易语言子程序。
3.  **无边框窗口**：内置完美的无边框窗口方案，支持拖拽移动、八方向缩放、最大化/还原动画，无需处理复杂的 Windows 消息。
4.  **DOM 操作**：提供丰富的 API 操作 HTML 元素（获取/设置属性、样式、文本、显示/隐藏等）。
5.  **中文友好**：底层自动处理 ANSI (GBK) 与 Unicode (UTF-16) 转换，易语言端直接操作文本，无需乱码烦恼。
6.  **调试支持**：支持连接 Sciter Inspector 进行类似 Chrome 开发者工具的 UI 调试。

###  更新日志 (V1.0)
* [新增] 完整的 JS 回调机制 (`Sciter_注册回调`)，修复了参数传递的类型错误。
* [新增] `Sciter_取参数文本` 等辅助命令，方便在回调中解析 JS 传来的参数。
* [优化] 修复了 DLL 导出函数名修饰问题，调用更稳定。
* [优化] 增加 `Sciter_快速创建应用` 命令，一行代码启动 UI。

代码演示

1. 易语言端代码
```e

窗口程序集名	保留	保留	备注
窗口程序集_启动窗口
变量名	类型	数组	备注
hWindow	整数型

子程序名	返回值类型	公开	备注
_启动子程序	整数型		请在模块中引用 SciterUI模块

' 1. 初始化引擎
Sciter_初始化 ()
' 2. 创建无边框窗口 (1024x600)
hWindow ＝ Sciter_创建无边框窗口 (1024, 600)

' 3. 注册 JS 回调 (让 JS 能调用易语言)
Sciter_注册回调 (&JS回调处理, hWindow)
' 4. 加载 UI 文件
Sciter_加载HTML文件 (hWindow, 取运行目录 () ＋ "\ui\index.html")
' 5. 显示并运行
Sciter_显示窗口 (hWindow)
Sciter_运行 ()

返回 (0)

子程序名	返回值类型	公开	备注
JS回调处理	逻辑型
参数名	类型	参考	可空	数组	备注
方法名	文本型
参数个数	整数型
参数数组	整数型
返回值	整数型

变量名	类型	静态	数组	备注
msg	文本型

' JS 调用示例: Window.this.xcall("msgbox", "Hello from JS!");

如果真 (方法名＝ "msgbox")

msg ＝ Sciter_取参数文本 (参数数组, 0)

信息框 ("JS 传来的消息: " ＋ msg, 0, "提示")

返回 (真)

```

2. HTML/JS 端代码
```html

[HTML] 纯文本查看 复制代码

<html>
<head>
    <style>
        body { margin: 0; background: #333; color: #fff; font-family: "Microsoft YaHei"; }
        .header { height: 30px; background: #222; flow: horizontal; vertical-align: middle; padding: 0 10px; }
        button { behavior: clickable; cursor: pointer; }
    </style>
    <script>
        // 绑定按钮点击事件
        document.on("click", "#btn-test", function() {
            // 调用易语言函数
            Window.this.xcall("msgbox", "我是网页中的按钮！");
        });
    </script>
</head>
<body>
    <div class="header" role="window-caption">
        <div>Sciter UI 演示</div>
    </div>
    <div style="padding: 20px;">
        <h1>Hello Sciter!</h1>
        <button id="btn-test">点击在易语言中处理</button>
    </div>
</body>
</html>

```

必须文件
1.  `SciterUI模块V1.0.ec` - 易语言模块
2.  `SciterWrapper.dll` - 接口封装库【已开源】
3.  `sciter.dll` - 官方引擎文件【未打包，可在官网下载】

下载地址

游客，如果您要查看本帖隐藏内容请回复

源码下载地址：

游客，如果您要查看本帖隐藏内容请回复

所需的必须文件：

游客，如果您要查看本帖隐藏内容请回复

点击链接加入群聊【SciterUI讨论学习群】：https://qm.qq.com/q/5qkP3rEb4I

**致谢**：感谢 Sciter 作者 Andrew Fedoniouk 提供如此优秀的引擎。
**声明**：本模块完全开源，欢迎大佬们一起完善！

补充内容 (2025-12-13 09:49):
SciterUI模块 V1.1 - 支持透明异形窗口！
https://bbs.ijingyi.com/forum.php?mod=viewthread&tid=14869222
(出处: 精易论坛)

zjy880224 · 发表于昨天 04:14

感谢分享

445194820 · 发表于 6 天前

感谢分享

chungbin · 发表于 6 天前

hsvs4 发表于 2025-12-18 10:45
终于来了之前K大弄过不过他不更新了等了好几年

我就是自己想用结果论坛没有，也只搜到一个稍微很简陋的演示的旧版的，所以我自己弄了这个

year1970 · 发表于 6 天前

感谢分享

hsvs4 · 发表于 7 天前

终于来了之前K大弄过不过他不更新了等了好几年

易父 · 发表于 2025-12-12 20:45:21

这个太强了，必须感谢，学习

ziv8 · 发表于 2025-12-12 20:34:43

好东西啊，谢谢楼主分享

勉勉 · 发表于 2025-12-12 18:46:03

感谢分享~~~~~~

鱼雨遇玉羽 · 发表于 2025-12-12 17:15:53

感谢分享

		自动登录	找回密码
密码			注册

[易语言成品模块] SciterUI模块 V1.0 - 让易语言用上 HTML/CSS/JS 开发现代化界面

点评

评分

本帖被以下淘专辑推荐:

浏览过的版块