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>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是基于web技术的桌面应用开发框架,因此可以使用HTML/CSS/JavaScript来构建表格。 以下是一个简单的示例,使用了jQuery和Bootstrap库: HTML: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>25</td> <td>女</td> </tr> <tr> <td>王五</td> <td>30</td> <td>男</td> </tr> </tbody> </table> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js"></script> </body> </html> ``` JavaScript: ``` const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这个示例使用了Bootstrap的表格样式,通过jQuery动态生成表格内容。可以根据具体需求修改HTML/CSS/JavaScript代码来实现更加复杂的表格功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结城明日奈是我老婆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值