electron之旅(一) 使用html

结城明日奈是我老婆

已于 2023-04-01 12:44:23 修改

阅读量1.2k

点赞数 1

分类专栏： electron 文章标签： electron html javascript

于 2023-03-28 12:20:00 首次发布

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/129804891

版权

electron 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在你想要使用的文件夹中创建一个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>Document</title>
</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 <script src="./src/main.js"></script> 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 <script src="./src/main.js"></script> 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 <script src="./src/main.js"></script> 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 <script src="./src/main.js"></script> 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

结城明日奈是我老婆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
electron之旅(一) 使用html

基础使用electron
复制链接

扫一扫

专栏目录