您的位置: 首页  >  IT文章  >  安装并创建 Electron 应用程序

安装并创建 Electron 应用程序

分类: IT文章 • 2022-04-04 17:02:55

安装并创建 Electron 应用程序

全局安装 electron

npm install electron -g
# 或者
yarn global add electron@latest

配置 Electron 源

启动应用时，需要下载已经构建好的 Electron dist 包，默认会从 Github 上下载，所以国内下载会很慢或根本无法下载，感谢淘宝提供了镜像源，设置后从国内服务器下载，速度很快。

Ubuntu 临时设置环境变量

# export ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

Windows Powershell 临时设置环境变量

$Env:ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

创建基本应用程序

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

文件结构如下：

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

创建主脚本文件（main.js）

// 文件路径：main.js

const {
    app,
    BrowserWindow,
    Notification
} = require('electron')

function createWindow() {
    const win = new BrowserWindow({
         800,
        height: 600,
        webPreferences: {
            // 允许开发者调试工具
            devTools: true,
            // 允许 node.js 环境
            nodeIntegration: true,
        },
    })
    // 加载 index.html
    win.loadFile('index.html')
    // 打开开发者调试工具
    win.openDevTools();
}

app.whenReady().then(createWindow).then(showNotification)

app.on('window-all-closed', () => {
    if (process.platform != 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length == 0) {
        createWindow();
    }
})

function showNotification() {
    const notification = {
        title: 'Base Title',
        body: 'Main Content'
    }
    new Notification(notification).show()
}

创建网页

<!DOCTYPE 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 style="background: white;">
    <h1>Hello World!</h1>
    <p>
        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>.
    </p>
</body>
</html>

修改 package.json 文件

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

运行您的应用程序

npm start

打包并分发应用程序

分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。

npx @electron-forge/cli import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

创建一个分发版本

npm run make

> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到

注意：
使用 Electron Forge 创建分发版本报错
命令：npm run make
错误：Making for the following targets: squirrel
解决方法：修改 package.json 里面的 author 和 description 的字段内容不为空

Electron 包含三个核心：

Chromium 用于显示网页内容。
Node.js 用于本地文件系统和操作系统。
自定义 APIs 用于使用经常需要的 OS 本机函数。
用 Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序或构建无缝集成的网页。

相关推荐