用 Node+Web 开发桌面应用非常方便,可是 Electron 太大了,一些小工具用 Electron 包一下有点牛刀杀鸡的感觉。
我经常用 Electron 写一些自己用的小工具(比如魔兽世界里的“辅助”小工具,逃……),所以就想,能不能利用 VS Code 的 runtime 运行这些小工具呢?经过两天的折腾,答案是能!
我写了个 VS Code 扩展来提供这样的小工具的运行平台:https://marketplace.visualstudio.com/items?itemName=sneezry.vscode-toolkit
安装好了之后,在 VS Code 左下角就能看见一个绿色的烧瓶:
点击那个烧瓶,你就能打开一个 Launcher (中文翻译成启动器?)。一个叫 Installer 的应用已经被预安装了,点那个安装器,选择一个 tka 文件就能安装了。这里有个我写好的 tka 的示例应用: https://github.com/Sneezry/cpu.tka/releases
安装好之后就能在 Launcher 里看到它了:
点击启动就能实时看到本机 CPU 的使用率:
编写一个这样的 app 非常简单,重点就是 Node 和 Web 之间怎么通讯。
首先创建 package.json,在里面分别定义displayName
、icon
、main
和view
。displayName
就是启动器里显示的 app 的名字,icon
是 app 图标的路径,main
是 app 启动文件入口,比如index.js
, view
是 web 的根目录路径,里面的index.html
会在 app 启动的时候打开作为界面。
启动文件入口需要定义main
函数,并且 export 出去,在 app 启动的时候启动器会去执行那个函数,同时把 web 的 context 传进去:
exports.main = function(webview) {
// do someting
}
如果想在 Node 端向 Web 端发送数据,就调用 webview 的 send 方法:
exports.main = function(webview) {
webview.send('hello');
}
然后在 web 端用messager
函数来接收这个数据:
function messager(data) {
console.log(data) //hello
}
Web 端接收数据的函数必须叫messager
。
如果在 Web 端想调用 Node 端的函数,首先将 Node 的函数 export 出来:
exports.foo = function() {
return 'blabla';
}
然后在 Web 端使用内置的NodeJS
对象调用:
const data = await NodeJS.foo(); //blabla
无论你在 Node 里是怎么定义函数的,Web 端调用的时候那个函数总是异步的,所以要加 await。
总结下数据流:
+--------------+ +--------------------+
| Node | | Web |
| | | |
| webview.send ----------------------> messager(data) |
| | | |
| exports.foo <---------------------- await NodeJS.foo() |
| | | |
+--------------+ +--------------------+
最后用 zip 打包,改后缀名为 tka 就行了。
你也可以在 app 里添加 node module。
1
johnnyNg 2019-05-27 16:55:02 +08:00
有点厉害了,但是我不是很理解基于你的小平台写插件相比直接写成 vscode 的插件有什么优势吗?
|
2
sneezry OP @johnnyNg vscode 插件重点是辅助编辑器的,很多 api 都是和编辑器本身相结合。但是这种比较通用的简单的小玩意反而不容易用 vscode 扩展原生的方法做,webview 的通信就非常繁琐。我把这块包起来了,只暴露出了很少的接口进行通信,然后 web 和 node 相对独立,开发起来更方便。不过这个也完全就是利用 vscode 的 runtime 了,和 vscode 本身的功能没半点关系,所以和 vscode 插件不算冲突。
|
3
tf2017 2019-05-28 20:32:14 +08:00
赞一个
|
4
wuethan 2019-05-29 01:14:50 +08:00
https://github.com/wuethan/NetCoreWebAPP 全平台通用的 GUI 解决方案了解一下
|
5
shern 2019-05-29 09:45:13 +08:00
赞,不过我更好奇 Electron 怎么做魔兽世界里的“辅助”小工具
|
7
yutou527 2019-05-29 15:32:08 +08:00
不错
|
8
yutou527 2019-05-29 16:06:00 +08:00
没有 uninstaller 吗 写了个报错的不知道咋删除 😂
|
9
sneezry OP @yutou527 ~/.vscode-toolkit,都在这下边呢,哈哈。这两天把版本管理和卸载加上去。昨天写了个应用广场
|
11
anmie 2019-05-30 08:53:25 +08:00
战术插眼
|
13
zzetao 2019-06-01 11:10:22 +08:00
想法不错,VS Code 平台的 「小程序」
|