1-Electron基础
Electron基础
安装Electron
- NodeJS官网安装node js环境：http://nodejs.org/，安装后可以通过npm -v或node -v检查是否正常安装
- 创建新文件夹，在文件夹内首先初始nodejs环境：npm init
- 创建Electron环境，在全局安装：
npm install -g electron - 检测Electron是否安装成功，
electron -v查看Electron版本号 - 启动Electron服务，在对应文件夹下：
electron .
完成一个HelloWorld页面
- 首先创建html页面并编写相关内容
- 创建main.js或index.js作为主进程控制文件，编写整个应用进程的启动逻辑
- 初始化nodejs文件
- 启动electron服务
测试界面
<body>
<h1>Hello World</h1>
</body>main.js主进程控制文件
var electron =require('electron')
var app=electron.app //引用APP，负责整个应用程序控制，即主进程
var BrowserWindow=electron.BrowserWindow //窗口引用，负责对窗口的操作
var mainWindow=null //声明要开启的主窗口
//编写应用启动状态下的逻辑
app.on('ready',()=>{
//初始化主界面并设置长宽
mainWindow=new BrowserWindow({width:700,height:300})
//加载主界面视图文件
mainWindow.loadFile("test.html")
//编写关闭窗口时的逻辑
mainWindow.on('closed' ,()=>{
mainWindow=null //将主窗口置空，达到关闭效果
})
})
Electron中的主进程与渲染进程
由于Electron基于Chromium架构，所以自然而然遵循其多进程架构，一个完整的Electron应用包含多个进程，这些进程被分为主进程与渲染进程
主进程
一个Electron应用有且仅有一个主进程，主进程的控制文件由Node.JS配置文件package.json中的main属性声明，一般为main.js或index.js，创建或销毁窗口等所有系统事件，都需要定义在主进程的控制文件中，统一由主进程管理。
渲染进程
一个Electron应用可以有多个渲染进程，没创建一个新页面就需要一个新的渲染进程。每个渲染进程都是独立的，任意一个渲染进程报错或崩溃都不会影响其他渲染进程运行
主进程和渲染进程的区别
- 主进程通过BrowserWindow创建页面
- 每个BrowserWindow实例都在自己的渲染进程中运行, 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止
Electron运行流程
- 读取package.json的中的入口文件,即main.js
- main.js在主进程中创建渲染进程
- 读取应用页面的布局和样式
- 使用IPC在主进程执行任务并获取信息
主进程与渲染进程之间通信
主进程与渲染进程之间通过IPC进行通信
主进程
var electron = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow;
var mainWindow = null ;
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width:500,
height:500,
//开放nodejs，必须加入这两句 否则无法在渲染进程中正常加载fs
webPreferences:{ nodeIntegration: true,
contextIsolation: false}
})
mainWindow.loadFile('test.html')
mainWindow.on('closed',()=>{
mainWindow = null
})
})渲染进程
var fs = require('fs'); //加载fs
window.onload = function(){
//获取按钮和div控件
var btn = this.document.querySelector('#btn')
var content = this.document.querySelector('#content')
//设置按钮点击事件
btn.onclick = function(){
//读取文件并写入渲染进程数据中
fs.readFile('test.txt',(err,data)=>{
content.innerHTML = data
})
}
} 测试页面
<body>
<Button id="btn">点击查看文件内容</Button><br/>
<div id="content"></div>
</body>最终展示效果
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
