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

news2024/9/22 11:39:27

一、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

注意：

  1. 先创建main.js，否则报错
  2. 如果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')
})

运行

 npm start

制作一个远程界面
成功显示页面。
页面成功运行

4.2 案例2：做一个本地程序（不是远程链接页面，是自己写的页面）

4.2.1 是本地程序，所以创建新的页面

新建pages目录，创建页面，这里就像写前端一样了。index.html,index.css
在这里插入图片描述
index.html里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>这里是index页面</title>
</head>

<body>
<h1>
    这里是index里的标题
</h1>
</body>
</html>

main.js里引入页面

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

app.on('ready', () => {

    //当app准备好后，执行createWindow创建窗口
    const win = new BrowserWindow({
        width: 800,//窗口宽度
        height: 600,//窗口高度
        autoHideMenuBar: true,//自动隐藏菜单档
        alwaysOnTop: true,//置顶
    })
    //引入页面
    win.loadFile('./pages/index/index.html')

})

运行

npm start

4.2.2 解决内容安全策略

有安全提示
在这里插入图片描述
在index.html里加入，如下代码，内容安全策略警告提示消失。

//electron 提供的配置 成功运行
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
//electron 提供的配置2 引入js后也会报错
<meta http-equiv="Content-Security-Policy" content="default-src none">
//视频教程里的配置 会报错
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self''unsafe-inline';img-src self'data:;">
//我自己写的组合的配置更全 加了一个script的限制,有事儿后期再改， 刚试了会报错，可能哪里没写对，先记录在这里
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';style-src 'self''unsafe-inline';img-src self'data:;">

安全策略代码详解

关于CSP的详细说明：MDN内容安全策略详解 、Electron安全策略规范

4.2.3 增加多系统的兼容代码

兼容mac(完善窗口行为）
electron文档：
关闭所有窗口时退出应用 (Windows & Linux)
如果没有窗口打开则打开一个窗口 (macOS)
在main.js里写入兼容各个系统平台的代码

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

function createWindow(){
    //当app准备好后，执行createWindow创建窗口
    const win = new BrowserWindow({
        width: 800,//窗口宽度
        height: 600,//窗口高度
        autoHideMenuBar: true,//自动隐藏菜单档
        alwaysOnTop: true,//置顶
    })
    win.loadFile('./pages/index/index.html')
}
app.on('ready', () => {
    createWindow()

    //兼容核心代码 1
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })


})

//兼容核心代码 2
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

代码解析
在这里插入图片描述

下面两句代码相等

app.on('ready', () => {
   // 写核心代码
})
// 或者
app.whenReady().then(() => {
  //写核心代码
})

4.2.4 配置自动重启,保存后自动热更新

npm i nodemon -D

package.json里重写start

 "start": "nodemon --exec electron ."

重写start

这样保存main.js里的内容，就自动热更新了。
但是更新index.html里的代码不能热更新，要加一个nodemon.json，需要手动添加

{
  "ignore":[
    "node modules",
    "dist"
  ],
  "restartable":"r",
  "watch":["*.*"],
  "ext":"html,js,css"
}

增加nodemon.json,
增加nodemon文件和内容
重启生效

npm start

4.2.5 编写页面程序(写一个应用程序，可以写入任意文字到hello.text里)

页面程序要写在页面里，那它和主进程的关系如图
Electron流程模型图
每个页面程序通过渲染和主进程通信，主进程根据需求调用Native Api来实现功能。

实际，每个页面和主程序通信时，需要建个桥梁来管理它们的通信，preload.js(自己创建)，来管理实现通信。
在这里插入图片描述
创建preload.js定义桥梁js
创建preloadjs
在main.js中定义preload.js为桥梁
在main.js里定义桥梁

main.js代码：

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

function createWindow(){
    //当app准备好后，执行createWindow创建窗口
    const win = new BrowserWindow({
        width: 800,//窗口宽度
        height: 600,//窗口高度
        autoHideMenuBar: true,//自动隐藏菜单档
        alwaysOnTop: true,//置顶
        webPreferences:{  //在main.js中定义preload.js为桥梁
            preload:path.resolve(__dirname,'./preload.js')

        }
    })
    //引入页面
    win.loadFile('./pages/index/index.html')
    win.openDevTools()  //自动打开调试窗口
    console.log("main.js里的main.js")
}

app.on('ready', () => {
    createWindow()
    //兼容核心代码1
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

})

创建渲染js
在这里插入图片描述
定义渲染js
定义渲染js
这是自己整理的，整理了前面45分钟，再这么整理下去，1000字也不够用。
下面写代码不详细介绍了。会点前端的能懂一半多代码。
可以看原来的教程 从45分钟开始看。视频教程
直接上代码。

main.js里的代码

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

//写入文件
function writeFile(_, data) {
    fs.writeFileSync('D:/hello.txt', data)
}
//读取文件
function readFile() {
    const res = fs.readFileSync("D:/hello.txt").toString()
    return res
}

function createWindow() {
    //当app准备好后，执行createWindow创建窗口
    const win = new BrowserWindow({
        width: 800,//窗口宽度
        height: 600,//窗口高度
        autoHideMenuBar: true,//自动隐藏菜单档
        alwaysOnTop: true,//置顶
        webPreferences: {  //在main.js中定义preload.js为桥梁
            preload: path.resolve(__dirname, './preload.js')

        }
    })
    ipcMain.on('file-save', writeFile)
    ipcMain.handle('file-read', readFile)
    //引入页面
    win.loadFile('./pages/index/index.html')
    win.openDevTools()  //自动打开调试窗口
    console.log("main.js里的main.js")
}

app.on('ready', () => {
    createWindow()
    //兼容核心代码1
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

})

preload.js里的代码

const {contextBridge, ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
    version: process.version,
    saveFile: (data) => {
        ipcRenderer.send('file-save', data)
    },
    readFile() {
        return ipcRenderer.invoke('file-read')
    }
})

render.js里的代码

const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")
const btn3 = document.getElementById("btn3")
const input = document.getElementById("inp")
btn1.onclick = () => {
    alert(myAPI.version)
}
btn2.onclick = () => {
    myAPI.saveFile(input.value)
}
btn3.onclick = async() => {
    const res = await myAPI.readFile()
    alert(res)
}

html里的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>这里是index页面</title>
</head>

<body>
<h1>欢迎学习Electron开发！！！</h1>
<button id="btn1">点我</button>
<hr/>
<input type="text" id="inp"/>
<button id="btn2">向D盘写入hello.txt</button>
<hr>
<button id="btn3">读取hello.txt的内容</button>
</body>

<script type="text/javascript" src="./render.js"></script>
</html>

目录结构

在这里插入图片描述

备注：
1.代码稍微有点不一样
2.目录结构也有变化，功能是一样的

五、打包

5.1 使用electron-builder打包，打包时要访问github需要修仙术

1.安装electron-builder:

npm install electron-builder -D

2.在package.json中进行相关配置，具体配置如下：

备注：json文件不支持注释，使用时请去掉所有注释。

打包配置图

package.json里的代码

