Sciter基本应用说明

前言

最近在学习阶段,要学习一款可以支持前端语言开发桌面程序的框架Sciter,因此来了解学习一下。

介绍

Sciter是一款可嵌入的 HTML/CSS/JavaScript 引擎，用于桌面UI开发。

Sciter Engine 是一个大小为 5+ Mb 的单个紧凑 DLL。使用它的应用程序比使用Electron或Qt构建的应用程序小10+倍。而分发的规模很重要。

官方文档：sciter – 用于桌面和移动应用程序的多平台 HTML/CSS/JavaScript UI 引擎

简单应用

1. 下载Sciter SDK,

官方下载：Download / sciter

2. 应用结构

基本的结构如下：

Sciter的bin目录下包含了各个平台系统的编译结果,我们可以打开一个来看一下效果。

点击进入sciter–js–sdk–main –bin -> windows -> x64，选择usciter.exe

可以看到sciter的应用界面，如下：

3. 如何使用

首先在自己电脑上创建一个文件夹project，在project下添加文件index.htm。打开index.htm，加入代码

注意：HTM与HTML没有本质意义的区别，只是为了满足磁盘操作系统（DOS）仅能识别三位文件名而已。因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l必须去掉。（因为html识别不了，只能识别htm）。

<html&gt;
	<body&gt;
		<h1&gt;Hello Sciter~</h1&gt;
	</body&gt;
</html&gt;

4. 导入到打开的应用程序中

打开我们刚刚启动的sciter win编译程序,导入index.htm，就可以看到界面啦。

5. 调试

打开DOM inspector，在这里面就可以看到文件的DOM结构，记得每次打开时要热更新重载一遍。

6. 打包

先下载图片打包工具ImageMagick – Download，下载 ImageMagick-7.0.11-14-portable-Q8-x64.zip，然后配置好环境变量，如下：

打开sciter–js–sdk–main -> bin -> quark -> windows下的应用程序打包器。

7. 效果

进入project -> bin -> windows -> x64，执行project.exe就可以看到我们写的代码页面啦~

总结

Sciter本质上还是应用在桌面上的应用，因此很多会出现很多浏览器特性无法兼容的问题，其次Sciter目前对CSS3和ES6的兼容性也不太友好，也正是由于这些兼容性问题，它对现有的一些前端框架(vue、react等)的支持程度不高。而且在开发过程，调试不太方便，开发效率一整个降低。当然好处就是，很好地锻炼了我前端的基本功（基本全程用原生js）。看到这里啦，不妨点个赞呗~

代码007普通

打赏 收藏 海报 链接