electron学习教程 基本教程已测试完成
electron学习教程
- 1.介绍
-
- 2.五分钟快速上手
-
- 2.1 先创建index.html文件
- 2.2 再创建main.js文件
- 2.3 再安装electron
- 2.2 配置为入口文件
- 2.5 运行
- 3.自动刷新页面
- 4.主进程和渲染进程
- 5.自定义原生菜单
-
- 5.1 自定义菜单
- 5.2 给菜单定义点击事件
- 5.3 抽离定义 打开调试
- 5.4 自定义顶部菜单 支持拖拽
- 5.5 点击创建新窗口
- 5.6 点页面打开外部浏览器
- 6 打开对话框读取文件
-
- 6.1 读取文件
- 6.2 保存文件
- 7 定义快捷键
-
- 7.1 主线程定义
- 7.2 渲染进程定义
- 8 渲染进程和主线程通讯
- 9 electron 打包
- 10 electron结合框架开发
1.介绍
Electron 可以让你使用纯JavaScript调用丰富的原生APIs来创造桌面应用。你可以把它看作是专注于桌面应用
Node.js的所有内置模块都可以再Electron中使用
经典案例 ： Visual Studio Code WordPress 等等。。
总结：Electron是有GitHub众多开发者开发的一个开源项目，能够使用JavaScripy,HTML和CSS构建跨平台的桌面应用程序
2.五分钟快速上手
2.1 先创建index.html文件
随便创建一个html页面 这里可以随便写一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello electron
</body>
</html>
2.2 再创建main.js文件
把页面路径写正确
const { app, BrowserWindow } = require('electron')
//app控制应用程序的生命周期
//BrowserWindow 创建窗口
function createWindow (){
const win = new BrowserWindow({
width:800,
height:600
})
win.loadFile('index.html')
}
//完成初始化，触发一次
// app.on('ready',()=>{
app.whenReady().then(()=>{
createWindow()
//关闭应用程序
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
2.3 再安装electron
初始化pachage.json 文件,可以直接找到指定入口文件main.js
npm init --yes
安装electron
npm install electron -S
2.2 配置为入口文件
增加一条 “electron”:“electron .”
{
"name": "demo03",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"electron":"electron ."
},
"keywords": [],
"author": "",
"license": "ISC"
}
2.5 运行
npm run electron
3.自动刷新页面
安装插件
cnpm install --save-dev electron-reloader
在入口引入插件
const reloader = require('electron-reloader')
reloader(module)
main.js文件就变成了
const { app, BrowserWindow } = require('electron')
//app控制应用程序的生命周期
//BrowserWindow 创建窗口
function createWindow (){
const win = new BrowserWindow({
width:800,
height:600
})
win.loadFile('index.html')
}
//热加载
const reloader = require('electron-reloader')
reloader(module) //module是全局对象
//完成初始化，触发一次
// app.on('ready',()=>{
app.whenReady().then(()=>{
createWindow()
//关闭应用程序
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
重新启动就可以热更新了
4.主进程和渲染进程
Electron 运行package.json的main.js脚本的进程被称为是主进程 在主进程运行的脚本通过常见web页面来展示用户界面 一个Electron应用有且只有一个主进程
由于 Electron 使用了Chromium来展示web页面 所以 Chromium的多进程加工后也被使用到，每个Electron中的web页面运行在他的叫渲染进程的进程中
在普通的浏览器中 web页面无法访问操作系统的原生资源。然而Electron的用户在Node.js的API支持下在页面中和操作系统及逆行一些底层交互
ctrl+fhift+i 打开进程调试
默认打开调试
写在创建窗口下面
BrowserWindow.webContents.openDevTools()
5.自定义原生菜单
5.1 自定义菜单
官方网址 https://www.electronjs.org/zh/docs/latest/api/menu
要先构建MenuItem 教程：https://www.electronjs.org/zh/docs/latest/api/menu-item
main就变成了这个样子
const { app, BrowserWindow,Menu } = require('electron')
//app控制应用程序的生命周期
//BrowserWindow 创建窗口
function createWindow (){
const win = new BrowserWindow({
width:800,
height:600
})
win.loadFile('index.html')
//打开调试窗口
// win.webContents.openDevTools()
}
//热加载
const reloader = require('electron-reloader')
reloader(module) //module是全局对象
//完成初始化，触发一次
// app.on('ready',()=>{
app.whenReady().then(()=>{
createWindow()
//关闭应用程序
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
const template = [{
label:'憨憨'
},{
label:'小垃圾'
},{
label:'傻不拉几'
}]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
})
5.2 给菜单定义点击事件
const template = [{
label:'憨憨',
submenu:[{
label:'label',
toolTip:'提示提示提示提示',
click(){
new BrowserWindow({
width:800,
height:800
})
}
}],
toolTip:'提示提示提示提示'
},{
label:'小垃圾',
toolTip:'提示提示提示提示'
},{
label:'傻不拉几',
toolTip:'提示提示提示提示'
}]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
5.3 抽离定义 打开调试
新建menu.js
const { BrowserWindow,Menu } = require('electron')
const template = [{
label:'憨憨',
submenu:[{
label:'label',
toolTip:'提示提示提示提示',
click(){
new BrowserWindow({
width:800,
height:800
})
}
}],
toolTip:'提示提示提示提示'
},{
label:'小垃圾',
toolTip:'提示提示提示提示'
},{
label:'傻不拉几',
toolTip:'提示提示提示提示'
}]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
在main.js中初始化后进行加载menu.js
require('./js/menu')
5.4 自定义顶部菜单 支持拖拽
通过frame创建无边框窗口
const mainWindow = new electron.BrowserWindow({
width:800,
height:600,
frame:false
})
自定义菜单在页面中自定义顶部菜单
<div class="custom-menu">
<ul>
<li>新建窗口</li>
<li>关于我们</li>
</ul>
</div>
点击事件不起作用 要将-webkit-app-region:no-drag;加上
支持拖拽
增加支持拖拽
.custom-menu{
-webkit-app-region:drag;
}
增加不能拖拽
.custom-menu{
-webkit-app-region:no-drag;
}
5.5 点击创建新窗口
页面中定义一个button 然后给客户定义点击事件
获取不到点击可能是引入的js在DOM之前 js要放入到dom之后
const { remote: { BrowserWindow } } = require('electron')
const btn = document.querySelector('.btn')
btn.onclick = function(){
console.log('onclick')
new BrowserWindow({
width:700,
height:500
})
}
然后会报错 require is not defined at
需要在mainjs中开启node方法
老版本
new BrowserWindow({
width:800,
height:600,
webPreferences:{
nodeIntegration:true,
contextIsolation: false,
enableRemoteModule: true, // 这里是关键设置
}
})
新版本不适用 14版本以上废除了旧有的API
引入两篇介绍
第一篇： https://blog.csdn.net/u013362192/article/details/120148292
第二篇：https://www.cnblogs.com/axl234/p/15206270.html
我也没找到最新版本解决办法 最终将node-model 删了 将package.json中electron版本改成 “electron”: “^13.3.0”
{
"name": "demo03",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"electron": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@electron/remote": "^2.0.1",
"electron": "^13.3.0"
},
"devDependencies": {
"electron-reloader": "^1.2.1"
}
}
5.6 点页面打开外部浏览器
html
<a id="al" href="https://www.baidu.com">外部打开浏览器</a>
只写a链接只会在窗口内打开链接地址
js注册点击事件
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)
}
})
shell.openExternal('https://www.baidu.com/')
6 打开对话框读取文件
6.1 读取文件
定义点击事件
<button onclick="openFile()">打开</button>
定义事件函数
打开对话框文档：https://www.electronjs.org/zh/docs/latest/api/dialog
//点击打开文件按钮
function openFile(){
const res = dialog.showOpenDialogSync({
title:'读取文件',//打开文件标题
buttonLabel:'哈哈哈哈哈哈哈',//确认按钮文字
filters:[{//文件类型 更多类型查看https://www.electronjs.org/zh/docs/latest/api/dialog
name: 'Custom File Type', extensions: ['js']
}]
})
console.log(res[0])
console.log(fa.readFileSync(res[0]).toString())
}
6.2 保存文件
先读取文件：
<textarea id="textarea" cols="30" rows="10" class="textarea"></textarea>
<button onclick="preservation()">保存</button>
保存文件
function preservation(){
const res = remote.dialog.showSaveDialogSync({
title:'保存文件',
buttonLabel:'保存',
filters:[{
name: 'Custom File Type', extensions: ['js']
}]
})
fa.writeFileSync(res,textarea.value)
}
7 定义快捷键
7.1 主线程定义
引入 主线程引入 globalShortcut
const { app, BrowserWindow,Menu,globalShortcut } = require('electron')
在ready 中注册快捷键 因为是在主线程所以打印的话只能在命令行看到打印
更多命令可在https://www.electronjs.org/zh/docs/latest/api/browser-window
事件查看
globalShortcut.register('CommandOrControl+M',() =>{
mainWindow.maximize()
})
globalShortcut.register('CommandOrControl+N',() =>{
mainWindow.unmaximize()
})
7.2 渲染进程定义
remote.globalShortcut.register('Ctrol+N',() =>{
console.log('0')
})
8 渲染进程和主线程通讯
定义按钮
<div class="maxWindow no-drag" onclick="maxWindow()"></div>
渲染进程定义事件函数
引入 const { remote,shell,ipcRenderer } = require('electron')
function maxWindow(){
ipcRenderer.send('max-window')
}
主线程定义事件
引入 ipcMain
const { app, BrowserWindow,Menu,globalShortcut,ipcMain } = require('electron')
//主进程监听自定义事件
ipcMain.on('max-window',()=>{
mainWindow.maximize()
})
传参
ipcRenderer.send('max-window',9)
接收参数
ipcMain.on('max-window',(e,obj)=>{
console.log(obj)
mainWindow.maximize()
})
9 electron 打包
下载打包的包
cnpm install electron-packager -D
在package.json添加打包任务
//HelloWorld 包名
"build":"electron-packager ./ HelloWorld --platfrom=win32 --arch=x64 --out ./outApp --overwrite --icon=./favicon.ico"
10 electron结合框架开发
1:利用vue脚手架初始化项目
vue create electron-vue
2：在项目中安装electron
cnpm install electron
3:添加electron启动配置
'main':"main.js",
"scripts":{
"start":"react-scripts start",
"build":"react-scripts build",
"test":"react-scripts test",
"eject":"react-scripts eject",
"electron":"electron ."
}
4:配置main.js
const {app,BrowserWindow} = require('electron')
function createWindow(){
const mainWindow = new BrowserWindow({
width:800,
height:600,
webPreferences:{
nodeIntegration:true,
contextIsolation: false,
enableRemoteModule: true, // 这里是关键设置
}
})
mainWindow.loadURL('http://localhost:8080/');
}
// app.on('ready',()=>{
app.whenReady().then(()=>{
createWindow()
//关闭应用程序
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
加载vue文件
mainWindow.loadURL('http://localhost:8080/');
不是很难 多学习node会更棒 奈斯！！！