sciter.js的下载、demo和helloworld

1、下载官方SDK

Sciter.JS SDK官方地址、Sciter.JS SDK on GitLab
下载后解压

2、运行demo

打开根目录的run-calculator-sciter.bat脚本
sciter.js的下载、demo和helloworld_第1张图片

3、新建项目

文档:Sciter的HTML组件


  1. 创建文件夹hisc
  2. 将文件.\sciter-js-sdk-main\bin\windows\x32\scapp.exe复制到hisc文件夹
  3. 下载hello图标,png格式即可,重命名为icon.png,放入hisc文件夹
  4. hisc文件夹中新建index.htmlindex.csshello.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
            // 只识别+标签
            // 不识别标签
            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
        }
    }
    

4、运行项目

双击打开scapp.exe程序即可
sciter.js的下载、demo和helloworld_第2张图片



sciter.js的下载、demo和helloworld_第3张图片

你可能感兴趣的:(javascript,前端,html,sciter)