sciter.js 之cpp使用教程（1）

（一）前导

据搜索发现网上关于如何使用cpp创建HTML界面当作UI的库很少，在我的寻找之下发现一个超级小的嵌入式HTML UI库，但是此库由俄罗斯人开发，官方文档多数属于英文，要不然就是版本过于落后，于是此教程应运而生。

（二）下载sciter.js SDK、

首先访问 sciter下载页面直接点击⇓ Download Sciter.JS SDK 下载完成后将文件解压到任意目录，并保证有如下目录结构（如有任何目录问题，请对照修改，保证内部文件夹无任何不同以samples开头可忽略）：

CMD 复制代码

上级文件夹───sciter-js-sdk
    ├───bin
    ├───build
    ├───demos
    ├───demos.d2d
    ├───demos.lite
    ├───docs
    ├───include
    ├───quark
    ├───samples
    ├───samples.app
    ├───samples.barcode
    ├───samples.c
    ├───samples.charts
    ├───samples.css
    ├───samples.gpu
    ├───samples.reactor
    ├───samples.sciter
    ├───samples.storage
    ├───samples.sys
    ├───samples.webgl
    ├───sciter-sqlite
    ├───sciter-webview
    └───widgets

介绍一下各个文件夹：
bin：用于存放各个平台（linux,macosx,quark,windows）的各种工具和运行库。
build：用于存放各个平台（macosx,windows）使用Visual Studio IDE创建的cpp示例项目。
demos：用于存放bulid的源码。
docs：用于存放库的英文教程文件。
include：用于存放c语言的头文件。

（三）环境搭建

1.使用vs2022编程

由于题主未使用其他IDE创建sciter项目，所以只有此环境。

默认已经搭建好标准c/cpp语言编程环境，新建一个cpp空控制台项目，再新建一个源文件(如main.cpp),在源文件中写出标准cpp的main函数基本框架：

cpp 复制代码

int main(int argc, wchar* argv[]){
}

1、点击项目->XXX和属性->C/C++->常规,右侧找到附加包含目录点击编辑输入完整的include文件夹路径

2、点击项目->XXX和属性->清单工具->输入和输出，右侧找到DPI识别功能点击设置为高DPI识别

3、若你对sciter有点了解就知道resources.cpp这个文件（用于存放二进制的资源数据），若你需要使用该文件（该教程不使用）则需进行如下配置：点击项目->XXX和属性->生成事件->生成前事件，先找到在生成前使用改为是，再在右侧找到命令行点击编辑并填入（请注意替换中文处内容，资源文件夹在main.cpp文件处同级创建）：

CMD 复制代码

del "resources.cpp" & 上级文件夹\sciter-js-sdk\bin\windows\packfolder.exe 资源文件夹名 resources.cpp -v "resources"

此时环境搭建完成，这种搭建方法每次新建项目都需要重新搭建。于是在此给出便捷搭建教程：

1、复制如下内容：

props 复制代码

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <ImportGroup Label="PropertySheets" />
  <PropertyGroup Label="UserMacros" />
  <ItemDefinitionGroup>
    <ClCompile>
      <AdditionalIncludeDirectories>完整的`include`文件夹路径;%(AdditionalIncludeDirectories)</AdditionalIncludeDirectories>
    </ClCompile>
    <PreBuildEvent>
      <Command>del "resources.cpp"&amp;上级文件夹\sciter-js-sdk\bin\windows\packfolder.exe 资源文件夹名 resources.cpp -v "resources"</Command>
    </PreBuildEvent>
    <Manifest>
      <EnableDpiAwareness>true</EnableDpiAwareness>
    </Manifest>
    <Link>
      <SubSystem>Console</SubSystem>
    </Link>
  </ItemDefinitionGroup>
  <ItemGroup />
</Project>

2、在新项目的XXX.vcxproj同级文件夹中创建sciter_setting.props文件并粘贴上方文字（注意替换中文），然后使用vs2022打开新项目，点击视图->其他窗口->属性管理器，在打开的编辑框中找到项目，并点击展开文件夹（当前编译模式文件夹，请自行甄别编译模式，一般为Debug | X64），右键后点击添加现有属性表即可完成配置。

（四）"hello world！"项目创建

1、需要的文件：

"main.cpp"

cpp 复制代码

#include<sciter-x.h>
#include<sciter-x-window.hpp>

class frame : public sciter::window {
public:
	// 构造函数：初始化窗口，SW_MAIN表示这是主窗口；SW_ENABLE_DEBUG是调试模式
	frame() : window(SW_MAIN | SW_ENABLE_DEBUG) {}
};
int uimain(std::function<int()> run) {
	SciterSetOption(NULL, SCITER_SET_SCRIPT_RUNTIME_FEATURES,
		ALLOW_FILE_IO |        // 允许脚本进行文件IO操作
		ALLOW_SOCKET_IO |      // 允许脚本进行网络socket操作
		ALLOW_EVAL |           // 允许脚本使用eval函数
		ALLOW_SYSINFO);
	sciter::om::hasset<frame> pwin = new frame();
	const char* htmlContent = R"(
        <html>
        <head><title>Hello World!</title></head>
        <body style="background:#f0f0f0; text-align:center; padding:50px;">
            <h1>Hello World!</h1>
        </body>
        </html>
    )";

	// 2. 计算二进制长度（UTF-8字符串的字节长度= strlen结果）
	UINT htmlLen = static_cast<UINT>(strlen(htmlContent));

	// 3. 调用load_html加载：pb传字符串指针（强转为LPCBYTE），uri设为资源基准路径
	bool loadSuccess = pwin->load_html(
		reinterpret_cast<LPCBYTE>(htmlContent),  // 字符串转二进制指针
		htmlLen,                                  // 字节长度
		L"this://app/"                            // 基准URI，解决相对路径
	);
	pwin->expand();
	return run();
}

static std::vector<sciter::string> _argv;
int wmain(int argc, wchar* argv[]) {
	for (int n = 0; n < argc; ++n)
		_argv.push_back(argv[n]);
	sciter::application::start(argc, (const WCHAR**)argv);
	int r = uimain([]()->int {return sciter::application::run(); });
	sciter::application::shutdown();
	return r;
}
namespace sciter {
	namespace application {
		HINSTANCE hinstance(void) {
			return nullptr;
		}
	}
}

2、运行：

因为此项目未使用resources.cpp这个文件，所以如果配置了生成前事件，请将在生成前使用改为否，然后编译程序。显示报错，点击取消，然后将"上级文件夹\sciter-js-sdk\bin\windows\x64\sciter.dll"移动到项目输出目录下，即生成的EXE程序处。再次点击编译并运行即可看见窗口。

3、理解代码（请对照上方代码查看）

1和2行引入sciter关于windows的头文件，4行创建了一个继承自sciter::window的类frame，并在第7行的构造函数中使用window类构造窗口。

先跳过第9行的uimain()函数，看第39行，这里创建了一个字符串容器用于储存程序启动参数，当文件运行时，程序将执行第40行的wmain()函数（w指字符类型为宽字符），41和42行将启动参数传入容器，43行调用sciter::application::start()函数传递启动参数，并创建程序，44行调用uimain()自定义函数。并传入启动函数参数以启动窗口循环，45行用于结束窗口循环时正确释放程序。第47-53行创建代码空间，定义句柄返回函数为空（无需理解，设计需要）。

再看第9行，我们创建自定义函数uimain()（官方称此名称用于创建sciter程序，经尝试均可），第10-14行在配置sciter，自行看注释。然后我们在15行创建了窗口，此时窗口不会显示，第16-23行我们创建了主页的HTML代码字符串，并在第26行计算了长度，在第29行我们传入了主页面，36行我们调用了expand()函数用于循环显示窗口，并阻塞主程序。

（五）总结

当理解此文章后，你可以做到创建sciter.js程序，自由设计单页面应用。

启发自：
sciter官方cpp项目创建文档
 Sciter 6.0.1.0 重磅更新：sciter.js 中直接操作原生 C 模块支持正式登场