不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
使用node-webkit开发桌面客户端(FE轻松上手) 进入全屏
line

周日终于有了点儿空余时间,可以来简单研究下node-webkit,对于前端开发者来说,这着实是一个好东西,可以用自己最熟悉的HTML+Javascript+CSS技术,直接开发出很炫的PC客户端。而且和平时开发前端页面不同的是,用node-webkit,可以完全不用考虑浏览器兼容性的问题,并且能随心的使用HTML5+CSS3的效果,能让APP效果更炫。

关于node-webkit,官网有这样的介绍:

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and Javascript with node-webkit. It also lets you to call Node.js modules directly from DOM and enables a new way of writing native applications with all Web technologies.

这还有一篇关于node-webkit的介绍,非常不错。其实根据官方的wiki,上手很容易,可以用简单的几行代码,开发出Mac OS X 的APP,以及基于windows的exe客户端。

今天做的一个小Demo:


Demo源代码:system-info.zip  

Mac版本APP:system-info-mac.zip  

Windows版本APP:system-info-win32.zip

在代码中,我写了个build.sh,可以将同一份代码可以同时生成mac和windows两个版本的客户端,原理:

对于Mac版本的node-webkit,通过终端可以直接进入到目录:node-webkit.app/Contents/Resources/,将system-info打包成app.nw后,放入该目录即可。

对于Windows版本的node-webkit,将system-info打包成app.nw后,直接将nw.exe和app.nw合并为app.exe即可。

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
趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • Alien 2013-08-21 15:38:27 回复
    回复 咔咔NG : 基本是这样子,不过可以实现第一个版本的包比较大,后面实现nw包自动更新(只更新app部分,不会下载node-webkit),具体的方案,@志龙 同学已有成果物,Go:http://www.ucren.com
    咔咔NG said:
    这个app的大小直接取决于wenkit的大小啊
  • 咔咔NG 2013-08-19 16:16:15 回复
    这个app的大小直接取决于wenkit的大小啊
  • 小伙子 2013-06-26 14:48:28 回复
    svn://localhost ?? 使用node-webkit 是不是得把nodejs,html5,css3都得学遍?
  • Alien 2013-05-28 13:02:05 回复
    回复 welefen : 没有啦~也就周末在家的时候会简单更新下,just so !
    welefen said:
    先烈,你的博客更新频率很高啊
  • welefen 2013-05-28 13:01:03 回复
    先烈,你的博客更新频率很高啊