Dreamlike
0%

Electron初探

發表於 更新於 分類於
文章字數： 3.2k 所需閱讀時間 ≈ 3 分鐘

Electron初探

“Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。”这是官方文档对Electron的介绍，个人理解就是将一个网页变为客户端。

本文不详细介绍安装及相关环境配置，而是着眼于从0开始利用Electron构建一个桌面app。 ### 1.构建项目 这里使用git bash为输入端在创建的learn文件夹中,进行初始化创建项目描述文件package.json, 该文件包含的内容有： * name 项目名称 * version 项目的版本号 * description 项目的描述信息 * entry point 项目的入口文件 * test command 项目启动时脚本命令 * git repository 如果你有 Git 地址，可以将这个项目放到你的 Git 仓库里 * keywords 关键词 * author 作者叫啥 * license 项目要发行的时候需要的证书，平时玩玩忽略它 

1
$ npm init
这时命令行中会有许多提示，将json中的信息输入，若不想输入可直接回车 
1
2
3
4
5
6
7
8
9
10
11
12
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (learn)
可见文件夹中生成了json文件 内容如下： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "learn",
  "version": "1.0.0",
  "description": "初探",
  "main": "main.js",
  "scripts": {
    //运行时输入的命令 npm test 要在配置文件里删掉注释
    "test": "electron .",
    //程序打包时用到
     "packager": "electron-packager ./ test --all --out ./outApp"
  },
  "author": "Rocky",
  "license": "ISC"
}
### 2.添加运行主文件main.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 控制生命周期以及控制原生浏览窗口创建的模块
const {app, BrowserWindow} = require('electron')
//保持一个窗体对象的全局引用，如果没有该设置，则当JavaScript对象被垃圾回收时，窗体会自动的关闭
let mainWindow

function createWindow () {
  // 生成浏览窗口
  mainWindow = new BrowserWindow({width: 1800, height: 1000})

  // 载入app的index.html，实际上就是其界面
  mainWindow.loadFile('index.html')

  // 打开调试工具
  //mainWindow.webContents.openDevTools()

  // 当窗口被关闭时提交
  mainWindow.on('closed', function () {
    // 解除对窗体对象的引用,通常当你的app支持多窗口时，你会讲窗口储存在一个数组中(array),
    // 此时你需要将相应的窗体元素都清空
    mainWindow = null
  })
}
// 该方法将在Electron完成初始化并准备创建窗体是被调用
// 一些APIs需要该事件发生后才能被使用
app.on('ready', createWindow)

// 当所有窗口被关闭后退出
app.on('window-all-closed', function () {
  // 在macOS上，除非直接的按Cmd + Q来退出，否则app的菜单栏会始终保持活动
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // 在macOS上，通常在停靠按钮(dock icon)被单击时，
  //会在app的窗体中新建一个标签页而不是打开一个新建窗口
  if (mainWindow === null) {
    createWindow()
  }
})

// 在该文件中，你可以引入你的app的剩下的住进程代码
//你也可以将其写在独立的文件中，并在改文件里引用(require)
### 3.创建界面文件index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- 所有的Node.js APIs在该渲染进程中都是可用的 -->

    <script>
      // 你也可以加载其他的文件，并在改进程中运行
      require('./renderer.js')
    </script>
  </body>
</html>
### 4.运行 
1
2
//在json中scripts里设定的名称
npm test
### 5.打包 打包时需要在本目录下安装依赖项，依赖项也写在json中，通过以下代码安装 
1
2
//或使用cnpm 确实会快
npm install