前言:
最近因为要帮别人做一个Mac和Windows平台下都使用的桌面应用,功能很简单,就是一个文本编辑器,所以大致了解了一下跨平台桌面应用开发的框架,知乎上推荐多半是 Electron
和 NW.js
,其中 Electron
比较成熟的产品有:Github开发的Atom
代码编辑器(已经开源)、微软的Visual Studio Code
、facebook的 nuclide
和 slack
等。
什么是 Electron
概述:
Electron
前称为atom shell
,是从github开源项目Atom编辑器中抽离出来的,是一个能让你通过 JavaScript
、HTML
和 CSS
构建桌面应用的库 。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行。
组成:
Electron
结合了 Chromium
、Node.js
和用于调用3个操作系统本地功能的API(如打开文件窗口、通知、图标等):
Chromium
:Google 创造的一个开源库,并用于 Google 的浏览器 Chrome;Node.js
(Node):一个用于在服务器运行JavaScript的工具,拥有文件系统和网络的权限;Native API
:支持3个操作系统(Windows、Mac和Linux)的原生API库。
开发体验:
跟网页开发很相似,通过HTML和CSS搭建界面,使用Node(JavaScript)编写逻辑,就像开发一个Node应用。
环境配置:
安装 Node.js
和 npm
:
- 资源下载:
进入Node官网,下载指定版本的安装包,这里我下载的是:node-v6.10.2-x64.msi 安装配置:
直接双击下载好的安装包,按照引导完成node的安装,在环境变量中自动将安装目录添加到Path中:
新版的Node.js
已经集成了npm
,所以无需重复安装。版本查询:
在命令行窗口中输入版号查询指令进行查询:node -v npm -v
假如安装成功,结果如下:
Electron
快速起步:
源码:
Electron
源码下载地址:electronnpm切换到国内镜像:
上面运行npm install
安装项目的依赖资源的时候,出现了报错:”npm ERR!Windows_NT 6.1.7601”
报错原因是:npm原本的镜像资源索取代理地址默认是国外的 https://rubygems.org/,访问受限连接超时导致报错,有两种解决方法:- 方法一:翻墙(并非长久之计,但可以索取到最新的资源);
- 方法二:将代理设置为国内的地址,使用国内的npm镜像,通常使用阿里云提供的淘宝镜像:https://npm.taobao.org/或者腾讯的镜像:https://gems.ruby-china.org/,安装package时使用代理地址:
npm install -g package --registry=https://registry.npm.taobao.org
这里
package
是要安装的模块的名称,--registry
用来指定镜像索取地址。为了不用每次安装都指定一个地址,这里我们直接安装淘宝定制的
cnpm
修改如下://安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org //使用cnpm安装package,例如electron cnpm install -g electron
通过cnpm安装electron
看到官方的引导,开始使用要用npm
安装electron-prebuilt
,但是安装的时候会提示electron-prebuilt
已改名为electron
,而且这里我们使用的是cnpm
,所以使用以下方式:# Install the `electron` command globally cnpm install -g electron # Install as a development dependency cnpm install electron --save-dev
执行第一个安装指令会在系统盘下面的创建一个资源目录这里我的目录是:
C:\Users\Administrator\.electron
,该目录下多了两个文件:electron-v1.6.6-win32-x64.zip
和SHASUMS256.txt-1.6.6
:
起步案例:
github上提供了一个简单的案例:electron-quick-start
根据官方引导,使用以下指令:# Clone this repository git clone https://github.com/electron/electron-quick-start # Go into the repository cd electron-quick-start # Install dependencies cnpm install # Run the app cnpm start
执行正常的输出如下,并弹出Helloworld窗口:
E:\Electron\electron-quick-start-master>cnpm install √ Installed 1 packages √ Linked 146 latest versions √ Run 1 scripts Recently updated (since 2017-04-26): 4 packages (detail see file E:\Electron\ele ctron-quick-start-master\node_modules\.recently_updates.txt) √ All packages installed (154 packages installed from npm registry, used 5s, sp eed 137.76kB/s, json 165(247.32kB), tarball 509.67kB) E:\Electron\electron-quick-start-master>cnpm start > electron-quick-start@1.0.0 start E:\Electron\electron-quick-start-master > electron .
这里展示的界面其实就是electron-quick-start目录下
index.html
的布局界面。