1. 简介

官网
Electron是由GitHub开发，使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用
在PC端混合app开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体, 而electron相对而言是更好的选择方案，它的社区相对比较活跃，bug比较少，文档先对利索简洁。
electron 相对来说比 nw.js 靠谱。有一堆成功的案例：Atom 编辑器 2. Slack (那个独角兽公司）3. Visual Studio Code 4. WordPress 等等。。
Node. js 的所有内置模块都在Electron中可用，第三方 node 模块中也完全支持 (包括原生模块 )。
Electron 还为开发原生桌面应用程序提供了一些额外的内置模块。某些模块仅在主进程中可用, 有些仅在渲染进程 (web 页) 中可用, 而有些在这两个进程中都可以使用。

2. 五分钟快速上手

2.1 安装electron

npm init
cnpm I electron –S
npx electron

2.2 配置为入口文件

{"name": "electron-demo","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."},"author": "","license": "ISC","dependencies": {"electron": "^8.3.0"}
}

2.3 创建main.js文件

const electron = require('electron')const app = electron.app app.on('ready', ()=>{new electron.BrowserWindow({width: 800,height: 300})
})

2.4创建窗口

app.on('ready', ()=>{const mainWindow = new BrowserWindow({width: 800,height: 500})mainWindow.loadFile('./index.html')
})

3. 主进程和渲染进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它的叫渲染进程的进程中。

在普通的浏览器中，web页面无法访问操作系统的原生资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

ctrl+shift+i打开渲染进程调试

app.on('ready', ()=>{const mainWindow = new BrowserWindow({width: 800,height: 500})mainWindow.loadFile('./index.html')const mainWindow2 = new BrowserWindow({width: 800,height: 500})mainWindow2.loadFile('./index2.html')
})

4. 自定义原生菜单

4.1 自定义菜单

const electron = require('electron')const { app, Menu } = electron
const template = [{label: '文件',submenu: [{label: '新建窗口'}]},{label: '编辑',submenu: [{label: '新建窗口'}]}
]
const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)

4.2 给菜单定义点击事件

1、点击打开新窗口

submenu: [{label: '新建窗口',click: ()=>{const newMainWindow = new BrowserWindow({width: 300,height: 300})newMainWindow.loadFile('./new.html')}}
]

2、点击打开浏览器