{
  "name": "video-tools",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.atguigu.video",
    "win": {
      "icon": "./logo.ico",
      "target": [
        {
          "target": "nsis",
          "arch": ["x64"]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    }
  },
  "devDependencies": {
    "electron": "^30.0.0",
    "electron-builder": "^24.13.3"
  },
  "author": "宝码香车",
  "license": "ISC",
  "description": "A video processing program based on Electron"
}

根据视频操作未能完成打包，这种方式在打包时 访问github 多次尝试后，决定放弃

5.2 使用Electron Forge进行打包（使用这种方式打包的）

Electron中文网也推荐使用这种方式。
Electron Forge是从建项目开始配置 的，因为项目已经写完了，所以从第五步开始。
Electron Forge 从第五步开始的文档

5.2.1 使用3条命令，完成打包。

1、运行第1条命令

npm install --save-dev @electron-forge/cli

2、运行第2条命令

npx electron-forge import

这时在packgae.json里会增加一些配置。

在package里增加配置
不用管。

3、直接运行第3条命令

npm run make

打包完成。

5.2.2 打包后的位置,在根项目下的out文件里

打包后的文件,在根项目下的out文件夹里

打包后的文件

可运行程序在 my-electron-app\out\make\squirrel.windows\x64

可运行程序

5.2.3 看运行效果，终于完成了。

完成运行效果

5.2.4 出现的bug

1.安装一次后再打开会报错，
再次安装报错

2.直接删除软件，目录在 C:\Users\Administrator\AppData\Roaming 删除my_electron_app这个文件夹。然后用360安全卫士清理垃圾。然后重启即可。

其他bug
1.软件有卡死的现象
2.还会自动重启
3.软件关闭后会自动重启
4.在输入框中输入内容，写入后可能会卡死，第二次可能无法输入，但可以读取。
5.启动时有点卡

六、总结

1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。
2.也有可能与main.js写法有关。
3.打包时删除main.js里的 win.openDevTools() //自动打开调试窗口 否则软件会自动打开调试窗口。
4. 代码仓库位置 https://gitee.com/electron_9/my-electron-app

终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。

整理不易点赞关注支持宝码香车

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1928452.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qt实现MDI应用程序

Qt实现MDI应用程序

本文记录Qt实现MDI应用程序的相关操作实现 目录 1.MDM模式下窗口的显示两种模式 1.1TabbedView 页签化显示 1.2 SubWindowView 子窗体显示 堆叠cascadeSubWindows 平铺tileSubWindows 2.MDM模式实现记录 2.1. 窗体继承自QMainWindow 2.2.增加组件MdiArea 2.3.定义统一…
阅读更多...
react自定义校验报错问题修复 ProFormText

react自定义校验报错问题修复 ProFormText

1、以下是tsx组件 自定义校验告警导致表单无法提交问题修复 修改如下&#xff1a;
阅读更多...
Mac Dock栏多屏幕漂移固定的方式

Mac Dock栏多屏幕漂移固定的方式

记录一下 我目前的版本是 14.5 多个屏幕&#xff0c;Dock栏切换的方式&#xff1a; 把鼠标移动到屏幕的中间的下方区域&#xff0c;触到边边之后&#xff0c;继续往下移&#xff0c;就能把Dock栏固定到当前屏幕了。
阅读更多...
flutter 手写 TabBar

flutter 手写 TabBar

前言&#xff1a; 这几天在使用 flutter TabBar 的时候 我们的设计给我提了一个需求&#xff1a; 如下 Tabbar 第一个元素 左对齐&#xff0c;试了下TabBar 的配置&#xff0c;无法实现这个需求&#xff0c;他的 配置是针对所有元素的。而且 这个 TabBar 下面的 滑块在移动的时…
阅读更多...
全开源TikTok跨境商城源码/TikTok内嵌商城/前端uniapp+后端+搭建教程

全开源TikTok跨境商城源码/TikTok内嵌商城/前端uniapp+后端+搭建教程

多语言跨境电商外贸商城 TikTok内嵌商城&#xff0c;商家入驻一键铺货一键提货 全开源完美运营 海外版抖音TikTok商城系统源码&#xff0c;TikToK内嵌商城&#xff0c;跨境商城系统源码 接在tiktok里面的商城。tiktok内嵌&#xff0c;也可单独分开出来当独立站运营 二十一种…
阅读更多...
论文翻译：通过云计算对联网多智能体系统进行预测控制

论文翻译：通过云计算对联网多智能体系统进行预测控制

通过云计算对联网多智能体系统进行预测控制 文章目录 通过云计算对联网多智能体系统进行预测控制摘要前言通过云计算实现联网的多智能体控制系统网络化多智能体系统的云预测控制器设计云预测控制系统的稳定性和一致性分析例子结论 摘要 本文研究了基于云计算的网络化多智能体预…
阅读更多...
ubuntu虚拟机安装ssh时报错 正在等待缓存锁

ubuntu虚拟机安装ssh时报错 正在等待缓存锁

问题&#xff1a; 连接vm ubuntu虚拟机安装ssh时报错 正在等待缓存锁。 sudo apt install openssh-server 处理办法 sudo rm /var/lib/dpkg/lock-frontend sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock
阅读更多...
ipynb转换为pdf、Markdown（.md）

ipynb转换为pdf、Markdown（.md）

Jupyter Notebook 文件&#xff08;.ipynb&#xff09;可以转换成多种数据格式&#xff0c;以适应不同的使用场景和需求。以下是几种常见的转换格式及其简洁描述&#xff1a; HTML: Jupyter Notebook可以直接导出为静态的网页&#xff08;HTML&#xff09;格式&#xff0c;这样…
阅读更多...
WPF 手撸插件 一

WPF 手撸插件 一

1、本文主要使不适用第三方工具&#xff0c;纯手工的WPF主项目加载另一个WPF的项目&#xff0c;这里我们加载的是*.exe。 2、项目结构如下图。AbstractionLayer用于创建插件的接口。WPFIPluginDemo是主程序。WpfPlugin3是要加载的插件程序。 3、 AbstractionLayer中添加接口IP…
阅读更多...
昇思25天学习打卡营第22天 | 基于MobileNetv2的垃圾分类函数式自动微分

昇思25天学习打卡营第22天 | 基于MobileNetv2的垃圾分类函数式自动微分

基于MobileNetV2的垃圾分类 本文档详细介绍了使用MobileNetV2模型进行垃圾分类的全过程&#xff0c;包括数据准备、模型搭建、模型训练、评估和推理等步骤。MobileNetV2是一种轻量级卷积神经网络&#xff0c;专为移动端和嵌入式设备设计&#xff0c;具有高效、低耗的特点。通过…
阅读更多...
昇思25天学习打卡营第21天|RNN实现情感分类

昇思25天学习打卡营第21天|RNN实现情感分类

这节课学习的是RNN实现情感分类&#xff0c;情感分类是自然语言处理中的经典任务&#xff0c;是典型的分类问题。本节使用MindSpore实现一个基于RNN网络的情感分类模型。 比如&#xff1a; 输入: This film is terrible 正确标签: Negative 预测标签: Negative 输入: This film…
阅读更多...
Matlab进阶绘图第63期—带标记线的三维填充折线图

Matlab进阶绘图第63期—带标记线的三维填充折线图

三维填充折线图是在三维折线图的基础上&#xff0c;对其与XOY平面之间的部分进行颜色填充&#xff0c;从而能够更好地刻画细节变化。 而带标记线的三维填充折线图是在其基础上&#xff0c;添加X相同的一条或多条标记线&#xff0c;以用于进一步讨论分析。 由于Matlab中未收录…
阅读更多...
Mongodb复合索引

Mongodb复合索引

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第90篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…
阅读更多...
Windows上LabVIEW编译生成可执行程序

Windows上LabVIEW编译生成可执行程序

LabVIEW项目浏览器(Project Explorer)中的"Build Specifications"就是用来配置项目发布方法的。在"Build Specifications"右键菜单中选取"New"&#xff0c;可以看到程序有几种不同的发布方法&#xff1a;Application(EXE)、Installer、.Net Inte…
阅读更多...
C# 基于共享内存实现跨进程队列

C# 基于共享内存实现跨进程队列

C# 进程通信系列 第一章 共享内存 第二章 共享队列&#xff08;本章&#xff09; 文章目录 C# 进程通信系列前言一、实现原理1、用到的主要对象2、创建共享内存3、头部信息4、入队5、出队6、释放资源 二、完整代码三、使用示例1、传输byte[]数据2、传输字符串3、传输对象 总结…
阅读更多...
HarmonyOS 屏幕适配设计

HarmonyOS 屏幕适配设计

1. armonyOS 屏幕适配设计 1.1. 像素单位 &#xff08;1&#xff09;px (Pixels)   px代表屏幕上的像素点&#xff0c;是手机屏幕分辨率的单位&#xff0c;即屏幕物理像素单位。 &#xff08;2&#xff09;vp (Viewport Percentage)   vp是视口百分比单位&#xff0c;基于…
阅读更多...
Java学习之SPI、JDBC、SpringFactoriesLoader、Dubbo

Java学习之SPI、JDBC、SpringFactoriesLoader、Dubbo

概述 SPI&#xff0c;Service Provider Interface&#xff0c;一种服务发现机制&#xff0c;指一些提供给你继承、扩展&#xff0c;完成自定义功能的类、接口或方法。 在SPI机制中&#xff0c;服务提供者为某个接口实现具体的类&#xff0c;而在运行时通过SPI机制&#xff0c…
阅读更多...
Facebook未来展望：数字社交平台的进化之路

Facebook未来展望：数字社交平台的进化之路

在信息技术日新月异的时代&#xff0c;社交媒体平台不仅是人们交流沟通的重要工具&#xff0c;更是推动社会进步和变革的重要力量。作为全球最大的社交媒体平台之一&#xff0c;Facebook在过去十多年里&#xff0c;不断创新和发展&#xff0c;改变了数十亿用户的社交方式。展望…
阅读更多...
构建企业多层社会传播网络：以AI智能名片S2B2C商城小程序为例

构建企业多层社会传播网络：以AI智能名片S2B2C商城小程序为例

摘要&#xff1a;在数字化转型的浪潮中&#xff0c;企业如何有效构建并优化其社会传播网络&#xff0c;已成为提升市场竞争力、深化用户关系及实现价值转化的关键。本文以AI智能名片S2B2C商城小程序为例&#xff0c;深入探讨如何通过一系列精细化的策略与技术创新&#xff0c;构…
阅读更多...
IP地址知识点

IP地址知识点

一、IP地址组成 把一个IP地址分成两部分&#xff1a;网络号&#xff08;标识了一个局域网&#xff09;主机号&#xff08;标识了一个局域网中的设备&#xff09; 下图是通过一个路由器连接的两个局域网&#xff08;两个相邻的局域网&#xff09;&#xff0c;网络号不相同&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023