![e2e34a704017bc44f8380fa5168544bd.png](https://i-blog.csdnimg.cn/blog_migrate/6eb704896421dd76e6281a1d5374960f.jpeg)
Electron与NW.js允许开发者使用javascript构建跨平台(windows,linux,mac os)的桌面应用。
为什么要把web页面做成桌面应用呢?
因为基于web的页面受到网络因素的制约,断网的时候,网速不好而要加载的资源又很大的时候,web页面的体验就不会好。另外,浏览器里有很多安全策略,因为对于用户来说页面是不可信任的,为了保护用户,浏览器里是不允许访问用户的本地文件的,而桌面应用不一样,用户安装了它就说明信任它,所以它可以通过Electron/NW.js提供的操作系统API直接读写本地文件、控制视窗大小与菜单(相当于控制原先web页面的浏览器大小与菜单)等,读写本地文件也同样解决了网络问题。最后,写web应用往往面临浏览器兼容性的问题,桌面应用没有这个问题。
为什么要用Electron/NW.js写桌面应用?
以前要写个桌面应用需要学会C++、Objective-C等语言,还要回.NET、Qt等框架,才能搞出来一个桌面应用,门槛比较高,现在只用javascript就可以了,这样还带来一个好处,web页面的代码可以在桌面应用中复用,大大简化了将web应用更改为桌面应用的工作。
NW.js的使用:
1、安装 npm install -g nw(cmd里像卡死了一样,没有进度条,等了很久才安装好)
2、书写:建立package.json文件,name字段就是应用名,只能小写字母,main是应用入口,NW.js里可以是js也可以是html,一般是html,version是npm的字段。然后在index.html里写个hello world页面,就跟写web页面一样写。
{
3、运行:在package.json所在的文件夹下,运行命令:nw,即可执行。
Electron的使用:
1、安装:npm install -g electron(cmd里有进度条)
2、使用:建立个package.json,main是入口文件,Electron里,需要指定一个js作为入口文件,而非html,这是因为,Electron里面需要新建app,新建窗口,监听app的变化,监听窗口变化,然后显示页码,所以一定需要一个入口js文件把这些东西准备好。
{
"name" : "hello-world",
"version" : "1.0.0",
"main" : "main.js"
}
Electron的入口文件:main.js
'use strict'
3、运行:进入package.json所在的文件夹,输入electron .(注意有个点)。
NW.js与Electron的区别:
它们都是整合了后端与浏览器,NW.js是把浏览器作为补丁打进去的,也就意味着Node.js与浏览器共享了同一个js上下文。Electron则是有多个独立的js上下文,一个是后端进程,负责启动应用的视窗(叫main进程),一个是负责具体应用的视窗(叫render进程)。
我觉得它的意思是NW.js里不区分和运行的app和页面,Electron里区分。我个人感觉在简单应用中,这些视图窗口的东西,NW.js这种透明掉的方式更好,在复杂的应用中,还是使用Electron,从底层就分成了多个,分开处理比较清晰。
它们的生态都不错,在github上有很多应用。
——————————————————————————————————————
我觉得NW.js与Electron的意义在于,前端程序员不再只是web,可以脱离浏览器了,拥有了跨平台写桌面应用的自由。
真棒!
(*^▽^*)
What A Wonderful World - Louis Armstrong - 单曲 - 网易云音乐music.163.com![56ef22d7d4cfc7d2e1a6caf3d5481a4c.png](https://i-blog.csdnimg.cn/blog_migrate/faaffe2bc74ad1973d990e5fd0c641a0.jpeg)