node-webkit新命名为 nw.js
转自:http://www.baidufe.com/item/1fd388d6246c29c1368c.html
![nw.js(node-webkit)桌面客户端 line](https://i-blog.csdnimg.cn/blog_migrate/df1993e15f1b24311bcdff29747e46ca.gif)
目录
一、node-webkit是什么?
二、node-webkit有些什么干货?
三、node-webkit的基本工作原理是怎样的?
四、怎样用node-webkit进行客户端开发?
五、如何做到开发一份代码,生成多平台APP?
六、使用node-webkit开发桌面客户端的优缺点?
七、Q & A!
一、node-webkit是什么?
1、概念
2、获取node-webkit
二、node-webkit有些什么干货?
三、node-webkit的基本工作原理是怎样的?
四、怎样用node-webkit进行客户端开发?
1、一个node-webkit项目的基本目录结构
2、认识package.json
{
"main"
:
"main.html"
,
"name"
:
"nw-demo"
,
"description"
:
"demo app of node-webkit"
,
"version"
:
"0.1.0"
,
"keywords"
: [
"demo"
,
"node-webkit"
],
"window"
: {
"icon"
:
"link.png"
,
"toolbar"
:
true
,
"width"
: 800,
"height"
: 500,
"frame"
:
true
},
"user-agent"
:
"%name %ver %nwver %webkit_ver %osinfo"
}
|
3、主窗口mail.html的写法
4、最简单的HelloWorld
a)、目录结构
b)、package.json文件代码
c)、main.html文件代码
d)、执行命令,运行
e)、最终效果
五、如何做到开发一份代码,生成多平台APP?
1、nw包制作
2、针对Mac OS X,*.app文件制作
a)、app.icns文件制作
b)、修改Info.plist文件
c)、打包*.app
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
|
3)、针对Windows,*.exe文件制作
copy /b node-webkit.exe+app.exe hello-world.exe |
cat node-webkit.exe app.exe > 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以上(压缩后)
-
能否满足各种复杂怪异的需求,比如异型窗口
注:
nw.js安装使用方法(ubuntu):
1、从nwjs.io下载压缩包(nwjs-v0.12.0-linux-x64.tar.gz),并解压
2、sudo ln -s ~/Download/nwjs-v0.12.0-linux-x64/nw
3、sudo ldconfig
4、编写nw项目 hello_world
5、运行, nw hello_world