用node-webkit开发多平台的桌面客户端 进入全屏
line

目录

一、node-webkit是什么?

二、node-webkit有些什么干货?

三、node-webkit的基本工作原理是怎样的?

四、怎样用node-webkit进行客户端开发?

五、如何做到开发一份代码,生成多平台APP?

六、使用node-webkit开发桌面客户端的优缺点?

七、Q & A!


一、node-webkit是什么?

1、概念

    基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将二者的context完全整合,可在HTML代码中直接使用node.js的API。


2、获取node-webkit

    官网:https://github.com/rogerwang/node-webkit

    支持的平台:Windows 32bit,Linux 32/64bit,Mac 32bit(OS X 10.7+)

    选择与平台相对应的版本,下载并安装即可。


二、node-webkit有些什么干货?

    官方提供的一些成品:https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit

   

三、node-webkit的基本工作原理是怎样的?

    webkit提供DOM操作,包括HTML解析、CSS渲染、Javascript解释执行、DOM事件处理等。而node.js则提供一些本地化的操作、服务器端的处理等。二者的上下文完全融合,实现一个较为完美的本地应用环境。


四、怎样用node-webkit进行客户端开发?

1、一个node-webkit项目的基本目录结构

   

    上面这是一个简单nw应用的目录结构,如果nw应用中需要用到额外的node_module,可以在目录结构中增加一个node_modules的目录,以存放APP所需的node插件。

    其实,一个最最简单的nw应用,只需要有mail.html和package.json文件即可,如下:

   


2、认识package.json

    “Every app package should contain a manifest file named package.json, it will tell node-webkit how to open the app and control how the browser behaves. ”    

     package.json格式如下:

{
    "main": "main.html",                              /* APP的主入口,文件名任意;必选 */
    "name": "nw-demo",                                /* APP的名称,必须具备唯一性,且符合正常变量命名;必选 */
    "description": "demo app of node-webkit",         /* APP的简单描述 */
    "version": "0.1.0",                               /* APP的版本号 */
    "keywords": [ "demo", "node-webkit" ],            /* APP的关键字,搜索APP时用到 */
    "window": {                                       /* APP的窗口属性 */
        "icon": "link.png",                           /* APP图标(windows下,状态栏上可见) */
        "toolbar": true,                              /* 是否显示工具栏 */
        "width": 800,                                 /* 窗口初始化大小 */
        "height": 500,
        "frame": true                                 /* 是否显示外窗体,如最大化、最小化、关闭按钮 */
    },
    "user-agent": "%name %ver %nwver %webkit_ver %osinfo" /* 可自定义APP的UA */
}

    其中,main和name是必选字段,更多配置字段,可参考官方地址:https://github.com/rogerwang/node-webkit/wiki/Manifest-Format


3、主窗口mail.html的写法

    随意写,和普通的前端页面开发方式一样!


4、最简单的HelloWorld

a)、目录结构

   


b)、package.json文件代码

   


c)、main.html文件代码

   


d)、执行命令,运行

   


e)、最终效果

   

    也许你会觉得这个界面特别熟悉,没错,它就是chromium!只是在node-webkit中,我们可以通过修改package.json配置,把工具栏和外框去掉,修改后的配置为:

   

    去掉外框后的运行效果:

   

    你一定会发现去掉toolbar和frame以后,窗口没法被拖动了,其实,可以通过下面这句css来实现窗口可拖动:

   


五、如何做到开发一份代码,生成多平台APP?

1、nw包制作

   

    完成上面的操作,已经生成了一个名为hello-world.nw的文件,如果本机已经安装过node-webkit,双击该文件即可运行。但是,针对未安装过node-webkit的用户,还需要将此nw的运行环境也打包在一起,并生成通用可执行文件,Mac上*.app,Windows上*.exe。


2、针对Mac OS X,*.app文件制作

a)、app.icns文件制作

    为你的App制作特定图标,可准备一张1024*1024的png图片,利用icns-Tool工具生成app.icns图标文件。


b)、修改Info.plist文件

    为你的App制作或修改特定的描述文件。


c)、打包*.app

    从官网再次下载node-webkit的Mac版,命令行执行:

mv hello-world.nw app.nw 
cp app.nw node-webkit.app/Contents/Resources/
cp app.icns node-webkit.app/Contents/Resources/
cp Info.plist node-webkit.app/Contents/
mv node-webkit.app hello-wrold.app

    至此,Mac OS X版本的可执行程序hello-world.app制作完成。

    一般情况下,都会将其压缩后再进行传播。


3)、针对Windows,*.exe文件制作

    windows版本的exe程序制作非常容易,从官网下载node-webkit.exe,cmd下执行:

copy /b node-webkit.exe+app.exe hello-world.exe

      在Linux环境下,可以使用如下命令:

cat node-webkit.exe app.exe > hello-world.exe

      至此,Windows版本的hello-world.exe程序制作完成。