const { BrowserWindow, Menu, shell } = require('electron')
const template = [{label: '文件',submenu: [{label: '文件1',click () {// 点击打开新窗口const mainWindow2 = new BrowserWindow({width: 600,height: 600})mainWindow2.loadFile('./index.html')}}]},{label: 'csdn',click () {// 点击打开浏览器shell.openExternal('https://www.csdn.net/')}}
]

4.3 抽离菜单定义

const { BrowserWindow, Menu} = require('electron')
const template = [{label: '文件',submenu: [{label: '新建窗口',click: ()=>{const newMainWindow = new BrowserWindow({width: 300,height: 300})newMainWindow.loadFile('./new.html')}}]},{label: '编辑',submenu: [{label: '新建窗口'}]}
]
const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)

require('./menu')

打开调式

mainWindow.webContents.openDevTools()

4.4 自定义顶部菜单

通过frame创建无边框窗口

const mainWindow = new electron.BrowserWindow({frame: false
})

自定义窗口

<div class="header" style="-webkit-app-region: drag;"></div>

icon

const mainWindow = new electron.BrowserWindow({width: 1000,height: 600,webPreferences: {nodeIntegration: true},frame: false,icon: './hm.ico'})

backgroundColor

4.5 定义右键菜单

js>index.js


const { remote } = require('electron')
const template = [{label: '粘贴'},{label: '赋值'}
]
const menu = remote.Menu.buildFromTemplate(template)window.addEventListener('contextmenu', (e) => {console.log(123)e.preventDefault()menu.popup({ window: remote.getCurrentWindow() })
})

在index.html中引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><button>打开新的窗口</button><script src="./js/index.js"></script>
</body>
</html>

能够在html中使用node方法

const mainWindow = new BrowserWindow({width: 800,height: 500,webPreferences: {nodeIntegration: true}
})

4.6 点页面打开浏览器

html

<a id="a1" href="https://blog.csdn.net/weixin_41819098">打开浏览器</a>

const { shell } = require('electron')
const allA = document.querySelectorAll('a')allA.forEach(item => {item.onclick = function (e) {e.preventDefault()console.log(item)shell.openExternal(item.href)}
})

5. 自动刷新页面

安装插件

cnpm install --save-dev electron-reloader

在入口引入插件

const reloader = require('electron-reloader')
reloader(module,{})

6. 拖拽文件进行读取

定义拖拽到指定区域

<div id="drop">
</div>

#drop {width: 300px;height: 500px;background: hotpink;
}

添加拖拽事件获取文件路径

// 添加拖拽
const dropEl = document.querySelector('#drop')
dropEl.addEventListener('drop', function(e) {if(e.dataTransfer.files.length === 1) {const filePath = e.dataTransfer.files[0].path}
})dropEl.addEventListener('dragover', function (e) {e.preventDefault()
})

引入fs模块进行读取

const fs = require('fs')// 添加拖拽
const dropEl = document.querySelector('#drop')
dropEl.addEventListener('drop', function(e) {if(e.dataTransfer.files.length === 1) {const filePath = e.dataTransfer.files[0].pathconst fileContent = fs.readFileSync(filePath).toString()this.innerText = fileContent}
})dropEl.addEventListener('dragover', function (e) {e.preventDefault()
})

7. 打开对话框

7.1 读取文件

定义点击事件

<button onclick="openFile()">打开</button>

定义事件函数

// 打开对话框
function openFile() {const res = remote.dialog.showOpenDialogSync({title: '选择文件',buttonLabel: '哈哈',filters: [{ name: 'Custom File Type', extensions: ['js','html','json'] },]})const fileContent = fs.readFileSync(res[0]).toString()dropEl.innerText = fileContent
}

7.2 保存文件

定义点击事件

<button onclick="saveFile()">保存</button>

事件函数

// 保存对话框
function saveFile() {const res = remote.dialog.showSaveDialogSync({title: '保存文件',buttonLabel: '保存文件',filters: [{ name: 'index', extensions: ['js'] },]})fs.writeFileSync(res, 'hahhdasdshafsdahjk')
}

8. 消息提示

定义事件

<button onclick="messageBox()">提示</button>

事件函数

// 提示信息
function messageBox() {remote.dialog.showMessageBoxSync({type: 'none',buttons: ['确定'],title: '提示消息',message: '明天会下雨呦'})
}

9. 定义快捷键

9.1 主线程定义

引入

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

在ready中注册快捷键

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

9.2 渲染进程定义

通过remote注册

// 定义快捷键
remote.globalShortcut.register('Ctrl+O', () => {console.log('ctrl+o')
})

定义快捷键最大、最小、关闭窗口

globalShortcut.register('Ctrl+T',()=>{mainWindow.unmaximize();})globalShortcut.register('Ctrl+H',()=>{mainWindow.close()})globalShortcut.register('Ctrl+M',()=>{mainWindow.maximize()})

10. 渲染进程和主线程通讯

定义按钮

<div class="maxWindow no-drag" onclick="maxWindow()"></div>

事件函数

function maxWindow() {ipcRenderer.send('max-window')
}

主线程定义事件

ipcMain.on('max-window', () => {mainWindow.maximize()})

传参

let windowSize = 'unmax-window'
function maxWindow() {windowSize = windowSize === 'max-window' ?'unmax-window':'max-window'ipcRenderer.send('max-window',windowSize)
}

接收参数

ipcMain.on('max-window', (event,arg) => {console.log(arg)if(arg === 'unmax-window') return mainWindow.maximize();mainWindow.unmaximize()})

通过isMaximized判断当前窗口

11. 网络请求

async function getMsg () {const res = await fetch('http://127.0.0.1:3006/api/person').then(res=>res.json())console.log(res)
}

12 .electron结合框架开发

12.1 结合react

利用react初始化项目

npx create-react-app electron-react
cd electron-react
npm start

安装electron

cnpm i electron

添加electron的任务

"main": "main.js",
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","electron": "electron ."},

添加main.js https://github.com/electron/electron-quick-start/blob/master/main.js

const {app, BrowserWindow} = require('electron')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600})// Open the DevTools.// mainWindow.webContents.openDevTools()
}app.whenReady().then(() => {createWindow()
})

