12个例⼦带你⼊门Electron[8000字附源码]
从零学习创建第⼀个Electron应⽤
随着前端快速的发展，在任何开发领域都有前端的⼀席之地。那如何使⽤前端进⾏桌⾯端应⽤的开发呢？Electron是⼀个不错的选择。
Electron是什么呢?
Electron就是使⽤ JavaScript，HTML 和 CSS 构建跨平台的桌⾯应⽤程序.
Electron是由github开发的开源框架
它允许开发者使⽤web技术开发跨平台的桌⾯应⽤
Electron = Chromium + Node.js + Native API
Chromium：提供了强⼤的ui能⼒，利⽤强⼤的web⽣态来开发界⾯。
Node.js：让 Electron有了底层才做能⼒，⽐如读写能⼒，并且可以使⽤⼤量的开源包来完成项⽬的开发。
Native API：让Electron有了跨平台和桌⾯端的原⽣能⼒，⽐如有同意的原⽣界⾯、窗⼝、托盘。
❝
今天我们就来看看如何从零开始学习electron，⽤前端技术构建的桌⾯应⽤程序
❞
创建第⼀个Electron应⽤
1. 新建⽂件夹(命名记得不要出现中⽂)，初始化项⽬
npm init
会⽣成package.json ⽂件
⽂件内容如下
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
别急
npm init 以后会让我们填写⼀些配置信息，不知道如何填写⼀路回车即可
当然也可以执⾏ npm init -y
1. 安装electron
❝
npm install --save-dev electron
❞
如果安装的时候遇到什么问题(⼤部分报错或太慢)可以看看npm是否切换了淘宝镜像
❝
npm config set registry registry.
❞
也可以配置⼀下electron镜像
❝
npm config set ELECTRON_MIRROR /mirrors/electron/❞
我们来测试⼀下electron是否安装成功
安装成功我们能看到electron的窗⼝打开
❝
命令⾏内执⾏ npx electron
❞
看看electron的版本号
❝
npx electron -v
❞
1. 根⽬录下创建main.js⽂件(主进程) electron主进程
const { app, BrowserWindow } = require('electron');
let mainWindow = null;
<('ready', () => {
mainWindow = new BrowserWindow({ // 创建和控制浏览器窗⼝
width: 800, // 窗⼝宽度
height: 600, // 窗⼝⾼度
webPreferences: { // ⽹页功能设置
nodeIntegration: true, // 是否在node⼯作器中启⽤⼯作集成默认false
enableRemoteModule: true, // 是否启⽤remote模块默认false
}
});
mainWindow.loadFile('index.html'); // 加载页⾯
<('close', () => { // 监听窗⼝关闭
mainWindow = null
})
})
1. 根⽬录下创建index.html （需要加载的页⾯）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">
点击弹窗
</button>
<script src="./render/index2.js"></script>
</body>
</html>
1. 修改paceage.json⽂件中的main的值，main表⽰需要启动的脚本， 将scripts 的test 修改为⾃⼰需要的名字或者只修改test 的值
❝
修改为如下
❞
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
},
"author": "",
"license": "ISC",
"dependencies": {
}
}
1. 仅接着
❝
npm run start 好的我们的第⼀个electron运⾏起来了
❞
electron的运⾏流程
1. 读取package.json⽂件中的⼊⼝⽂件，这⾥就是我们的main.js
2. main.js中我们引⼊electron 创建了渲染进程
3. index.html就是应⽤页⾯的布局和样式
4. 使⽤IPC在主进程执⾏任务并获取信息
可能上⾯的前三点都能明⽩，但是第四点不知道是什么，没事我们现在只要知道他的运⾏流程即可内部实现先不做深究。
现在我们只需要知道main.js是主进程，index.html是渲染进程即可。
试试node.js的读取
我们先将⽬录结构规划⼀下
─package-lock.json
├─package.json
├─src
| ├─main.js
| ├─render
| | ├─index.html
| | ├─
| | ├─yellow.html
| | ├─js
| | | ├─index.js
简单的划分后我们来看看是如何读取⽂件
1. 我们在render⽬录下创建⼀个⽂件，⾥⾯写上被读取到啦。
2. 接着在render中创建⼀个js⽂件夹在js⽂件夹内创建index.js⽂件。
3. 在index.html中添加⼀个按钮，添加⼀个div标签(⽤于显⽰内容)，并且引⼊index.js。
4. 接着在index.js中获取按钮元素，读取⽂件内容
代码如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击获取⽂件信息</button>
<div id="filesData"></div>安卓开发实例入门
<script src="./js/index.js"></script>
</body>
</html>
index.js
// read
const fs = require('fs');
const path = require('path')
const btnRead = document.querySelector('#btnRead');
const filesDaata = document.querySelector('#filesData');
const btnWrite = document.querySelector('#btnWrite');
console.log(data);
filesDaata.innerHTML = data
})
}
fs.writeFile(path.join(__dirname,''),'添加1111', 'utf8',err=>{
console.log(err)
})
}
}
main.js
const { app, BrowserWindow } = require("electron");
let mainWindow = null;
<("ready", () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
});
mainWindow.loadFile(require('path').join(__dirname, './render/index.html'));
<("close", () => {
mainWindow = null;
});
});
上⾯就是利⽤了node.js的读写取能⼒。
remote模块的使⽤
说Remote之前我们要明确⼀点，当我们知道了Electron是分主进程、渲染进程后，还需要知道Electron的API⽅法和模块也是分主进程、渲染进程。
回到我们Remote的使⽤
Remote是渲染进程（web页⾯）和主进程通信（IPC）提供⼀种简单的⽅法。
1. 在index.html中写上⼀个按钮，通过点击事件创建⼀个新的窗⼝
2. 创建⼀个yellow.html⽤作新建窗⼝的渲染进程
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论