为什么要使用electron
一:即使在移动端和云端大行其道而,桌面应用仍然占有重要的位置。和 Web 应用比起来桌面应用的优点还是很多的:
- 明确的入口,只要把它们放在开始菜单栏或者 dock 上,你就能随时打开它们
- 和操作系统之间的交互更良好(快捷键,通知栏等,切换应用等)
二:但是如果要开发一个桌面应用的话,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 <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
如果没有设定platform,会默认选择当前的系统环境来打包。
第一次打包,会下载platform对应的平台的工程。依然使用的是electron-download,依然是写死的url,没有代理的同学默哀吧。
我的打包命令一般是这样
electron-packager app代码位置 应用名字 --out 输入位置
这样你的应用就打包好了,遇到一些坑,我会继续更新文章的~
引用
https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine