electron 的混合桌面之路

首先假装很厉害的样子介绍一下Github 官方制作的Atom代码编辑器，这个编辑器是使用electron技术开发的号称21世纪最富有变化的可扩展的编辑器（A hackable text editor for the 21st Century）。

1. 界面简单直观，代码高亮，智能提示补全的功能都还算强大贴心
2. 它可拥有灰常多的插件，插件的编写也十分便利，javascript就可以为其写插件
3. 最重要的是它让无数人看到了HTML/CSS/JS桌面程序的未来

electron 究竟是个啥？

一句话：这是个在平台上运行的为了一些专门的功能而制作的浏览器

node.js: 一个编程专用的浏览器环境，可写

electron： 打包了一个特制的chrome浏览器和node.js ,然后我们加载网页就行了，嚯嚯哒

那么，怎么使用这个electron，牛的很的技术呢

主要有以下几个步骤：

1. 下载并安装node.js
2. 检查node.js和npm是否安装成功（npm就是node.js 的一个商店，专门提供各种小功能【各种模块】）
3. 下载electron，注意：在线安装不行的话请出门右转选择离线安装
4. 安装electron或者直接使用
5. 编写第一个应用

1.下载并安装node.js

node.js官网： 建议下载 4.x的版本，这个版本已经实现对ES6不错的支持了

2.检查node.js和npm是否安装成功

1. 命令行：node -v
2. 命令行：npm -v

3.下载electron

electron官网： PS.应该是，我觉得

GitHub 坐标： api 官方文档才是解决问题的王道

中文翻译官方文档：

3. npm 在线下载

- 命令行:npm install electron -g (加g 全局安装，自动添加到环境变量) - 命令行:cd your-app-path  - 命令行:electron .\ （应用跑起来）

4. 离线下载

->到各家镜像网站摸一个electron下来 对应平台摸搞错了，很尴尬的

宝宝镜像：

GitHub：

csdn 下载频道：地址忘了，自己找，我才懒得翻历史记录呢

4.安装electron或者直接使用

如果上面的步骤没有出现错误提示，那么直接使用即可，: D

1. 命令行：electron .\ (你编写的应用的那个文件夹下执行)
2. 离线安装的同学，请戳开electron.exe 把那个文件夹甩进去

5.编写第一个应用

1. 随便弄个文件夹，新建一个文件：package.json

2. 打开package.json，写入如下内容

3. 

4. JSON格式

   • name -> 你的应用名字
   • version -> 版本号
   • main: ->程序的主逻辑文件，node.js的写法

5. 编写main.js，写入内容如下

剩下的事情就是如何编写页面了，看官方文档吧，骚年！

我感觉优化的好的的话，以后Photoshop都可以用electron写！

当然C/C++的功底是必须的，哈哈！

PS. 现在可以用ES6写electron了，兼容性问题不大！

electron 参考工具链：

LOL全新客户端也要用electron（准确的说的是直接编译的CEF）