0


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

在这里插入图片描述

  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. 效果

进入project -> bin -> windows -> x64,执行project.exe就可以看到我们写的代码页面啦~
在这里插入图片描述

总结

Sciter本质上还是应用在桌面上的应用,因此很多会出现很多浏览器特性无法兼容的问题,其次Sciter目前对

CSS3和ES6

的兼容性也不太友好,也正是由于这些兼容性问题,它对现有的一些前端框架(vue、react等)的支持程度不高。而且在开发过程,调试不太方便,开发效率一整个降低。当然好处就是,很好地锻炼了我前端的基本功(基本全程用原生js)。看到这里啦,不妨点个赞呗~

标签: windows ui html

本文转载自: https://blog.csdn.net/Th_rob/article/details/128340636
版权归原作者 Ustinian007 所有, 如有侵权,请联系我们删除。

“Sciter基本应用说明”的评论:

还没有评论