分享
超级会员免费看
脑公公
心之所向，才能持之以恒
展开
-
【sciter】sciter数据可视化
【代码】【sciter】sciter数据可视化。原创 2023-02-25 08:33:35 · 468 阅读 · 0 评论 -
Sciter 结合 PReact 实现组件公共逻辑抽离
下面例子是获取鼠标移动位置，将这部分逻辑进行抽离。// Render 和 Props。// 去处理一些公共逻辑。// 去处理一些公共逻辑。// HOC 高阶组件。原创 2023-02-15 16:03:01 · 380 阅读 · 0 评论 -
【sciter】解决 在使用 \_\_DIR\_\_ 时出现 this://app/
很明显：__DIR__ 在打包成 exe应用时是不能被使用的。必须重新换一条API。现在要实现一个插件，去读取配置文件信息后，根据配置信息做出相关操作。但打包完成后，启动 .exe 程序时，却不能读取到。上述代码是可以正常，读取配置文件。查阅资料后：__DIR__查阅资料后：最终使用。原创 2023-02-02 19:20:25 · 204 阅读 · 0 评论 -
【sciter 】sciter 读取.ini 配置文件
【代码】【sciter 】sciter 读取.ini 配置文件。原创 2023-02-02 19:18:29 · 95 阅读 · 0 评论 -
【Sciter】Sciter 结合 Preact 封装 图片查看器总结
iflookimgsrc'图片地址（必须为绝对路径）'elselog'初始化失败，错误信息为：';原创 2023-02-01 19:55:50 · 240 阅读 · 0 评论 -
【sciter】：JSX 组件实现数据持久化
组件数据持久化指的是：重新加载组件后，能否将重新加载前组件所存在的数据，在重新加载后数据依旧保存在组件中。组件数据持久化实现原理：将每次更新组件数据同步到 Storage 中。并且监听组件重新加载（刷新），下诉案例是使用 JSX + Stroage 实现一个日志列表。原创 2023-01-05 20:04:52 · 146 阅读 · 0 评论 -
【sciter】：JSX组件间事件的通信
1、向 窗口层（Window）发布事件Window.post(new Event("自定义事件名称", { data: '你的数据' }));发布事件document.onGlobalEvent("自定义事件名称", evt => { });订阅事件事件的订阅与发布是面向所有窗口的，只要其他窗口订阅了该自定义事件就会触发2、 向 Document 层 发布事件document.postEvent(new Event("自定义事件名称", { data: '你的数据' } }));发布事件。原创 2023-01-03 14:06:57 · 313 阅读 · 1 评论 -
【sciter】案例 TodoList 带你入门 sciter 组件化编程
以下 CSS代码 为 TodoList 的 CSS 样式，可以结合 TodoList 中 render() 渲染方法中的 DOM 结构。下诉案例已基本覆盖 sciter 组件化编程所涉及到的内容，及注意细节。原创 2022-12-31 08:57:51 · 517 阅读 · 4 评论 -
【sciter】安全应用列表控件总结
【sciter】安全应用列表控件总结原创 2022-12-04 09:13:12 · 494 阅读 · 0 评论 -
【sciter】sciter 拖拽过程总结
读取文件信息通过路径读取文件信息前，需要将路径前的，去除掉。并为了避免中文路径出现乱码，需要对路径进行编码。sciter 中 DOM 拖拽官方案例其原理是：将被拖拽的元素生成图片，并将图片设置到鼠标上其原理：通过鼠标移动获取到鼠标的坐标，在通过定位实现元素的拖拽，进入目标元素，则通过获取目标元素的位置，鼠标移动时，实时计算是否进入到目标元素。需要注意的地方是，容器出现滚动条时，需要将其滚动距离计算到其中。原创 2022-11-21 19:39:33 · 535 阅读 · 0 评论 -
【sciter】封装穿梭器组件总结
以下穿梭器组件分为两种，一种是树形结构穿梭器，另外一种是列表结构穿梭器。最终实现的效果：调用方可以通过抛出方法，对组件进行初始化，配置参数。组件根据参数生成相关组件。穿梭器实现的功能点对数据项进行操作增加：点击增加按钮，可以从左容器中获取到被选中的数据项，并将其添加到右容器中。此时左容器中的数据项为禁止状态删除：点击删除按钮，可以从右容器中获取到被选中的数据项，并将其添加到左容器中。此时左容器中的数据项后根据右容器传递过来的数据项进行匹配解除禁止状态。原创 2022-09-22 20:01:01 · 389 阅读 · 0 评论 -
【sciter】组件封装总结
1、如何确保样式不发生覆盖由于组件封装使用的是原生能力(html,css,js)。因此在使用类名时添加一个前缀码(shuttle)。}2、如何确保一个页面中使用多个一样的组件时组件不发生冲突场景引入：在某些情况下，更新数据，将数据显示在页面中，需要手动去生成DOM元素往页面添加。（虽然可以使用），但这有缺点，后面会在细讲。在渲染DOM时，需要绑定事件对象，这里就引出一个问题 this 指向的问题。处理不好就会出现this指向出现两种不同的情况（指向事件本身或组件本身），这里后面也会细讲。原创 2022-09-20 19:16:26 · 268 阅读 · 0 评论 -
【sciter】 组件化编程解决事件冒泡不生效
"通过原生dom生成"原创 2022-09-13 19:53:05 · 191 阅读 · 0 评论 -
【sciter】:窗口通信
原理使用管道流的方式进行数据传送。原创 2022-07-20 19:42:08 · 171 阅读 · 2 评论 -
应用打包及多端兼容总结
在window打包好Mac以及Linux后，在window中测试没有太大问题。在window系统中打包支持其他系统的应用，打包不成功。重启一下打包工具，此时就可以在window中打包其它系统的应用。，在window以及Mac是支持的。主要问题出现在Linux、Mac。第一个问题Linux和Mac。修改位置assemble方法。第二个问题Linux和Mac。第三个问题Linux。第四个问题Linux。第五个问题Linux。...原创 2022-07-14 19:38:12 · 309 阅读 · 0 评论 -
【sciter Bug篇】多行隐藏
分析总结：1、前者将字符串当成了一个单词，导致 sciter 并不会出现换行。并且这种情况在网页也会出现，属于正常情况。2、但在 sciter 中更为特殊的是一连串使用中文时，同样也会出现前者的情况。而在网页中是不会出现该问题的。在 sciter 中：相比较于英文字符，中文字符会出现省略号，而英文是直接全部字符展示出来，并不会出现省略号在网页中：...原创 2022-07-04 19:45:18 · 139 阅读 · 0 评论 -
【sciter】: 基于 sciter 封装通知栏组件
方案一：原本是每创建一条通知即创建一个window窗口，但通过测试发现：关键代码：注意细节：方案二：使用 dom 来代替 window 窗口，并将其定位到屏幕右下角关键代码：注意细节：两者比较：综上：目前该组件使用的是方案二。将 tools 文件夹存放在项目根路径在main.htm文件中分别导入 tools 的及......原创 2022-07-04 19:49:37 · 204 阅读 · 0 评论 -
【sciter】: sciter-fs模块扫描文件API的使用及其注意细节
#异步API#需要注意的地方1、使用同步扫描API1.1 如果该路径下的文件数或者目录数过多时，由于是同步扫描，会导致sciter此时占用大量CPU资源去扫描，进而会出现窗口卡死，或者闪退。1.2 解决方法使用异步扫描2、使用异步扫描API 时2.1 如果当前扫描的目录中文件数或者目录数过多，在执行遍历（for）时，速度会很慢。导致调用方通过控制台输出数据时，会造成错觉以为没扫出文件。但实际上是有在执行，并且相比较同步扫描，最大的优势是：不会卡死。如果怕等待该目录全部数据扫描完毕再执行下一步操作（原创 2022-06-24 15:58:06 · 153 阅读 · 0 评论 -
[sciter]:sciter如何使用i18实现桌面应用多语言切换及其利弊
使用，语言文件 langs/en.js语言文件 langs/zh.js# 页面 app.htm#使用 iframe 加载 i18 及 页面#sciter使用i8不足的地方在加载语言文件时，是全部重新加载文件，并不会单独加载语言文件。进而可能会导致一些数据丢失。解决办法：（1）将一些变量保存在全局变量中（窗口），只要窗口不关闭，该变量一直存在（2）对于一些比较复杂的数据结构可以使用storage，类似于浏览器中的，。但根据sdk所给的案例，运行会出现报错的情况。综上：以上只能解决数据原创 2022-06-24 15:15:37 · 240 阅读 · 0 评论 -
【sciter】原生js封装一条实时加载数据的滚动条
原生js封装一条实时加载的滚动条原创 2022-06-03 08:59:59 · 240 阅读 · 1 评论 -
sciter路由
# 路由Asideclass Aside extends Element { asideId; list; constructor(props) { super(); this.asideId = props.asideId; this.list = props.list; this.navigateto = props.navigateto; } render() { return原创 2022-05-17 19:42:54 · 158 阅读 · 4 评论 -
sciter滚动触底加载数据
<table id="#table"> <thead><thead> <!-- this 是组件 --> <tbody onscroll={this.scroll}></tbody></table>function scroll() { timerId && clearInterval(timerId); timerId = setTimeout(() => {原创 2022-05-13 09:02:14 · 101 阅读 · 0 评论 -
sciter组件更新与事件绑定
组件更新方法一：给组件绑定 key 值，当执行render() 方法时，产生一个随机数，使其更新class App extrend Element { render() { return <List key={Math.random()} /> }}只要 key 改变，组件 List中的所有元素（组件的组件）都会更新，并且组件中 css文件会重新加载原生 DOM 元素也可以绑定 key 值，使其元素下的所有元素更新方法二：通过 this.com原创 2022-05-13 09:01:22 · 200 阅读 · 0 评论 -
sciter实现异步扫描系统文件信息
APIimport * as sys from "@sys";// 读取 parentPath 目录下的信息let list = sys.fs.$readdir(parentPath);// 读取文件信息let info = sys.fs.$stat(parentPath + list[0].name);思路完善之前的设计思路有一个地方考虑的不是很充分，没有对异步任务的数量进行控制，导致一旦启动扫描任务，目录嵌套过深，会把整个sciter卡死掉。由此：封装了另外一个Limit类原创 2022-05-10 20:37:52 · 156 阅读 · 0 评论 -
sciter扫描文件设计思路
创建线程，加载线程文件功能点一：扫描文件初始化环境（1）接收到路径，并读取该路径下的文件（未判断是否为文件或目录），拼接绝对路径，再将其一次性压入路径栈（filestack）（2）启动定时器执行扫描文件启动扫描：步骤一：判断路径栈（filestack）是否为空，并且当前正在扫描的集合（fsSet）是否为空为空，清除扫描定时器（timerID），结束扫描不为空，进入步骤二步骤二：从路径栈中取出栈顶，读取该路径下信息若为文件：保存到全局文件数组（list）中若为目录：不做任何操作，结原创 2022-05-05 20:56:16 · 258 阅读 · 0 评论 -
sciter扫描文件设计思路及代码
扫描文件scanDir = ["C:/", "d:/"]步骤一：接收路径数组scanDir，遍历循环该数组// 读取该路径下的目录名称及类型let list = sys.fs.$readdir(path)步骤二：根据路径读取该路径下目录结构type为 1：文件则将其保存到全局数组中type为2：文件夹，如果需要扫描子目录，则拼接路径到变量 nextDir步骤三：当步骤一循环结束（代表目录的一层被循环结束），如果需要扫描子目录，清空上一层目录scanDir及重新设置遍历的下标curre原创 2022-05-05 20:54:15 · 250 阅读 · 0 评论 -
【sciter】:鼠标移动到字体图标时不变色
案例<html> <head> <style> @font-face { font-family: "iconfont"; src: url(./font_3277023_mz9rke2hlrd.ttf); } .iconfont { font-family: "iconfont" !imp原创 2022-04-01 18:50:14 · 287 阅读 · 0 评论 -
【sciter】：组件通信
组件通信父组件class App extends Element { constructor() { super(); this.navigate = (id) => { console.log("子组件传递过来的ID", id); } } render() { return <Aside aside={this.aside} navigateto={this.navigatet原创 2022-03-29 19:32:29 · 420 阅读 · 0 评论 -
【sciter】 jsx 组件化编程
sciter 组件编程入口文件：main.htm<html> <head> <style src="./css/style.css" /> <script type="module"> import {Aside} from "components/Aside.js" <!-- 全局组件 --> class App extends Elemen原创 2022-03-28 19:27:30 · 445 阅读 · 0 评论 -
入门嵌入式HTML/CSS/脚本引擎 sciter（问题篇）
sciter1、初始化打开页面时，无法指定高度解决方法：init() { // 设窗口的最小宽高 Window.this.minSize = [933, 635]; // 获取屏幕的宽高 let arr = Window.this.screenBox('workarea', 'dimension'); // 初始化窗口大小及居中设置 Window.this.move((arr[0] - 933)/2, (arr[1] - 635) /2, 933, 63原创 2022-03-24 21:53:38 · 776 阅读 · 0 评论 -
入门嵌入式HTML/CSS/脚本引擎 sciter
1、运行 index.htm<html> <head> <title>Document</title> <style> .container { width: 600px; height: 100px; margin: auto; border: 1px s原创 2022-03-21 19:39:18 · 1448 阅读 · 0 评论 -
【sciter】：sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库步骤一：选择要使用的图标，并添加到项目中（阿里矢量官网中的项目）步骤二（关键）：选中项目设置，在字体格式中选择TTF，其他不选，保存步骤三：点击 Font class，并生成代码，将代码复制到项目中。步骤三：修改代码需要将伪类选择器的单冒号改成双冒号.icon-shezhi:before { content: "\e61c";}/* 改成 */.icon-shezhi::before { content: "\e61c";}步骤四（关键原创 2022-03-27 12:20:05 · 323 阅读 · 0 评论