Electron开发入门

逃离我推掉我的手 2022-05-23 08:23 210阅读 0赞

#### 前记： ####

Electron是笔者最近才开始接触的Node中的一个模块，大致功能是将**Node.js**的环境搬至桌面程序开发中，也就是说我们可以通过Node.js去开发桌面程序，最终打包成exe可执行文件。因为之前笔者一直从事Java开发，对Node了解甚少，所以并不清楚实现这种功能是不是特别难，但是Electron的作者的实习经历及Electron目前所获得的成就（GitHub 60k+的Star）让笔者非常的钦佩。

## Electron介绍 ##

*  [Electron的官网][Electron]
 *  [Electron作者的经历][Electron 1]
 *  [Electron的使用][Electron 2]
 *  [Electron的开源][Electron 3]
 *  [Electron使用Flash][Electron_Flash]

## Electron安装 ##

*  [Node环境搭建][Node]
 *  npm转淘宝镜像
    
    `npm install -g cnpm --registry=https://registry.npm.taobao.org`
 *  Electron模块安装
    
    `npm install -g electron`
 *  Electron打包模块安装
    
    `npm install -g electron-packager`

## Electron开发 ##

#### 目录结构 ####

Github Demo地址：[https://github.com/electron/electron-quick-start][https_github.com_electron_electron-quick-start]

electron/resources/app
    |_package.json
    |_main.js
    |_index.html

这是一个传统的Node项目目录结构，**package.json**是应用的配置文件：

{
      "name": "xiaochongkk",
      "version": "2.0.0",
      "main": "main.js",
      "dependencies": { "cheerio": "^1.0.0-rc.2", "electron-packager": "^12.1.0", "superagent": "^3.8.3" },
      "scripts": { "test": "start", "start": "electron .", "packager": "electron-packager ../electron-practice --all --out ./out-electron-practice --electron-version 2.0.0 --overwrite " } }

参数介绍：

*  name：应用名
 *  version： 版本号
 *  main：主进程入口js文件
 *  dependencies： 依赖模块
 *  scripts：可执行脚本，可在命令行执行
 *  其他参数请参考 [https://docs.npmjs.com/files/package.json][https_docs.npmjs.com_files_package.json]

Electron使用**main.js**作为主进程启动入口，我们可以在其中渲染应用程序窗口及一些初始值，主要内容如下：

// Modules to control application life and create native browser window
    const {app, BrowserWindow} = require('electron')
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let mainWindow
    
    function createWindow () { 
      // Create the browser window.
      mainWindow = new BrowserWindow({width: 800, height: 600})
    
      // and load the index.html of the app.
      mainWindow.loadFile('index.html')
    
      // Open the DevTools.
      // mainWindow.webContents.openDevTools()
    
      // Emitted when the window is closed.
      mainWindow.on('closed', function () { 
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
      })
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow)
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function () { 
      // On OS X it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', function () { 
      // On OS X it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (mainWindow === null) {
        createWindow()
      }
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.

#### Electron程序运行 ####

*  进入项目目录中执行`npm start`
 *  项目目录中 `electron #项目名`

#### Electron程序打包 ####

下载`electron-packager`模块  
`cnpm install -g electron-packager`  
编辑项目中的package.json, 增加scripts中增加packager配置：

"scripts":{
        "test": "start",
        "start": "electron .",
        "packager": "electron-packager ../electron-practice --all --out ./out-electron-practice --electron-version 2.0.0 --overwrite "
     }

参数介绍：  
\- electron-packager：后跟要打包的程序  
\- out：输出目录  
\- electron-version：electron版本  
\- overwrite：存在代表每次打包都覆盖已存在的目录  
进入项目目录内执行：  
`cnpm run-script packager`

[Electron]: https://electronjs.org/
[Electron 1]: https://www.zhihu.com/question/36292298/answer/102418523
[Electron 2]: https://www.w3cschool.cn/electronmanual/
[Electron 3]: https://github.com/electron
[Electron_Flash]: https://electronjs.org/docs/tutorial/using-pepper-flash-plugin
[Node]: https://www.cnblogs.com/zhouyu2017/p/6485265.html
[https_github.com_electron_electron-quick-start]: https://github.com/electron/electron-quick-start
[https_docs.npmjs.com_files_package.json]: https://docs.npmjs.com/files/package.json