wll8 / sys-shim Goto Github PK

View Code? Open in Web Editor NEW

126.0 5.0 11.0 336 KB

使用前端语言快速实现桌面程序。

Home Page: https://wll8.github.io/sys-shim-doc/

JavaScript 87.36% HTML 11.14% Vue 1.50%

sys-shim's Introduction

配置文档 | API | 交互式文档 | 示例

简单的使用前端语言即可快速开发桌面程序，占用内存和程序体积都很不足 1M。

为什么

我想开发一个简单的桌面程序，只使用前端语言开发，暂只考虑在 windows 上运行，我希望开发体验像在浏览器中一样，然后程序的样子像是本地应用一样，调用本地文件、系统命令、后台运行、托盘菜单这些都没有问题。

我调研了一些常见的方案，发现他们都不适合我，所以我开发了适合自己的 xxxx 。

如何使用

下载 main 文件打开，编辑生成的 page.html 文件。更多功能请查阅文档和示例。

方案对比

名称	前端	后端	体积 MB	内存 MB	放弃原因	官网	备注
?	?	?	?	?	?	?
nodegui	chromium	nodejs	100	100	体积大	https://github.com/nodegui/nodegui
miniblink49	Chromium	nodejs	?	?	体积大	https://github.com/weolar/miniblink49	仅支持 window
NW.js	Chromium	nodejs	100	100	体积大	https://github.com/nwjs/nw.js
electron	Chromium	nodejs	100	100	体积大	https://github.com/electron/electron
Wails	webview	go	8M	?	需其他语言	https://wails.io/
Tauri	webview	rust	1	?	需其他语言	https://github.com/tauri-apps/tauri
Qt	可选	C++	30	?	需其他语言	https://sciter.com/
wpf	可选	C#	?	?	需其他语言	https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/	仅支持 window
Muon	Chromium	go	42	26	需其他语言	https://github.com/ImVexed/muon
Sciter	Sciter	QuickJS	5	?	与普通浏览器和 nodejs 可能有差异	https://quark.sciter.com/
gluon	浏览器	nodejs	1	80	生态小，例如没有找到托盘图标实现方式	https://github.com/gluon-framework/gluon
neutralino	浏览器	API	2M	60	没有 nodejs 生态	https://github.com/neutralinojs/neutralinojs
xxxx	WebView2/浏览器	api/nodejs	1	1	?	https://github.com/wll8/sys-shim	仅支持 window

更多相关框架请参考: https://github.com/sudhakar3697/awesome-electron-alternatives
三方对比: https://github.com/Elanis/web-to-desktop-framework-comparison

我的选择

实现方式请参考：electron 和 tauri 都不想用，那就自己写个想用的吧。

渲染

可以从程序配置中显示声明是使用浏览器还是 webview。

WebView2
- 支持 Win7,Win8,Win10,Win11+。
- 没有 WebView2 控件的系统会自动安装。
- winin10 1803 以及之后的系统微软早已自动推送 WebView2。版本小于 1803 的 Win10 很罕见可以忽略不计。
- Win11 已自带 WebView2。
- 如果 WebView2 安装失败，自动回退到 WebView1，WebView1 是 Win10 1803+/Win11 自带的控件。
- 如果 WebView2 和 WebView1 都不可用，会自动回退到浏览器方案。
浏览器
使用系统上已安装的 Chromium 内核浏览器（例如 edge、2345、360）来渲染页面，如果未安装，会自动安装 Edge。

后端

api
默认提供常见的操作接口。例如文件、网络、系统、进程、鼠标、键盘、窗口等。
nodejs
你也可以选择添加 nodejs 来进行文件、进程等所有生态的所有操作。
service
若你的程序需要后台静默运行、自启动等，可以添加此控件。

体积内存

根据上面的分析可见，如果你只需要使用前端语言来写界面，能与系统进行基本的交互，通常情况下程序体积在 1MB 左右。

sys-shim's People

Contributors

Stargazers

Watchers

Forkers

seonghookim gtiger666 mengerwei521 wz-fork huzhiyu github-ljrong qq619433305 lkjh3214 liuguoxiang shzhbook daiem

