Electron开发桌面端程序

素颜马尾好姑娘i 2022-12-06 01:23 270阅读 0赞

## 一、配置开发环境 ##

安装nodejs，这个网上教程很多

## 二、创建应用 ##

1.创建项目文件目录

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

2.初始化项目

npm init

初始化过程中填写相关信息，最终生成的`package.json`文件

{ 
        "name": "electron-app",
        "version": "1.0.0",
        "description": "",
        "main": "main.js",
        "scripts": { 
            "electron": "electron .",
        },
        "author": "lihefei",
        "license": "ISC",
        "devDependencies": { 
            "electron": "^10.1.1"
        }
    }

3.安装 Electron

npm install --save-dev electron

4.编写应用程序`main.js`

const {  app, BrowserWindow, Menu } = require('electron');
    
    function createWindow() { 
        // 创建浏览器窗口
        const win = new BrowserWindow({ 
            width: 800,
            height: 600,
            webPreferences: { 
                nodeIntegration: true,
            },
        });
    
        // 隐藏菜单栏
        Menu.setApplicationMenu(null);
    
        // 为应用加载index.html
        win.loadFile('./index.html');
    
        // 打开开发者工具
        //win.webContents.openDevTools();
    }
    
    // 在初始化完成并且准备好创建浏览器窗口时调用这个方法
    // 部分API在ready事件触发后才能使用
    app.whenReady().then(createWindow);
    
    //窗口关闭时
    app.on('window-all-closed', () => { 
        if (process.platform !== 'darwin') { 
            app.quit();
        }
    });
    
    //窗口启用时
    app.on('activate', () => { 
        if (BrowserWindow.getAllWindows().length === 0) { 
            createWindow();
        }
    });

[BrowserWindow窗口配置信息文档][BrowserWindow]

5.编写展示界面`index.html`

<html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
      </head>
      <body>
        <h1>Hello World!</h1>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
      </body>
    </html>

## 三、启动应用 ##

npm run electron

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

## 四、打包 ##

1.安装打包工具 `electron-packager`

npm install electron-packager -g

2.执行打包命令

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>electron桌面端</td> 
   <td>生成的exe文件的名称</td> 
  </tr> 
  <tr> 
   <td>--platform</td> 
   <td>确定构建哪个平台的应用，可取的值： darwin, linux, mas, win32</td> 
  </tr> 
  <tr> 
   <td>--arch</td> 
   <td>确定使用 x86 还是 x64 还是两个架构都用</td> 
  </tr> 
  <tr> 
   <td>--icon</td> 
   <td>自定义设置应用图标</td> 
  </tr> 
  <tr> 
   <td>--icon</td> 
   <td>自定义设置应用图标</td> 
  </tr> 
  <tr> 
   <td>--out</td> 
   <td>指定打包文件输出的文件夹位置</td> 
  </tr> 
  <tr> 
   <td>--asar</td> 
   <td>打包之后应用的源码以.asar格式存在，该参数可以不加，否则会以文件夹形式存在</td> 
  </tr> 
  <tr> 
   <td>--app-version</td> 
   <td>生成应用的版本号</td> 
  </tr> 
  <tr> 
   <td>--overwrite</td> 
   <td>覆盖原有的build,让新生成的包覆盖原来的包</td> 
  </tr> 
  <tr> 
   <td>--ignore</td> 
   <td>如果加上该参数和值，项目里对应指定的文件夹和文件不会被打包进去<br>值不能设为main.js、package.json以及index.html与它引用的资源文件</td> 
  </tr> 
  <tr> 
   <td>--electron-version</td> 
   <td>指定当前要构建的electron的版本,需要和当前的版本一致</td> 
  </tr> 
 </tbody> 
</table>

打包方式一：直接输入下面的命令打包

electron-packager . electron桌面端 --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 10.1.1

打包方式二：在package.json的scripts中添加package设置，然后执行`npm run package`命令打包

"scripts": { 
        "package": "electron-packager . electron桌面端 --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 10.1.1"
    },

npm run package

3.打包结果输出在`/out`文件夹下，这就是常见的免安装的绿色程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 1]  
4.双击主程序运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 2]

## 五、创建安装包 ##

绿色程序文件比较多而且体积较大，不利于文件传输，打包成安装包是一个不错的选择  
打安装包教程：[Electron程序用Inno Setup或NSIS生成安装包][Electron_Inno Setup_NSIS]

[BrowserWindow]: http://www.niuguwen.cn/kaifashouce-cat-138-13802.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221123/ddf5357ca65846efa5c302c3747cc71a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 1]: /images/20221123/04444b4c7bbf40cab6ae075355bf060f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 2]: /images/20221123/193f224d8bef4539bc0f26efe28e3fd6.png
[Electron_Inno Setup_NSIS]: https://lihefei.blog.csdn.net/article/details/108797377