electron-quick-start 中文注释

三巧

已于 2023-03-11 17:38:04 修改

阅读量518

点赞数

文章标签： electron javascript 前端 node.js windows

于 2022-12-19 13:10:06 首次发布

本文链接：https://blog.csdn.net/qq_39124701/article/details/128370574

版权

文章目录

仓库
main.js
index.html
preload.js
style.css
renderer.js
README.md
package.json
其他

仓库

保存在gitee的electron-quick-start-Chinese

git clone https://gitee.com/beibeibeibei/electron-quick-start-Chinese.git

main.js

/* app 模块，它控制应用程序的事件生命周期。*/
/* BrowserWindow 模块，它创建和管理应用程序窗口。*/
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
    /* 创建一个浏览器窗口。*/
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    /* 将index.html加载进一个新的BrowserWindow实例。*/
    mainWindow.loadFile('index.html')
    /* 拼接路径比单文件名更好 */
    /* mainWindow.loadFile(path.join(__dirname, 'index.html')) */

    /* 打开开发工具。*/
    // mainWindow.webContents.openDevTools()
}

/* 当 Electron 初始化完成，准备好创建浏览器窗口时 app.whenReady() 方法就会触发。*/
/* 一些 API 只能在 app.whenReady() 方法内使用。*/
app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        /* activate事件是专为 macOS 系统定制的事件 */
        /* 在 macOS 系统中 */
        /* 没有其他窗口打开时单击dock图标，通常会在应用程序中重新创建一个窗口。*/
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

/* 在Windows和Linux系统中，关闭所有窗口通常意味着程序应该停止运行。*/
/* 而在macOS系统中，关闭所有窗口只意味着发生了关闭所有窗口这一件事，程序仍在运行。快捷键commend+Q才会完全退出程序。*/
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

/* 这个位置用来编写其他主进程代码，或 require 单文件形式的主进程代码。*/

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>你好，世界！</title>
</head>

<body>
    <h1>你好，世界！</h1>
    该程序使用以下技术，Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>
    和 Electron <span id="electron-version"></span>。

    <!-- 你可以在这个位置插入更多的script标签 -->
    <script src="./renderer.js"></script>
  </body>
</html>

preload.js

/* preload脚本是在页面运行其他脚本之前预先加载的脚本。 */
/* preload脚本可以访问web API、electron的渲染模块和低版本兼容的 Node.js 方法。 */
/* https://www.electronjs.org/docs/latest/tutorial/sandbox */
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const type of ['chrome', 'node', 'electron']) {
        replaceText(`${type}-version`, process.versions[type])
    }
})

style.css

/* styles.css */
/* 编写css自定义你的程序的外观 */

renderer.js

/**
 * renderer.js文件通过index.html文件中的script标签加载，并将在该窗口的渲染进程中执行。
 * Electron默认禁用 nodeIntegration 并启用 contextIsolation，所以渲染进程中无法使用Node.js API。
 * 你应该使用preload.js中的contextBridge API来暴露主进程的Node.js。
 */

README.md

electron-quick-start

克隆到本地，快速启动Electron项目。
这是基于 Electron 文档中的快速入门指南的最小 Electron 应用程序。
基本的Electron应用程序只需要以下文件：

package.json - 项目配置文件。拥有项目信息、程序入口、脚本、依赖等配置。
main.js - 启动应用程序并创建浏览器窗口用于显示HTML页面。这个文件控制了主进程。
index.html - HTML页面。这是应用程序的渲染器进程。
preload.js - 在渲染器进程加载之前运行的脚本。

移步Electron教程进一步了解。

使用方法

想要克隆和运行这个存储库，你需要安装 Git、Node.js和npm (Node.js 通常会包含 npm，不需要另外安装)。
在命令行中运行以下命令：

# 克隆存储库
git clone https://github.com/electron/electron-quick-start
# 或者克隆存储库的 gitee 备份
# git clone https://gitee.com/xujingwei1218/electron-quick-start
# 进入存储库目录
cd electron-quick-start
# 安装依赖项
npm install
# 启动项目
npm start

注意：你应该避免使用 WSL。如果使用 Windows 系统，不要使用 Windows Subsystem for Linux (WSL)，否则运行应用时可能会遇到问题。参考链接：Win10运行图形化Linux桌面、在 WSL2 中打包 electron Linux 版本应用及运行、在适用于 Linux 的 Windows 子系统上运行 Linux GUI 应用

Electron 的学习资料

electronjs.org/docs - Electron 官方文档
Electron Fiddle - Electron Fiddle, 一个用于体验小型 Electron 的应用程序。

许可证

CC0 1.0 (公共领域)

package.json

{
    // 项目名称
    "name": "electron-quick-start",
    // 项目版本
    "version": "1.0.0",
    // 项目描述
    "description": "A minimal Electron application",
    // 程序入口文件
    "main": "main.js",
    // npm脚本
    "scripts": {
        // 命令行运行 npm run start 来代替运行"electron"，还可以使用pre和post钩子功能
        "start": "electron ."
    },
    // 代码的仓库地址
    "repository": "https://github.com/electron/electron-quick-start",
    // 关键词，配合项目描述以便于他人搜索
    "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
    ],
    // 作者
    "author": "GitHub",
    // 开源协议许可证
    "license": "CC0-1.0",
    // 开发阶段需要的依赖包
    "devDependencies": {
        "electron": "^22.0.0"
    }
}

其他

Electron代替
1.Tauri，使用系统WebView安装包小：Tauri从搭建到打包
2.NW.js(原名Node-Webkit)，0.14.7版本支持WindowsXP系统：NW.js的HelloWorld
3.Gluon.js，2022年12月7号出生的框架，太新了：Gluon的HelloWorld
4.Neutralino.js，比Electron和NW小：Neu的HelloWorld