soui4js 开发帮助文档

一、概述

soui4js 是 soui4 与 quickjs 的结合,将 soui4 的开发语言从 C++ 迁移到 js,旨在实现快速开发、方便热更新。其源代码托管于GitHub

二、代码结构

depends:包含项目依赖的 soui4 和 quickjs 的.h、.lib、.a 文件。

doc:文档目录,当前仅有截图。

node_modules/@types:为 vscode 编写 soui4js 的 js 代码提供 api 提示的 ts 文件,定义了 soui4 导出到 js 空间的所有 API。

qjsbind:将 soui4 类型导出到 js 的绑定支持库,编译为静态库。

soui4js-host:编译生成使用 soui4 及 soui4js 的宿主 exe 的 vs 工程目录。

soui4js:导出 soui4 接口到 quickjs 的代码,可查看在 soui4js 中可用的 api 及其实现与使用方法。

utils:提供辅助工具 api 的 VS 工程,编译后生成 utils.dll,可在 js 代码中通过import * as utils from "utils.dll";使用。

wizard:soui4js 的向导程序。

三、开发流程

(一)创建工程

执行 soui4js-host, 在app列表中选择soui4js-wizard,启动新建工程向导,在指定路径创建工程框架,安装 vscode 时会自动打开工程。

(二)代码编辑与运行

工程生成后包含 soui 资源包和 main.js。运行程序需在 vscode 安装 quickjs-debug 插件,向导已自动配置 launch.json,可通过 vscode 菜单中的 "Run/Start Debugging" 或 "Run/Run Without Debugging" 启动 soui4js-host.exe 加载测试工程。

(三)代码结构分析

main.js 的对象

g_workDir:全局变量,标识程序运行路径。

MainDialog:继承自 soui4.JsHostWnd 的主界面窗口。

main:main.js 的入口函数,负责创建 soui 资源包、管理资源、创建并显示窗口、运行消息循环及退出程序。需在函数后添加globalThis.main = main,以便 soui4js-host 找到并执行。

MainDialog 的方法

constructor:传递布局文件资源 ID 给基类 soui4.JsHostWnd,并指定使用 onEvent 方法处理窗口事件。

onEvent:通过事件对象 e 的 GetID 方法识别事件,处理 soui4.EVT_INIT(界面元素创建完成)和 soui4.EVT_EXIT(窗口退出前)事件,分别调用 init 和 uninit 方法。

init:使用 soui4.FindIChildByName 找到按钮,将其点击事件(soui4.EVT_CMD)与 onBtnTest 方法关联。

uninit:目前仅打印日志。

onBtnTest:调用 soui4.SMessageBox 显示 msgbox。

(四)代码调试

借助 quickjs 的调试支持和 vscode 的 quickjs debugger 插件,可在代码行设置断点调试。调试时能查看程序调用栈、局部及全局变量的值,但调试功能尚不完善,部分操作可能导致 host 崩溃,不过能满足一般调试需求。

四、功能扩展

(一)使用 C/C++ 开发扩展模块

JS 代码需依赖扩展模块调用系统 API。如 utils 模块,编译生成 utils.dll,导出 js_init_module 和 js_uninit_module 方法。前者在 quickjs 加载扩展模块时调用,用于匹配 qjsbind::Context 对象并导出 C++ 方法到 JS;后者在 quickjs 释放 module 时调用,用于释放相关对象防止内存泄漏。通过module->ExportFunc方法可方便地将 C++ 函数导出到 JS,如module->ExportFunc("Md5", &Md5);

(二)定义窗口类与响应事件

定义窗口类:soui4js 中可使用 soui4.JsHostWnd 和 soui4.JsHostDialog 创建窗口,若无需处理事件,可直接创建;若需处理事件,可继承相关类并接管事件处理流程。

响应事件:类似 C++,js 中可通过在构造函数中指定事件处理方法、在事件处理函数中根据事件 ID 处理不同事件,还可使用 soui4.SConnect 方法订阅窗口事件。

(三)使用扩展控件

soui4js 推荐用 C++ 扩展控件,实现后注册到 soui 系统。扩展模块需导出注册和注销控件的方法到 js,在 main 函数中调用以在 xml 中使用扩展控件。

五、参考资料

完整代码示例:soui4js-app

各篇博客原文: