js 创建file_Electron与NW.js入门

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