Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序

不念不忘少年蓝@ 2022-07-14 22:42 426阅读 0赞

摘要: 本文的主要目的，是要教会大家如何使用 Electron 从 零 创建 Windows 的 .exe 或者 OS X / linux 的 桌面可执行应用程序。

![Electron][]

# 序 #

每次 Electron 有最新新闻的时候，都会有很多朋友留言，问有没有相关教程，本人也是观察有一段时间了，一直鲜有人提供相关的学习内容，所以在此就给大家提供下一些入门和进阶教程，希望大家多多支持，谢谢！

本文的主要目的，是要教会大家如何使用 Electron 从 零 创建 Windows 的 .exe 或者 OS X / linux 的 桌面可执行应用程序。

## 案例演示 ##

由于资源不多，直接将自己之前开源的一个 google chrome extension 代码引用过来，无需修改源码，值要配置好 electron 环境就可以运行！插件的开源仓库地址：[http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension][http_git.oschina.net_cyzshenzhen_GJP-tools-chrome-extension]

![实际应用示例][electron-demo.gif]

## 一、Electron 是什么 ##

### 官方描述 ###

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

### 个人理解 ###

就是一个Chrome浏览器封装成窗体，然后加载你做的HTML程序，直接看到效果。比较类似于手机端，基于微信的H5微网站。

### 应用场景 ###

想做桌面应用，又不会c++，又不会c\#，又不会swing，也不会python等各大创建桌面窗体语言，但是会HTML、CSS，没错，那就是你了。

### 注意！注意！注意！ ###

由于 Electron 本身就是基于 Chromium 的，所以它的基础大小就已经很大了，应该有四五十M，如果介意文件大小的话，劝您还是再看看...

## 二、开发 Electron 需要会什么 ##

### 必须的 ###

*  HTML
 *  CSS
 *  JavaScript

### 其他 ###

*  node.js （Electron 本身就基于node.js，不会没关系，直接照着教程来就行）
 *  git （demo是从git仓库拿的，不会没关系，自己去下载就行）
 *  开发工具 （本人使用的是 vscode）

## 三、Hello World！ ##

### 官方三步start ###

$ git clone https://github.com/electron/electron-quick-start
    
    $ cd electron-quick-start
    
    $ npm install && npm start

### 启动效果 ###

单独启动

npm start

![Electron][Electron 1]

### 结构分析 ###

| -- index.html
    | -- main.js
    | -- package.json

#### index.html ####

你没看错，它就只是一个HTML而已！

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
      </head>
      <body>
        <h1>Hello World!</h1>
      </body>
    </html>

#### main.js ####

窗口配置，主要是控制窗口的高度、宽度、入口页面、等

下面是代码的内容，一般情况下，只需要看下两个地方就行

*  入口页面配置：mainWindow.loadURL()
 *  打开调试工具：mainWindow.webContents.openDevTools()

'use strict';
    
    const electron = require('electron');
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    
    let mainWindow;
    
    function createWindow () {
      mainWindow = new BrowserWindow({width: 800, height: 600});
    
      // 指定一个入口的html文件
      mainWindow.loadURL('file://' + __dirname + '/index.html');
    
      // 打开调试工具，其实就是chrome的那套调试工具
      //mainWindow.webContents.openDevTools();
    
      mainWindow.on('closed', function() {
        mainWindow = null;
      });
    }
    
    app.on('ready', createWindow);
    
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
    
    app.on('activate', function () {
      if (mainWindow === null) {
        createWindow();
      }
    });

#### package.json ####

项目名称、版本信息等，以及node.js相关的依赖配置，类似于java引用.jar

*  electron-packager
 *  electron-prebuilt

两个都是用来打包成可执行应用程序的必备依赖包，细节我们在下一个步骤里面进行详细的说明

{
      "name": "electron-quick-start",
      "version": "1.0.0",
      "description": "n",
      "main": "main.js",
      "scripts": {
        "start": "electron main.js"
      },
      "devDependencies": {
        "electron-packager": "^5.2.1",
        "electron-prebuilt": "^0.36.0"
      }
    }

### 四、打包为可执行程序 ###

#### 1、打包 ####

现在我们只能通过 npm start 源码 来运行程序，如何打包成系统可执行程序，不要node.js环境也可以用呢？这里我们将会用到 electron-packager、electron-prebuilt

现在，我们使用 electron-packager 来进行打包，此处我们打包为 windows 系统的 .exe 程序

首先，进入项目根目录，然后执行下面命令行

electron-packager ./ --platform=win32 --arch=x64 --version=0.37.2 --icon=./images/favicon.ico

如果还想打包 linux / OS X 环境的可执行程序，可查看帮助信息

electron-packager

即可看到相关资料，如果不明白的话，可以留言，一起学习！

#### 2、效果 ####

![Electron][Electron 2]

![Electron][Electron 3]

### 五、如何跟朋友 show 一个，装个X ###

教程到这里，入门基本已经结束了，那么估计有些童鞋估计还是不明白，怎么把这个程序发给朋友，显得自己流弊，其实很简单的！你只需要把生成出来的那个文件夹，打一个压缩包，然后告诉他，执行那个.exe文件就够了！！！

= =||||

--------------------

### My Blog ###

[blog.chenyuanzhen.com][]

https://my.oschina.net/yzChen/blog/751504

[Electron]: http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-2.png
[http_git.oschina.net_cyzshenzhen_GJP-tools-chrome-extension]: http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extension
[electron-demo.gif]: http://7vzsvy.com1.z0.glb.clouddn.com/electron-demo.gif
[Electron 1]: http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-1.png
[Electron 2]: http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-3.png
[Electron 3]: http://7vzsvy.com1.z0.glb.clouddn.com/electron-1-4.png
[blog.chenyuanzhen.com]: http://blog.chenyuanzhen.com/