4)、将繁琐重复的操作整合到一个build.sh脚本中

#! sh
app_name="system-info"
 
# 创建app.nw文件
rm -rf output
cd ../ && rm -rf output && mkdir output
cp -r $app_name/* output
rm -rf output/Info.plist output/build.sh output/app.icns
cd output/
find . -type d -name ".svn" | xargs rm -rf
zip -r ../app.nw * > /dev/null;
rm -rf * && cd ../ && mv app.nw output/
mv output $app_name/ && cd $app_name
echo "create nw file success!"
 
#下载基础包
svn co svn://localhost/node-webkit-base output > /dev/null
 
#创建mac版本app
cd output
unzip mac-os-x.zip -d mac-os-x > /dev/null
rm -rf mac-os-x.zip mac-os-x/nwsnapshot
if [ -f ../Info.plist ];then
    cp ../Info.plist mac-os-x/node-webkit.app/Contents/
fi
cp app.nw mac-os-x/node-webkit.app/Contents/Resources/
if [ -f ../app.icns ];then
    cp ../app.icns mac-os-x/node-webkit.app/Contents/Resources/
fi
mv mac-os-x/node-webkit.app mac-os-x/$app_name.app
echo "create mac os app success!"
 
#创建windows版本app
unzip win-32.zip -d win-32 > /dev/null
rm -rf win-32.zip win-32/nwsnapshot
cp app.nw win-32/ && cd win-32
cat nw.exe app.nw > $app_name.exe
rm -rf nw.exe nwsnapshot.exe
cd ..
echo "create windows app success!"
 
#删除app.nw
rm -f app.nw


六、使用node-webkit开发桌面客户端的优缺点?

1、优点

  • 提高UI开发效率,DOM中丰富的事件等可以涵盖绝大多数桌面开发中的情况

  • HTML(5)与CSS(3)拥有丰富的展现效果,可以更容易地对界面进行改版、换肤

  • 容易实现跨平台:Mac OS X 、Windows、Linux

  • 使用Web开发人员工具可以使 UI 调试变得很轻松

  • 桌面程序UI与Web版UI可以共享代码

2)、缺点

  • 浏览器原生API几乎仅仅局限在Web页面上

  • 若通过JavaScript引擎向Web前端暴露一些具有操作客户端权限的API,如何保证代码安全性

  • 必须携带浏览器内核运行库,无形增加程序体积,至少20MB以上(压缩后)

  • 能否满足各种复杂怪异的需求,比如异型窗口  

七、Q & A

    Your Time!

阿里巴巴-钉钉-开放平台,能力开放&开发者运营岗位招聘中, 期待你的加入!
钉钉开放,让应用开发更简单
充分开放,是钉钉的重要方向!除致力于为开发者打造丰富的开放API, 更易接入的场景化能力包, 完备的应用开发工具之外, 还需要持续构建开放能力的布道、开发者生态运营体系,包括培训、沙龙、大会、社区合作等等。业务在快速发展,我们也还需要更多优秀的小伙伴加入!

评论区域

line
  • tanhe188 2017-09-29 14:10:20 回复
    然后最后点击生成的hellp-world.app,图标也没变,还是原来的nw.app没有自动执行我写的那写html文件等…… 怎么解决呢?
  • 花满楼 2016-08-17 23:37:31 回复
    初步涉及NW,学到了;
    大神可以加个外链吗?http://famanoder.com
  • Alien 2015-09-24 15:37:34 回复
    回复 houkai : 我也是醉了,以前blog架在百度云上的,貌似最近他们把服务都给下线了,所以图片都拿不到了,我连源文件都拿不到了。。。狼厂这事儿干的不地道
    houkai said:
    图片能不能加上。。搜了这篇文章,转载的图片都挂了。。。这么好的文章,图片为什么不放到本站呢。
  • Alien 2015-09-24 15:26:38 回复
    回复 houkai : 我擦,图片服务嘛时候挂掉了。。。我查查,给Fix了吧,感谢提醒。
    houkai said:
    图片能不能加上。。搜了这篇文章,转载的图片都挂了。。。这么好的文章,图片为什么不放到本站呢。
  • houkai 2015-09-09 19:01:03 回复
    图片能不能加上。。搜了这篇文章,转载的图片都挂了。。。这么好的文章,图片为什么不放到本站呢。
  • zhailei 2014-07-28 10:57:47 回复
    在给mac打包的时候,按照您给的步骤执行了,然后最后点击生成的hellp-world.app,图标也没变,还是原来的nw.app没有自动执行我写的那写html文件等…… 怎么解决呢?
  • 尘封烟雨 2014-06-30 10:57:26 回复
    回复 Alien : 
    官网文档我看过了,但是仍然不能解决问题。我再找找看吧,先谢谢了!
    Alien said:
    回复 尘封烟雨 : 抱歉啊,我还真没这么搞过,node-webkit我也就是随便玩儿玩儿而已,哈哈。你去Github上问问作者,应该有办法的
  • Alien 2014-06-30 10:47:00 回复
    回复 尘封烟雨 : 抱歉啊,我还真没这么搞过,node-webkit我也就是随便玩儿玩儿而已,哈哈。你去Github上问问作者,应该有办法的
    尘封烟雨 said:
    先回答楼上的问题:
    你的点击元素需要加-webkit-app-region:no-drag;
    再向楼主请教一个问题:
    我隐藏掉toolbar和frame,自己设置了一个最外层容器(自定义区域)
    temp_...
  • 尘封烟雨 2014-06-30 10:46:03 回复
    回复 duncan : 你的点击元素需要加-webkit-app-region:no-drag;
    duncan said:
    body{
    -webkit-user-select: none;
    -webkit-app-region: drag;
    }
    设置了css,虽然能拖动,但是不能点击,选中里面的元素。有没有办法即能拖动又能点击里面的元素。
  • 尘封烟雨 2014-06-30 10:43:57 回复
    先回答楼上的问题:
    你的点击元素需要加-webkit-app-region:no-drag;
    再向楼主请教一个问题:
    我隐藏掉toolbar和frame,自己设置了一个最外层容器(自定义区域)
    temp_warp{
    	-webkit-user-select: none;
    	-webkit-app-region: drag;
    }
    右键时显示窗口属性,但是无法拖动,楼主能否给点建议?
  • duncan 2014-06-06 14:55:53 回复
    body{
    -webkit-user-select: none;
    -webkit-app-region: drag;
    }
    设置了css,虽然能拖动,但是不能点击,选中里面的元素。有没有办法即能拖动又能点击里面的元素。
  • Jin 2014-05-17 21:33:47 回复
    制作os x的app 那个info.plist 应该如何写?
  • Alien 2013-12-04 14:47:42 回复
    回复 大笨狗 : 其实node-webkit主要是用node的脚本功能,用webkit的桌面ui功能;你nodejs服务器上的js要想在你客户端里使用到的话,基本只能用script标签的方式了。目前我还没有想到什么好办法
    大笨狗 said:
    请问node-webkit只能开发客户端嘛,比如我的nodejs服务器端的js文件想打包到这个里面要怎么弄.
  • 大笨狗 2013-12-04 14:44:18 回复
    请问node-webkit只能开发客户端嘛,比如我的nodejs服务器端的js文件想打包到这个里面要怎么弄.
  • daijie 2013-11-10 18:19:00 回复
    回复 Nightink : 需要记得打包 dll 和 pak 文件。
    Nightink said:
    你好 我在window7 node-webkit-v0.6.2-win-ia32 采用 cmd copy /b nw.exe+app.nw app.exe 打包app.exe 文件 然后运行app.exe 一直在报运行崩溃 求解
  • 小Y 2013-11-08 19:28:20 回复
    app.nw文件通过copy /b nw.exe+app.nw app.exe 命令转换为app.exe(该文件足有38M+)
    
    然后通过官方介绍的Enigma Virtual Box进行打包,其中有个压缩的选项(觉得没怎么压缩)  
    
    完成后的文件app_boxed.exe还是有48M
    
    问题:1、1个500kb的文件被整成这么大  有什么办法
    
      2、如何做成可安装的包,像网上其他软件一样  选择路径---》安装---》生成桌面图标
  • GHJ 2013-11-07 10:20:02 回复
    回复 韩小麦 : 压缩文件的时候 在你的项目文件夹根目录下  不要压缩文件夹
    韩小麦 said:
    博主你好,我先压缩成app.zip,然后重命名为app.nw,双击是可以运行的,然后我要生成windows下的exe文件,下载了nw.exe,用下面的命令生成hello.exe
    cat nw.exe app.nw > ...
  • Alien 2013-10-26 10:53:07 回复
    回复 bee : 如果是做本地应用,可以考虑node-webkit的方式,跨平台
    bee said:
    最近考虑使用webkit来整合公司的一些应用,这些目前想来估计不是太大问题,因为目前的应用多是WEB APP,但是原来的即时通部分不知道该如何整进来,请教博主是否有好的解决方...
  • Alien 2013-10-26 10:51:56 回复
    回复 韩小麦 : 实在抱歉,最近回复的邮件提醒功能不可用,所以没注意到你的留言,请问,你的问题,现在解决了吗?
    韩小麦 said:
    博主你好,我先压缩成app.zip,然后重命名为app.nw,双击是可以运行的,然后我要生成windows下的exe文件,下载了nw.exe,用下面的命令生成hello.exe
    cat nw.exe app.nw > ...
  • bee 2013-10-26 09:14:57 回复
    最近考虑使用webkit来整合公司的一些应用,这些目前想来估计不是太大问题,因为目前的应用多是WEB APP,但是原来的即时通部分不知道该如何整进来,请教博主是否有好的解决方案或思路可以提供,也希望今后能多多交流
  • 还有13条较早的评论...