Electron的简介
Electron基于chromium和Node.js，让我们可以使用Javascript,HTML,CSS构建跨平台的桌面应用程序，同时Electron兼容Mac,Window,和Linux,可以构建出三个平台的应用程序
Electron的安装
- 运行cmd,
- 输入npm init，然后一直按enter换行即可
- 输入cnpm i electron -S （如果电脑没有安装cnpm会报错，需要安装cnpm，安装步骤：运行cmd，输入命令npm install -g cnpm --registry=https://registry.npm.taobao.org）
安装的是10.1.5的electron，cnpm i – S electron@10.1.5,新版本的remote取消了，所以使用老版本的
1.创建main.js文件
//app(控制应用程序的事件生命周期)，BrowserWindow创建并控制浏览器窗口
const {app,BrowserWindow} = require('electron')
// 监听初始化完成的生命周期
app.on('ready', ()=>{
new electron.BrowserWindow({
width: 800,
height: 300
})
})
```
2.创建窗口
app.on('ready', ()=>{
const mainWindow = new BrowserWindow({
width: 800,
height: 500
})
mainWindow.loadFile('./index.html') //展示页面
})
3.解决每次数据更新都要重新启动的问题，实现自动刷新页面
安装插件
Cmp命令行输入 cnpm install --save-dev electron-reloader
然后在main.js中启动热加载
//启动热加载，自动刷新
const reloader = require('electron-reloader')
reloader(module)
4.Electron页面中按ctrl+shift+i可以弹出调试页面
5.自定义原生菜单
5.1首先提供frame创建无边框窗口
//通过frame创建无边框窗口
frame:false,
5.2在index.html中自定义菜单，通过css,js修饰
6.1打开对话框读取文件
/打开文件
const fileopen = function() {
const res = dialog.showOpenDialogSync({
})
//得到选中的文件地址
console.log(res[0])
//读取对应文件中的数据，并转化为字符型
const filecontent = fs.readFileSync(res[0]).toString()
console.log(filecontent)
//将文件内容展示到textarea中
textareavalue.value = filecontent
}
保存文件
//保存文件
const saveFile = function() {
const res = dialog.showSaveDialogSync({
})
console.log(textareavalue.value)
fs.writeFileSync(res,textareavalue.value)
}
7.1渲染进程和主线程通讯
定义事件
<li class="closeWindow">关闭窗口</li>
+ 事件函数
//点击关闭窗口
closeWindow.onclick = function() {
console.log(123)
ipcRenderer.send('close-window')
}
+ 主线程定义事件
ipcMain.on('close-window',()=>{
mainwindow.close()
})
+ 传参
```js
let windowSize = 'unmax-window'
function maxWindow() {
windowSize = windowSize === 'max-window' ?'unmax-window':'max-window'
ipcRenderer.send('max-window',windowSize)
}
```
+ 接收参数
```js
ipcMain.on('max-window', (event,arg) => {
console.log(arg)
if(arg === 'unmax-window') return mainWindow.maximize();
mainWindow.unmaximize()
})8.electron打包
1.安装electron-packager
cmd命令行输入cnpm i electron-packager -D
然后在package.json添加打包命令
"build": "electron-packager ./ HelloWorld --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./favicon.ico"
9.electron结合vue框架开发
在项目中安装electron，cmd命令行输入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
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.on('ready', () => {
createWindow()
})
```
//加载vue项目
mainWindow.loadURL('http://localhost:8080/')使用electron做一个简单的应用程序，界面没有怎么设置，主要是学习electron
代码部分：
目录结构：
index.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>
<link rel="stylesheet" href="./css/index.css">
<style>
/* 背景图片设置 */
body {
background: url("images/background.jpg") no-repeat;
background-size: cover;
}
img {
width: 100%;
height: 100%;
}
.hzw {
width: 960px;
height: 300px;
overflow: hidden;
margin: 0 auto;
margin-top: 400px;
}
/* 海贼王人物栏设置 */
.lf {
float: left;
position: relative;
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
margin-right: 20px;
}
/* 阴影盒子部分 */
.shadow {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
border: 100px solid rgba(0, 0, 0, 0.6);
/* 怪异盒模型 */
box-sizing: border-box;
/* 设置怪异盒为圆形 */
border-radius: 50%;
/* 放大四倍 */
transform: scale(4);
/* 设置过渡时间 */
transition: 2s;
}
/* 鼠标经过人物栏阴影以圆形方式散开 */
.lf:hover .shadow {
border: 1px solid rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<div class="custom-menu">
<ul>
<li class="new-window">新建窗口</li>
<li><a href="http://hong619068.3vzhuji.net/">关于我们</a></li>
<li class="closeWindow">关闭窗口</li>
<li class="maxWindow">全屏</li>
<li class="umaxWindow">小屏</li>
</ul>
</div>
<div class="hzw">
<div class="lf">
<img src="images/as.webp" alt="">
<div class="shadow"></div>
</div>
<div class="lf">
<img src="images/as1.webp" alt="">
<div class="shadow"></div>
</div>
<div class="lf">
<img src="images/hzw.webp" alt="">
<div class="shadow"></div>
</div>
</div>
<div>
<button onclick="fileopen()">打开文件</button>
<button onclick="saveFile()">保存文件</button>
</div>
<textarea >文件内容显示</textarea>
<script src="./js/index.js"></script>
</body>
</html>index.js:
//通过remote使用主进程的方法
//dialog打开本地文件
//通过ipcRenderer与主线程通讯
const {remote: {BrowserWindow,dialog} ,shell,ipcRenderer} = require('electron')
//通过FS模块对文件进行读取
const fs = require('fs')
//获取事件
const newWindow = document.querySelector('.new-window')
const closeWindow = document.querySelector('.closeWindow')
const maxWindow = document.querySelector('.maxWindow')
const umaxWindow = document.querySelector('.umaxWindow')
//点击新建窗口
newWindow.onclick = function () {
new BrowserWindow({
width: 200,
height: 300
})
}
//点击关闭窗口
closeWindow.onclick = function() {
console.log(123)
ipcRenderer.send('close-window')
}
//点击显示全屏
maxWindow.onclick = function() {
ipcRenderer.send('max-window')
}
//点击显示小屏
umaxWindow.onclick = function() {
ipcRenderer.send('umax-window')
}
//点击a链接跳转
const allA = document.querySelectorAll('a')
allA.forEach(item=>{
item.onclick = function(e) {
//阻止a链接自动跳转默认行为
e.preventDefault()
//默认用谷歌浏览器打开链接
shell.openExternal(item.href)
}
})
const textareavalue = document.querySelector('textarea')
//打开文件
const fileopen = function() {
const res = dialog.showOpenDialogSync({
})
//得到选中的文件地址
console.log(res[0])
//读取对应文件中的数据，并转化为字符型
const filecontent = fs.readFileSync(res[0]).toString()
console.log(filecontent)
//将文件内容展示到textarea中
textareavalue.value = filecontent
}
//保存文件
const saveFile = function() {
const res = dialog.showSaveDialogSync({
})
console.log(textareavalue.value)
fs.writeFileSync(res,textareavalue.value)
}main.js:
//app(控制应用程序的事件生命周期)，BrowserWindow创建并控制浏览器窗口
//Menu菜单
const {app,BrowserWindow,Menu, shell,globalShortcut,ipcMain} = require('electron')
//启动热加载，自动刷新
const reloader = require('electron-reloader')
reloader(module)
//监听初始化完成的生命周期
app.on('ready',() =>{
const mainwindow = new BrowserWindow({
width:1000,
height:1000,
//通过frame创建无边框窗口
frame:false,
webPreferences: {
// 开启node模块
nodeIntegration: true,
// 开启remote模块
enableRemoteModule: true
}
})
//主线程接收渲染进程信号,关闭窗口
ipcMain.on('close-window',()=>{
mainwindow.close()
})
//主线程接收渲染进程信号,显示全屏
ipcMain.on('max-window',()=>{
mainwindow.maximize()
})
//主线程接收渲染进程信号,显示小屏
ipcMain.on('umax-window',()=>{
mainwindow.unmaximize()
})
mainwindow.loadFile('./src/index.html')
// //自动打开调试工具
mainwindow.webContents.openDevTools()
//引入菜单模板
require("./menu.js")
})menu.js:
const {BrowserWindow,Menu} = require('electron')
//定义菜单模板
const template= [
{
label:'文件',
submenu:[
{
label:'新建窗口',
click() {
new BrowserWindow({
width:300,
height:300
})
}
}
]
},
{
label:'关于我们'
}
]
//编译模板
const menu = Menu.buildFromTemplate(template)
//创建新菜单
Menu.setApplicationMenu(menu)
