禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron

宝码香车

已于 2024-08-26 03:07:58 修改

阅读量5.6w

点赞数 214

CC 4.0 BY-SA版权

分类专栏： # Electron 文章标签：前端 electron 笔记

于 2024-07-16 02:39:58 首次发布

本文链接：https://blog.csdn.net/qq_33650655/article/details/140364298

⚠️注意：
1️⃣原视频打包时，是使用electron-builder打包，使用electron-builder打包，打包时要访问github需要修仙术才能访问。
2️⃣本笔记，使用Electron Forge进行打包，使用Electron Forge不需要访问github更友好。在Electron 官网中也推荐使用这种方式 👉Electron

一、Electron是什么

简单的一句话，就是用html+css+js+nodejs+（Native Api）做兼容多个系统（Windows、Linux、Mac）的软件。

官网解释如下(有点像绕口令)：
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。
在这里插入图片描述

二、Elemtron流程模型

Electron流程模型图

三、Electron搭建工程，若成功则输出123

3.1 准备

可参考Electron官网地址
需要node和npm，先检测是否安装。

node -v
npm -v

在这里插入图片描述

3.2 项目初始化

命令行创建

mkdir my-electron-app && cd my-electron-app
npm init

或者，手动快速创建
在这里插入图片描述

package.json文件

{
   
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "test Electron",
  "main": "main.js",
  "author": "Bin9153",
  "license": "MIT"
}

有几条规则需要遵循：

entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。
在这里插入图片描述

3.3 安装 Electron

npm install --save-dev electron
//或者
npm install electron -D

3.4 配置并启动

在 package.json配置文件中的scripts字段下增加一条start命令：

{
   
   
  "scripts": {
   
   
    "start": "electron ."
  }
}

这一步，完整的package.json

{
   
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
   
   
    "start": "electron ."
  },
  "author": "bin9153",
  "license": "ISC",
  "description": "electron test",
  "dependencies": {
   
   
    "electron": "^31.2.0"
  }
}

代码解析：
package代码解析
创建main.js。
在这里插入图片描述
在main.js里写入

console.log(123)

在这里插入图片描述

再运行！

npm start

注意：

先创建main.js，否则报错
如果main.js里没写输出（或其他代码）则，启动了运行窗口也不容易看出变化

启动输出123
成功输出123，工程搭建完成。

四、开始制作程序

4.1 案例1：做一个简易网页程序

点击可以查看，browser-window配置项的开发文档
在main.js里写入

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

app.on('ready', () => {
   
   
    //当app准备好后，执行createWindow创建窗口
    const win = new BrowserWindow({
   
   
        width: 800,//窗口宽度
        height: 600,//窗口高度
        autoHideMenuBar: true,//自动隐藏菜单档
        alwaysOnTop: true,//置顶
        x: 0,//窗口位置x坐标
        y: 0//窗口位置y坐标
    })
    //加载一个远程页面
   win.loadURL('https://blog.csdn.net/qq_33650655/article/details/140353815')
})