1、下载官方SDK
Sciter.JS SDK官方地址、Sciter.JS SDK on GitLab
下载后解压
2、运行demo
打开根目录的run-calculator-sciter.bat
脚本
3、新建项目
- 创建文件夹
hisc
- 将文件
.\sciter-js-sdk-main\bin\windows\x32\scapp.exe
复制到hisc
文件夹 - 下载hello图标,png格式即可,重命名为
icon.png
,放入hisc
文件夹 - 在
hisc
文件夹中新建index.html
、index.css
、hello.js
三个文件
index.html
<html window-icon="icon.png"> <head> <meta charset="UTF-8"> <title>标题</title> <style src="index.css" /> </head> <body> <hello message="Hello World" /> </body> </html>
index.css
hello { /* sciter可以读取prototype */ prototype: Hello url(hello.js); display: block; } hello:expanded>h1 { font-size: 30dip; } hello:collapsed>h1 { font-size: 10dip; } button { width: 20px; }
hello.js
export class Hello extends Element { componentDidMount() { var message = this.attributes["message"] || "?"; // sciter // 只识别<button.expand>+</button>标签 // 不识别<button.expand></button.expand>标签 this.content([<button.expand>+</button>, <button.collapse>-</button>, <h1>{ message}</h1>]); } ["on click at button.expand"]() { // note: ES2020 syntax this.state.expanded = true; // 'this' is the element of class Hello } ["on click at button.collapse"]() { // handles click events this.state.collapsed = true; // at button.collapse child } }