electron初探

为什么要使用electron

一：即使在移动端和云端大行其道而，桌面应用仍然占有重要的位置。和 Web 应用比起来桌面应用的优点还是很多的：

1. 明确的入口，只要把它们放在开始菜单栏或者 dock 上，你就能随时打开它们
2. 和操作系统之间的交互更良好（快捷键，通知栏等，切换应用等）

二：但是如果要开发一个桌面应用的话，windows，linux，mac三种操作系统的开发语言都是不一样的。跨平台的特性，是在选择开发桌面应用的框架中，应该优先被考虑到的。
三：同时开发过Html和natvie(android， ios)的人应该知道，HTML在制作界面方面，是比natvie应用要便捷的。因此，一款可以使用前端语言（HTML+CSS+JS）,并且可以跨平台的框架，就是我们的最佳选择。目前，这种框架最出名的就是electron和NW.JS。在网上看了一些对比，electron比nw的坑少一些，活跃度更高，但是 ** electron不支持XP ** 。具体见如下链接 ： https://www.zhihu.com/question/38854224?sort=created

electron简介

electron是github的编辑器ATOM使用的应用框架。框架描述 见网站
http://electron.atom.io/
它使用nodejs构建，webkit浏览器内核。完美支持一些高级JS语言，如ECMA6。并且和其他桌面应用一样，他可以使用nodejs的内核操作文件系统。最吸引人的，就是它可以在网页的js文件中require nodejs的一些api，直接使用。是不是很酷炫。

入门

首先你需要安装nodejs和npm，然后执行命令

  # Install as a development dependency
  npm install electron --save-dev
  # Install the `electron` command globally in your $PATH
  npm install electron -g

安装在本地或者全局都可以。但是要注意的是，项目中使用的一些node工具包，必须安装在本地，也就是不能使用-g命令。不然在打包成独立的应用的时候，会挂掉，这点需要注意。
项目结构如下图：

  your-app/
    ── package.json
    ── main.js
    ── index.html

mian.js里，要初始化BrowserWindow模块来加载index.html。具体可以见官网的例子
https://github.com/electron/electron-quick-start

值得注意的是，这个demo有个坑。在electron-quick-start里的package.json里，依赖的是

"devDependencies": {
    "electron-prebuilt": "^1.2.0"
  },

electron-prebuilt(https://github.com/electron-userland/electron-prebuilt) 是一个 npm模块，包含所使用的 Electron 预编译版本。也就是说，有这个，你就可以在开发的时候运行electron的应用了，并不需要预装electron。而electron-prebuilt的依赖里，含有一个electron-download模块。据我猜测，这个模块是用来下载最新版本的electron二进制应用的。而且这个模块里的url是写死的github上的下载地址。这也就是为啥很多人给npm设置了淘宝的源，依然在运行demo工程时还需要下载，并且下载的这么慢的原因。这个坑纠结了我好久（因为我的代理正好出问题了T_T）
其实我们完全可以手工下载eletron程序，直接运行我们的应用，具体教程见这里：

https://github.com/electron/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md#手工下载-electron-二进制文件

另附上淘宝的开源镜像https://npm.taobao.org/mirrors/electron

好了，接下来就可以愉快的开发electron应用了。electron提供了很多的api供大家选择。包括文件选择器，剪贴板之类的。具体地址见下方。http://electron.atom.io/docs/api/

打包

打包的话，推荐使用electron-packager(https://github.com/electron-userland/electron-packager)

electron-packager      

如果没有设定platform，会默认选择当前的系统环境来打包。
第一次打包，会下载platform对应的平台的工程。依然使用的是electron-download，依然是写死的url，没有代理的同学默哀吧。
我的打包命令一般是这样

electron-packager app代码位置 应用名字 --out 输入位置 

这样你的应用就打包好了，遇到一些坑，我会继续更新文章的~

引用
https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine