Sciter基本应用说明

Sciter基本应用说明Sciter 简单应用 初步搭建项目 sciter

大家好,欢迎来到IT知识分享网。

前言

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

介绍

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

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

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

简单应用

  1. 下载Sciter SDK,

官方下载:Download / sciter

在这里插入图片描述

  1. 应用结构

基本的结构如下:

在这里插入图片描述

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

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

在这里插入图片描述

可以看到sciter的应用界面,如下:

在这里插入图片描述

  1. 如何使用

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

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

<html> <body> <h1>Hello Sciter~</h1> </body> </html> 
  1. 导入到打开的应用程序中

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

在这里插入图片描述

在这里插入图片描述

  1. 调试

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

在这里插入图片描述

  1. 打包

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

在这里插入图片描述

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

在这里插入图片描述

  1. 效果

总结

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/122444.html

(0)
上一篇 2025-10-16 17:26
下一篇 2025-10-16 17:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信