V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xuexixuexi
V2EX  ›  Node.js

用 node-webkit 开发桌面程序怎么样?

  •  
  •   xuexixuexi · 2015-10-15 01:33:02 +08:00 · 9577 次点击
    这是一个创建于 3109 天前的主题,其中的信息可能已经有所发展或是发生改变。
    主要是 Windows 下的桌面,之前是用 MFC ,可以自画控件,用 node-webkit 要怎么自画控件,怎么响应消息?
    对多线程支持怎么样?
    31 条回复    2015-12-24 14:38:36 +08:00
    gzlock
        1
    gzlock  
       2015-10-15 02:41:23 +08:00   ❤️ 1
    node-webkit 已经改名叫 nw.js
    并且 nw.js 的 github 页面有列出一部分以 nw.js 制作的软件列表,你可以试用试用参考参考
    nw.js 的界面是由 html5+css3 网页组成的,实现出来的效果还是不错的
    多线程方面,无论是 webkit 端的 Worker ,还是 node 端的 child_process ,都够用了
    而且 node 端还可以使用 npm 的插件
    至于怎么响应消息这个不理解你说的是啥,就无法回答了
    oott123
        2
    oott123  
       2015-10-15 07:27:54 +08:00 via Android   ❤️ 1
    楼上说得比较到位。
    消息我理解你说的是 Win32 里的 Message ,用 nw.js 是做不到的。
    nw.js 是个跨平台的东西, Message 只在 win32 有…
    另外它可能和你熟知的 MFC 几乎完全不同。
    hkongm
        3
    hkongm  
       2015-10-15 08:47:28 +08:00   ❤️ 1
    现在都流行 Electron 了
    https://github.com/atom/electron
    imskull
        4
    imskull  
       2015-10-15 09:04:58 +08:00   ❤️ 1
    NW.JS v13 正在做重大改变,现在处于青黄不接的阶段。虽然很佩服它主要是国人开发的,但是目前阶段还是推荐你用 Electron 。
    aivier
        5
    aivier  
       2015-10-15 09:14:57 +08:00   ❤️ 1
    内部通讯用 IPC ,不过好像略麻烦,个人感觉客户端太肿了点,一个中小型应用套上框架直接变 100M
    ZackYang
        6
    ZackYang  
       2015-10-15 09:36:23 +08:00   ❤️ 1
    Electron +1
    xuexixuexi
        7
    xuexixuexi  
    OP
       2015-10-15 10:24:55 +08:00
    @gzlock @oott123 @hkongm @imskull @aivier @ZackYang
    我说的响应消息就是比如界面上按下一个按钮,就启动一个线程(线程应该是在 node 端?)完成一项任务,任务进行中更新界面的某个部分(比如进度条),完成后再更新界面的某个部分。这样一个消息响应过程。
    当然,这只是举个简单的例子,实际要实现的更复杂。另外用 nw.js 还是 Electron 都是相同的问题,它们之间的差别应该没有用 MFC 和用 node.js 之间的差别大。
    我现在就是眼馋网页型的开发能做出好看的界面,而且熟练后效率比用 VC 高,担心的就是最后发现做本地应用有迈不过的坎,另外我对跨平台要求不高,主要还是 Windows 下的应用。
    node-webkit 官网公布的那些项目我都浏览了一下,感觉就是界面很炫,但是并没有太多涉及底层的东西,编辑器类和图片类的比较多。
    最后问一下, nw.js 或者 Electron 有什么好的开发环境和学习资料吗?好调试吗?
    oott123
        8
    oott123  
       2015-10-15 10:39:06 +08:00 via Android   ❤️ 1
    好调试,开发环境和 Web 基本一样。
    但这玩意就不是给你做底层用的,如果你需要做底层开发,你可能需要给 node.js 写 c 扩展。
    kisnows
        9
    kisnows  
       2015-10-15 11:04:14 +08:00   ❤️ 1
    现在都用 Electron
    xymn
        10
    xymn  
       2015-10-15 11:38:04 +08:00   ❤️ 1
    天啦噜, js 真要一统江湖了啊
    taoche
        11
    taoche  
       2015-10-15 12:48:06 +08:00
    @kisnows @ZackYang @hkongm @imskull 请问, nw js 和 Electron 从实际的使用中对比,有什么差异嘛?
    sunhh
        12
    sunhh  
       2015-10-15 20:47:09 +08:00
    [南京] 招聘 NodeJs 工程师, 8-20k 不封顶, mail to:
    String.fromCharCode(115,117,110,104,104,64,106,117,120,105,109,97,111,46,99,111,109)
    imskull
        13
    imskull  
       2015-10-15 20:54:52 +08:00   ❤️ 2
    @xuexixuexi 你说的消息响应是 JS + HTML 开发的问题,和 nw.js 还是 Electron 无关。
    @taoche
    这两个差别用起来我感觉不是很大,因为底层都是基于 Chromium + node.js 的,我用了一天时间就把项目从 nw.js 改到 Electron 了。当然如果你用到和操作系统相关的本地调用多的话,他俩 API 接口不太一样,比如打开本地文件的对话框,可能需要多一些的时间移植。为了防止“本地应用有迈不过的坎”,你可能需要学会用 C/C++ 写 node.js 扩展。总的来说用它们都是为了跨平台吧,如果你项目不需要跨平台,咋就别折腾了,毕竟两个语言混到一块总有不爽的地方。
    sagnitude
        14
    sagnitude  
       2015-10-15 21:37:39 +08:00   ❤️ 1
    基于这个开发就完全是前端的风格了,不管是干什么,都是 js ,不需要你去管底层,底层是 Chromium 框架接管了。
    平时开发就完全是 js 环境了,按了一个按钮发生了什么是不用关心的,浏览器内核接管了,按按钮的处理也是由客户端 javascript 处理的,你如果想要按按钮去触发额外的 c++调用的话可能比较困难,需要自己接入 chromium 或者 nodejs 框架,然后自己编译一遍。
    taoche
        15
    taoche  
       2015-10-15 22:10:38 +08:00
    @imskull 谢谢你。 因为我们也要开始做 夸系统的桌面应用,所以在选型上像请教一下你们这样有实际经验的开发者。
    其实我想问的是 Electron 比 Nwjs 优秀在哪些方面。让很多人往 Electron 上迁移,或者一开始就选择 Electron
    taoche
        16
    taoche  
       2015-10-15 22:11:28 +08:00   ❤️ 1
    @imskull 比如查询了一些资料说 Electron 的中文支持并不是很好。
    imskull
        17
    imskull  
       2015-10-16 08:37:26 +08:00   ❤️ 1
    @taoche 我不是说 nw.js 功能不好,只不过它现在正在做大的版本改动,我用的时候发现很多文档都是针对老版本的,并且我估计这么大的改动到版本彻底稳定下来还需要一段时间,所以我也就改用 Electron 了。 Electron 的中文问题我没遇到过,准确的说我没做中文版的产品。
    xuexixuexi
        18
    xuexixuexi  
    OP
       2015-10-16 09:09:28 +08:00
    @xymn 此话怎讲?还需要观察
    有没有一个这样的例子,或者某个产品实现过这样的功能, nw.js 或者 Electron 的都行:
    调用一个 c 扩展 -> c 报告进度 -> 在界面上显示进度
    sagnitude
        19
    sagnitude  
       2015-10-16 10:40:10 +08:00   ❤️ 1
    @xuexixuexi 写一个 nodejs 的 c/c++扩展

    js 调用 nodejs->nodejs 调用扩展->扩展调用外部 c/c++程序->nodejs 获得返回值->js 获得返回值->用 js 更新页面
    最后一步需要 nw.js 或者 Electron 框架(在 html 页面内和 nodejs 交互)

    这是我猜的。。我只用过 CEF 。。
    AlphaTr
        20
    AlphaTr  
       2015-10-16 19:43:25 +08:00   ❤️ 1
    Electron (原来叫 atom shell ,就是 github 出的编辑器 atom 的框架) 和 node-webkit 都用过,个人感觉 Electron 开发的时候结构能清晰一些, node 和 浏览器端的 js 松耦合,和浏览器插件开发比较类似。
    xuexixuexi
        21
    xuexixuexi  
    OP
       2015-10-17 01:57:13 +08:00
    @sagnitude 你说的是一个串行的流程,即: js -> node -> C -> node -> js

    我问的是一个并行的过程,即: js -> node -> C (Start) -> node -> js -> 页面显示 开始啦
    C (5 %) -> node -> js -> 页面显示 我完成 5% 啦
    C (10 %) -> node -> js -> 页面显示 我完成 10% 啦
    .....
    C (100 %) -> node -> js -> 页面显示 我搞完啦
    xuexixuexi
        22
    xuexixuexi  
    OP
       2015-10-17 02:00:56 +08:00
    v2ex 的回复不好,把我的空格给吃了,我再画一遍:
    你说的是一个串行的流程,即: js -> node -> C -> node -> js

    我问的是一个并行的过程,即: js -> node -> C (Start) -> node -> js -> 页面显示 开始啦
    ____________________________________C (5 %) -> node -> js -> 页面显示 我完成 5% 啦
    ____________________________________C (10 %) -> node -> js -> 页面显示 我完成 10% 啦
    ____________________________________.....
    ____________________________________C (100 %) -> node -> js -> 页面显示 我搞完啦
    sagnitude
        23
    sagnitude  
       2015-10-17 11:34:06 +08:00   ❤️ 1
    @xuexixuexi 你用回调函数不就是异步的么

    大约是如下的吧,参考了 http://www.cnblogs.com/yupeng/p/3469444.html

    htmlpage.js

    function requestNodejs() {
    require('nodejs-c-extension').execute(params, function onTrunkGotCallback(percent) {
    //update the progress
    updateHtmlProgress(percent);
    }, function onFinishCallback(responseData){
    //task finished
    updateHtmlByData(responseData);
    });
    }

    nodejs-c-extension.cc

    #include <node.h>

    using namespace v8;

    Handle<Value> HandleCall(const Arguments& args) {
    HandleScope scope;

    /*
    * 3 arguments: params, trunkCallback, finishCallback
    */
    Local<Value> params = Local<Value>::Cast(args[0]);
    Local<Function> trunkCallback = Local<Function>::Cast(args[1]);
    Local<Function> finishCallback = Local<Function>::Cast(args[2]);

    const unsigned argc = 1;
    Local<Value> argv[argc];
    //Do some stuff and report the progress
    for (int i = 0; i < 100; i++) {
    argv[argc] = { Local<Value>::New(String::New(i) };
    trunkCallback->Call(Context::GetCurrent()->Global(), argc, argv);
    }

    //finished, replace argv with data got
    finishCallback->Call(Context::GetCurrent()->Global(), argc, argv);

    return scope.Close(Undefined());
    }

    /*
    * Define function exports.execute as HandleCall
    */
    void Init(Handle<Object> exports, Handle<Object> module) {
    exports->Set(String::NewSymbol("execute"),
    FunctionTemplate::New(HandleCall)->GetFunction());
    }

    NODE_MODULE(nodejs-c-extension, Init)
    sagnitude
        24
    sagnitude  
       2015-10-17 11:34:53 +08:00   ❤️ 1
    @xuexixuexi 还是说你是起了 100 个线程,每个完成加 1%?
    xuexixuexi
        25
    xuexixuexi  
    OP
       2015-10-17 16:26:28 +08:00
    @sagnitude 太感谢了, 100 个线程和 1 个线程一样的道理,我主要是看一下 C 扩展怎么回调 node
    现在明白了,看来值得一学
    您真是大好人:)
    SCaffrey
        26
    SCaffrey  
       2015-11-03 18:16:18 +08:00
    @hkongm 请教一下 Electron 能不能打包成二进制文件之类的?
    hkongm
        27
    hkongm  
       2015-11-04 08:40:16 +08:00
    @SCaffrey Electron 没具体用过, NW 倒是用过, win 下有一堆文件需要带着。。。 Mac 下无所谓了,实际上看到的就是个图标
    估计 Electron 和 NW 差不多吧
    SCaffrey
        28
    SCaffrey  
       2015-11-04 16:32:58 +08:00
    @hkongm 谢谢!最后用了现成的 electron-packager 搞定的...在 repo 里开 issue 问人家说不支持打包成二进制 QAQ
    yangzh
        29
    yangzh  
       2015-11-22 18:51:00 +08:00 via iPhone
    @SCaffrey nw 和 electron 原生不支持打包成为一个大 exe 。

    不过可以看看 http://enigmaprotector.com/en/aboutvb.html 这是一个第三方工具,可以把程序其余的依赖文件塞进一个很大的 exe 文件里。
    SCaffrey
        30
    SCaffrey  
       2015-11-22 18:54:55 +08:00
    @yangzh 谢谢您!我最后选择了 electron-packager https://www.npmjs.com/package/electron-packager
    hkongm
        31
    hkongm  
       2015-12-24 14:38:36 +08:00
    前端工程师的话,如果浏览器端已经开发完成,打包过程大概 1 个小时( node 环境已有已熟悉, nodewebkit 从零开始)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5213 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:43 · PVG 16:43 · LAX 01:43 · JFK 04:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.