sys-shim's Issues

Win10 异常

环境

版本 Windows 10 专业版
版本号 21H2
安装日期 ‎2022/‎7/‎5
操作系统内部版本 19044.3086
体验 Windows Feature Experience Pack 1000.19041.1000.0

操作流程

下载 release 中的 page.html 和 main.exe

运行 main.exe，自动安装了 webview2，然后窗口消失，再次运行，只存在于后台，看不见任何表现

下载 win12.exe，运行，无任何表现

下载 win11.exe，运行，无任何表现

删除 main.exe 及 page.html，运行 win12,win11 依旧无任何表现

重新下载 main.exe，无任何表现，也没有自动创建 page.html

ws.call('run')如何回调？

例如process.popen执行cmd命令，无法获返回值

Request：来个react版本

楼主威武，可以来个react版本的么

fix: ws.call 传参体积优化

在 web 页面中（在 nodejs 中正常），传送过大参数会 main.exe 控制台抛出以下异常：

RAW CALLBACK ERROR:

{Attempt to}:concatenate
{Type}:buffe

开发环境下报错：

RAW CALLBACK ERROR:
文件:...5.69.2\aardio_v35.69.2\lib\win\ui\_.aardio
错误行号:#280
不支持此操作:concatenate
类型:buffer
---------------------------------------------------
调用栈:
        [kernel]: in function 'error'
        ...69.2\lib\win\ui\ctrl\metaProperty\_.aardio:303: in function 'wndproc__'
        ...5.69.2\aardio_v35.69.2\lib\win\ui\_.aardio:280: in function <...5.69.2\aardio_v35.69.2\lib\win\ui\_.aardio:278>
        [kernel]: in function 'messageTranslateDispatch'
        ..._v35.69.2\aardio_v35.69.2\lib\win\_.aardio:557: in function 'parseMessage'
        ..._v35.69.2\aardio_v35.69.2\lib\win\_.aardio:593: in function 'loopMessage'
        [string "import win.ui;..."]:69: in main chunk

以下是重现代码：

const arg = `x`.repeat(9e5)
const res = await ws.call(
  `run`,
  [
    `
    console.log(1)
    return ...
    `,
    arg
  ],
)
console.log(111, res)

运行以下代码，在 nodejs 中发送消息正常，然后切换到 webview 中连接上相同的 wsUrl 发送相同的消息，如果消息超过 9e5 则报错：

import win.ui;

var winform = win.form(text="ws/JSON-RPC 服务端与Node.js交互的例子")
winform.add(
txtMessage={cls="edit"}
)

import web.socket.server;
var wsrv = web.socket.server();

import web.socket.jsonServer;
var rpcServer = web.socket.jsonServer(wsrv);

wsrv.onUpgradeToWebsocket = function(hSocket,request,response,protocol,origin){    
    return rpcServer.start(hSocket);
}

rpcServer.external = {
    run = function(code, ... ) {
        var arg = ...
	var res = null
        var err = false
        try {
            res = loadcode(code)(arg)
        }
        catch (e) {
            err = tostring(e);
        }
        return {
            err;
            res;
        }
    }
} 

wsrv.start("0.0.0.0", "9988");
wsUrl =  wsrv.getUrl()
import console
console.log(wsUrl)

import nodeJs;
nodeJs.startEnviron(
	wsUrl = wsUrl;
)
 
var js = /*** 
var startEnviron = require('startEnviron');
var WebSocket = require('rpc-websockets').Client;
var ws = new WebSocket(startEnviron.wsUrl)
ws.on('open', function() {
  ws.call('run', [`
  	import console
  	arg = ...
  	console.log("aar", #arg)
  	return arg
  `, 'x'.repeat(9e6)]).then(result=> {
  	console.log("node", result[1].length)
  })
})
***/

nodeJs.prequireByJs(winform.txtMessage,js);

var node = nodeJs.execLimit(js); 

node.logResponse(winform.txtMessage);
 
winform.show(); 
win.loopMessage();