首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
宝塔
V2EX  ›  分享创造

VS Code 平台上运行 Node+Web 应用

  •  
  •   sneezry · 174 天前 · 1795 次点击
    这是一个创建于 174 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用 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,在里面分别定义displayNameiconmainviewdisplayName就是启动器里显示的 app 的名字,icon是 app 图标的路径,main是 app 启动文件入口,比如index.jsview是 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。

    例子: https://github.com/Sneezry/cpu.tka

    13 回复  |  直到 2019-06-01 11:10:22 +08:00
        1
    johnnyNg   174 天前
    有点厉害了,但是我不是很理解基于你的小平台写插件相比直接写成 vscode 的插件有什么优势吗?
        2
    sneezry   174 天前
    @johnnyNg vscode 插件重点是辅助编辑器的,很多 api 都是和编辑器本身相结合。但是这种比较通用的简单的小玩意反而不容易用 vscode 扩展原生的方法做,webview 的通信就非常繁琐。我把这块包起来了,只暴露出了很少的接口进行通信,然后 web 和 node 相对独立,开发起来更方便。不过这个也完全就是利用 vscode 的 runtime 了,和 vscode 本身的功能没半点关系,所以和 vscode 插件不算冲突。
        3
    tf2017   173 天前
    赞一个
        4
    wuethan   173 天前
    https://github.com/wuethan/NetCoreWebAPP 全平台通用的 GUI 解决方案了解一下
        5
    shern   173 天前
    赞,不过我更好奇 Electron 怎么做魔兽世界里的“辅助”小工具
        6
    sneezry   173 天前 via iPhone
    @shern 用一些 binary module 和一些简单的计算机视觉,哈哈
        7
    yutou527   172 天前
    不错
        8
    yutou527   172 天前
    没有 uninstaller 吗 写了个报错的不知道咋删除 😂
        9
    sneezry   172 天前 via iPhone   ♥ 1
    @yutou527 ~/.vscode-toolkit,都在这下边呢,哈哈。这两天把版本管理和卸载加上去。昨天写了个应用广场
        10
    sneezry   172 天前
    @yutou527 升级到 0.0.4 之后,长按图标就能看见卸载的按钮了
        11
    anmie   172 天前
    战术插眼
        12
    yutou527   172 天前
    @sneezry 👍
        13
    zzetao   170 天前
    想法不错,VS Code 平台的 「小程序」
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3935 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 544ms · UTC 04:02 · PVG 12:02 · LAX 20:02 · JFK 23:02
    ♥ Do have faith in what you're doing.