Electron开发桌面端程序

最新推荐文章于 2024-07-31 20:19:25 发布

lihefei_coder

最新推荐文章于 2024-07-31 20:19:25 发布

阅读量923

点赞数 1

文章标签： electron 桌面端程序开发

本文链接：https://blog.csdn.net/lihefei_coder/article/details/108539249

版权

一、配置开发环境

安装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窗口配置信息文档

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

在这里插入图片描述

四、打包

1.安装打包工具 electron-packager

npm install electron-packager -g

2.执行打包命令

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

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

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"
},