用 node-webkit 开发桌面程序怎么样? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xuexixuexi
V2EX    Node.js

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

  •  
  •   xuexixuexi 2015-10-15 01:33:02 +08:00 10284 次点击
    这是一个创建于 3710 天前的主题,其中的信息可能已经有所发展或是发生改变。
    主要是 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
    &nbs;   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 1: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     Solana     912 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 21:41 PVG 05:41 LAX 13:41 JFK 16:41
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86