加载react项目

mainWindow.loadURL('http://localhost:3000/')

12.2 electron结合vue

同react

13 electron打包

将vue项目打包

修改electron引入的文件

mainWindow.loadFile('./dist/index.html')

安装electron-packager

"packager": "electron-packager ./ HelloWorld --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./favicon.ico"

electron实现桌面应用相关推荐

使用 AngularJS 和 Electron 构建桌面应用
使用 AngularJS 和 Electron 构建桌面应用 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨 ...
送你一份用Electron开发桌面应用的避坑指南【送3本书，含犀牛书】
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,新年第一次送3本书.抽奖规则见文末. 如今,Electron 领域发生了重大的变革,Electro ...
Electron开发桌面应用
由 Bazzzinga威同学翻译自 Medium.https://medium.com/developers-writing/building-a-desktop-application-with- ...
AngularJS 和 Electron 构建桌面应用
译]使用 AngularJS 和 Electron 构建桌面应用原文: Creating Desktop Applications With AngularJS and GitHub Electro ...
使用vue+electron创建桌面软件（一）
使用vue项目,添加electron,创建桌面软件.软件的本地运行.打包等功能环境配置 node环境开发环境:linux vue-vli 若没有vue环境,则终端安装:npm install -g ...
新星计划 Electron+vue2 桌面应用 2 搭建及运行
基础内容:新星计划 Electron+vue2 桌面应用 1 基础_lsswear的博客-CSDN博客根据使用过的经验和官网的描述,大概可以有四种方式: 自己创建项目(仅使用npm) 用Electr ...
vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用一.安装 1. 把electron的官方demo下载下来 2. 安装cnpm 3. npm start 启动electron 4. 修改vue项目 5. 打 ...
记一次electron开发桌面英语(自用，类歌词）
记一次electron开发桌面英语(自用,类歌词) 晒一下自己的考试成绩单,不感兴趣可以跳过制作初心进入正题功能安装(略) 项目结构目录 package.json main.js index. ...
ZEGO教程：如何通过electron构建桌面跨平台音视频应用
近年来,视频直播.短视频.在线教育.在线医疗.人工智能.以及VR等视频领域的相关行业都非常热门,成为大众瞩目的焦点.而5G网络的相继普及,移动网速飞速提升,又将引起下一轮视频应用的革命. 可以看到,在 ...
采用electron开发桌面应用
什么是electron,能做什么? 1.electron是搭载谷歌v8内核的高性能的node环境 ,所有node能用的东西.这里都能用. 2.前端做桌面应用. 前端做桌面应用(electron, nw ...

electron实现桌面应用

1. 简介

2. 五分钟快速上手

2.1 安装electron

2.2 配置为入口文件

2.3 创建main.js文件

2.4创建窗口

3. 主进程和渲染进程

4. 自定义原生菜单

4.1 自定义菜单

4.2 给菜单定义点击事件

4.3 抽离菜单定义

打开调式

4.4 自定义顶部菜单

4.5 定义右键菜单

4.6 点页面打开浏览器

5. 自动刷新页面

6. 拖拽文件进行读取

7. 打开对话框

7.1 读取文件

7.2 保存文件

8. 消息提示

9. 定义快捷键

9.1 主线程定义

9.2 渲染进程定义

10. 渲染进程和主线程通讯

11. 网络请求

12 .electron结合框架开发

12.1 结合react

利用react初始化项目

安装electron

12.2 electron结合vue

13 electron打包

electron实现桌面应用相关推荐

最新文章

热门文章