electron之旅(一) 使用html
在你想要使用的文件夹中创建一个main.js或者index.js文件(名字随便)
npm init -y #创建项目
npm i electron #下载electron依赖
安装electron失败
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn(要先
npm i yarn -g)
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
解决方法
若设置失败，则去C:\User\你的用户名\.npmrc(.yarnrc)(可以用sublime test打开)
#添加
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
yarn
#添加
electron_mirror "https://npm.taobao.org/mirrors/electron/"
完成后再次安装
npm i electron
electron主要代码
package.json中的入口文件(main后的名字文件,我这里是.(根目录)/main.js)
const {app,BrowserWindow} = require('electron')
function createWindow(){
const mainWin = new BrowserWindow({
width: 800,
height:600,
webPreferences:{
nodeIntegration:true,
}
})
mainWin.loadFile("./index.html")//当前的渲染页面
}
app.whenReady().then(()=>{
createWindow()
})
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>Documenttitle>
head>
<body>
<div id="app">
<span>你好span>
div>
body>
html>
修改
package.json
{
"name": "electron_html_one",
"version": "1.0.0",
"description": "",
"main": "main.js", //入口文件,即主进程文件
"scripts": {
"start": "electron .", //添加
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^23.2.0" //这个依赖不是手动添加的，一定要在
}
}
之后就可以使用npm run start来运行程序
上图就代表electron运行成功
热加载(实时加载)
npm install electron-reloader --save-dev
// 在入口文件对的顶部配置热加载(主进程)
// 热加载
try {
require('electron-reloader')(module, {});
} catch (_) { }
electron生命周期
- ready: 初始化完成
- dom-ready: 一个窗口中的文本加载完成
- did-finsh-load:导航完成时触发
- window-all-closed: 所有窗口都被关闭时触发
- before-quit: 在关闭窗口之前触发
- will-quit: 在窗口关闭并且应用退出时触发
- quit: 当所有窗口被关闭时触发
- closed:当窗口关闭时触发，此时应删除窗口索引
Uncaught ReferenceError: require is not defined
渲染进程中是不是使用
require的
解决办法
主进程
const mainWin = new BrowserWindow({
...
webPreferences:{//添加
nodeIntegration: true,
}
})
如果没有解决?那很正常，因为这个方法只适用于
electron5.0~12
electron12后版本，配置如下
const mainWin = new BrowserWindow({
...
webPreferences:{
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
}
})
自定义标题栏
自定义最小化
渲染进程
const miniWin = async()=>{ //this is function from index.html to <标签 οnclick="miniWin ">
ipcRenderer.send('win-mini')
}
主进程
function createWindow(){
const mainWin = new BrowserWindow{...}
ipcMain.on('win-mini',()=>{
mainWin.minimize()
})
}
自定义最大化&还原
渲染进程
const toggleMax= async()=>{ //this is function from index.html to <标签 οnclick="miniWin ">
ipcRenderer.send('win-toggleMax')
}
主进程
function createWindow(){
const mainWin = new BrowserWindow{...}
...
ipcMain.on('win-toggleMax',()=>{
if(mainWin.isMaximized()){ //是否最大化
mainWin.unmaximize() //取消最大化
}else{
mainWin.maximize()//maximize:最大化函数
}
})
}
自定义关闭
渲染进程
const closeWin= async()=>{ //this is function from index.html to <标签 οnclick="closeWin">
ipcRenderer.send('win-mini')
}
主进程
function createWindow(){
const mainWin = new BrowserWindow{...}
ipcMain.on('win-close',()=>{
mainWin.close()
})
}
拖动
渲染进程
.元素{/*class="元素"*/
-webkit-app-region: drag;
}
/*#元素{ //id="元素"
-webkit-app-region: drag;
}*/
主进程
function createWindow(){
const mainWin = new BrowserWindow({
...
frame:false, //默认为true
...
})
}
新建窗口
渲染进程
const newWin = async()=>{//this is function from index.html to <标签 οnclick="newWin ">
ipcRenderer.send('new-win')
}
主进程
ipcMain.on('new-win',()=>{
const newWin1 = new BrowserWindow({
width: 300,
height:250,
webPreferences:{
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
}
})
newWin1.loadURL("https://www.baidu.com")
})
注意事项
不能在渲染进程中使用BrowserWindow直接创建，要依靠主进程
electron打包
npm i electron-packager
script:{
"build": "electron-packager . myApp --win --out ./out --arch=x64 --app-version=1.0.0",
}
npm run build