从零学习创建第一个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应用
新建文件夹(命名记得不要出现中文)，初始化项目
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
安装electron
❝npm install --save-dev electron
❞
如果安装的时候遇到什么问题(大部分报错或太慢)可以看看npm是否切换了淘宝镜像
❝npm config set registry https://registry.npm.taobao.org
❞
也可以配置一下electron镜像
❝npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
❞
我们来测试一下electron是否安装成功
安装成功我们能看到electron的窗口打开
❝命令行内执行 npx electron
❞
看看electron的版本号
❝npx electron -v
❞
根目录下创建main.js文件(主进程) electron主进程
const { app, BrowserWindow } = require('electron');
let mainWindow = null;
app.on('ready', () => {
mainWindow = new BrowserWindow({ // 创建和控制浏览器窗口
width: 800, // 窗口宽度
height: 600, // 窗口高度
webPreferences: { // 网页功能设置
nodeIntegration: true, // 是否在node工作器中启用工作集成默认false
enableRemoteModule: true, // 是否启用remote模块默认false
}
});
mainWindow.loadFile('index.html'); // 加载页面
mainWindow.on('close', () => { // 监听窗口关闭
mainWindow = null
})
})
根目录下创建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>
修改paceage.json文件中的main的值，
main表示需要启动的脚本， 将scripts 的test 修改为自己需要的名字或者只修改test 的值
❝修改为如下
❞
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
},
"author": "",
"license": "ISC",
"dependencies": {
}
}
仅接着
❝npm run start 好的我们的第一个electron运行起来了
❞
electron的运行流程
读取package.json文件中的入口文件，这里就是我们的main.js
main.js中我们引入
electron创建了渲染进程index.html就是应用页面的布局和样式
使用IPC在主进程执行任务并获取信息
可能上面的前三点都能明白，但是第四点不知道是什么，没事我们现在只要知道他的运行流程即可内部实现先不做深究。
现在我们只需要知道main.js是主进程，index.html是渲染进程即可。
试试node.js的读取
我们先将目录结构规划一下
─package-lock.json
├─package.json
├─src
| ├─main.js
| ├─render
| | ├─index.html
| | ├─text.txt
| | ├─yellow.html
| | ├─js
| | | ├─index.js
简单的划分后我们来看看是如何读取文件
我们在render目录下创建一个test.txt文件，里面写上
被读取到啦。接着在render中创建一个js文件夹在js文件夹内创建index.js文件。
在index.html中添加一个按钮，添加一个div标签(用于显示内容)，并且引入
index.js。接着在
index.js中获取按钮元素，读取test.txt文件内容
代码如下：
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');
window.onload = ()=>{
btnRead.onclick = () => {
fs.readFile(path.join(__dirname, 'text.txt'),(err,data)=>{
console.log(data);
filesDaata.innerHTML = data
})
}
btnWrite.onclick = () => {
fs.writeFile(path.join(__dirname,'text.txt'),'添加1111', 'utf8&
最低0.47元/天 解锁文章
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
