electron 的混合桌面之路 入门安装

最近有计划去写桌面程序，所以呢，我打算写一篇博客来记录使用21世纪逼格最高的技术的入门文档。

electron 的混合桌面之路

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

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

electron 究竟是个啥？

一句话：这是个在node.js平台上运行的为了一些专门的功能而制作的浏览器 
node.js: 一个编程专用的浏览器环境，可写javascript 
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官网：https://nodejs.org/en/ 建议下载 4.x的版本，这个版本已经实现对ES6不错的支持了

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

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

3.下载electron

electron官网：http://electron.atom.io/ PS.应该是，我觉得 
GitHub 坐标：https://github.com/electron/electron api 官方文档才是解决问题的王道 
中文翻译官方文档：https://github.com/electron/electron/tree/master/docs-translations/zh-CN 
3. npm 在线下载

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

• 1
• 2
• 3
• 4

4. 离线下载

->到各家镜像网站摸一个electron下来 对应平台摸搞错了，很尴尬的 
宝宝镜像：https://npm.taobao.org/mirrors/electron/ 
GitHub：https://github.com/electron/electron/releases 
csdn 下载频道：地址忘了，自己找，我才懒得翻历史记录呢

4.安装electron或者直接使用

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

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

5.编写第一个应用

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

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

   {
       "name": "你弄啥",
       "version": "0.0.1",
       "main": "main.js"
   }

   • 1
   • 2
   • 3
   • 4
   • 5

   JSON格式

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

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

var electron  = require('electron');
//寻求node.js的一个模块 electron ，并生成对象electron
//PS.早期版本的electron用的是app模块和browser-window模块
var {app} = electron; 
//{app} 是一个electron对象，控制整个应用，管理所有
var browserWindow = electron.BrowserWindow;
//browserWindow 对象被创造成一个electron的浏览器窗口对象
var mainWindow;//表示主窗口
function createWindow() {
    mainWindow = new browserWindow({height:600,width:800});
    //打开一个浏览器窗口，800×600
    mainWindow.loadURL('file://' + __dirname + '/app.html');
    //打开当前目录的app.html
}

app.on('ready',createWindow);
//{app}订阅了一个ready事件,
//这个事件会在整个应用启动过程完成后发生，此时会自动调用createWindow函数做一些事情了

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

剩下的事情就是如何编写页面了，看官方文档吧，骚年！ 
我感觉优化的好的的话，以后Photoshop都可以用electron写！ 
当然C/C++的功底是必须的，哈哈！ 
PS. 现在可以用ES6写electron了，兼容性问题不大！ 
electron 参考工具链：http://electron.atom.io/community/ 
LOL全新客户端也要用electron（准确的说的是直接编译的CEF）