Week 01【从零开始，用 Electron 搭建一个桌面应用程序】

前言

前端开发桌面程序这个概念已经出现有一段时间了，这项技术也已经走向成熟，Github上nw和electron的star就差不多有10w颗星了，github也衍生出了很多开源的桌面项目俨然成了一个热门项目。既然这么热，那就一个字：学。

electron官网

什么是Electron

用官方的话来说：

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

简单的理解：

可以使用 JavaScript, HTML 和 CSS 等 Web 技术来创建一个桌面应用程序（当然，你要会 Node JS = = ）

并能够跨平台使用，也就是 Windows ， Linux 以及 macOS 都能使用

点击 Here ,进入官网下载，尽量选择 LST 版本

node官网

由于网速的原因，你需要一个 cnpm 代替 npm ，这里是官网。安装命令（打开系统的cmd.exe来执行命令）：

windows 用户 win+r 后输入 cmd 可以打开， macOs command+空格后输入 ter，选择终端

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g electron

或者使用上面配置的 cnpm

cnpm install -g electron

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

一个最基本的 Electron 应用一般来说会有如下的目录结构：

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

package.json 内至少包含以下信息：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

注意：如果 main 字段没有在 package.json 中出现，那么 Electron 将会尝试加载 index.js 文件（就像 Node.js 自身那样）。如果你实际开发的是一个简单的 Node 应用，那么你需要添加一个 start 脚本来指引 node 去执行当前的 package：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "node ."
  }
}

把这个 Node 应用转换成一个 Electron 应用也是非常简单的，我们只不过是把 node 运行时替换成了 electron 运行时。

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

输入 npm start 即可启动
Week 01 到此为止，尽量每周一更

简书：https://www.jianshu.com/u/9ed17c03bf43
关注一哈，如果觉得不错的可以点个赞
有经济能力的可以赞赏支持一下
有问题可以留言，尽可能的解答

最后编辑于：2018.12.22 14:56:43