Electron学习--01 基础使用

誓空

已于 2023-11-14 22:25:54 修改

阅读量149

点赞数

文章标签： electron 学习前端

于 2023-11-10 19:10:05 首次发布

本文链接：https://blog.csdn.net/m0_56409834/article/details/134339318

版权

该项目使用electron版本为11.2.1

1. 新建文件夹electron-demo , 进行 “npm init -y ” 初始化生成 package.json 。再在根目录中新建main.js 和 index.html

2. 安装electron:

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install --save-dev electron

*** 最好不要使用包管理工具npm ，否则会安装报错如下：

据网上大佬所述， npm的服务在国外，具体原因不祥

3.在主进程main.js 中写下如下代码：

// 导入两个electron模块
const { app, BrowserWindow } = require('electron')

// 创建一个createWindow()函数
// 用于将index.html加载到新BrowserWindow实例中
const createWindow = () => {
    // 自定义窗口尺寸大小
    let win = new BrowserWindow({
        width: 800,
        height: 600
    })

    // 加载index.html
    win.loadFile('index.html')

    // 监听窗口关闭事件
    win.on("close", () => {
        console.log("window is close");
        win = null
    })
}

// app初始化完成
app.on('ready', () => {
    createWindow()
})

// 监听所有窗口关闭事件
app.on('window-all-closed',()=>{
    console.log('window-all-closed');
    // 退出
    app.quit()
})

4.在index.html ，随便写点代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>electron的应用</title>
    
</head>
<body>
    <h1>Electron自定义应用</h1></h1>
</body>
</html>

5.在package.json中script属性中进行运行该项目配置：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },

6. 项目运行命令, 会出现一个Electron窗口：

npm  start

7. 可以使用Electron的api方法BrowserWindow的属性进行修改窗口的主样式

const createWindow = () => {
    // 自定义窗口尺寸大小
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        // 设置窗口相当于屏幕左侧的X轴偏移量
        x:200,
        // 设置窗口相当于屏幕左侧的Y轴偏移量
        y:200,
       // 设置窗口的宽度最大尺寸
        maxWidth:1000,
        // 设置窗口的高度最大尺寸
        maxHeight:1000,
         // 设置窗口的宽度最小尺寸
        maxWidth:400,
        // 设置窗口的高度最小尺寸
        maxHeight:400,
       // 设置窗口页面的背景颜色
       backgroundColor:"#5971d4",
       //防止窗口白屏,使用窗口和内容同步显示
       show:false，
       //设置为 false 时可以创建一个无边框窗口 
       frame:false,
       // 自动隐藏菜单栏
        autoHideMenuBar:true,
        webPreferences:{
            // 是否启用Node integration. 一般适用于父子窗口
            nodeIntegration:true,
            // 用于子窗口的进程远程使用主进程BrowserWindow
            enableRemoteModule:true,
        }
    })
}