electron学习教程基本教程已测试完成

无恃而安

已于 2023-02-02 10:55:48 修改

阅读量3k

点赞数 17

分类专栏： electron 文章标签：前端

于 2021-11-03 15:25:13 首次发布

Lcc

本文链接：https://blog.csdn.net/weixin_50601484/article/details/121096134

版权

electron 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

1.介绍

Electron 可以让你使用纯JavaScript调用丰富的原生APIs来创造桌面应用。你可以把它看作是专注于桌面应用
Electron = Chromium+Node.js+Native API
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会更棒奈斯！！！