Electron的入门使用

喵咪老师QvQ

已于 2022-07-11 13:00:19 修改

阅读量1.4k

点赞数

文章标签： electron 前端

于 2022-07-08 13:43:31 首次发布

本文链接：https://blog.csdn.net/qq_58276512/article/details/125676448

版权

关于我在初次使用Electron客户端框架遇到的一些问题。

1.创建一个文件夹，并在该文件夹下安装Electron框架。

官方安装：npm i electron -s

Ps:根据官方的安装指令，可能会有安装失败，以及按照缓慢的情况。即使挂了梯子，也是会有安装失败的情况。

解决方法：单独将Electron的镜像设置成淘宝镜像，并重新执行安装程序。设置方法如下：

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

2.在根目录下创建index.js文件，作为程序如入口文件。因为Electron使用的是基于Node，所以入口文件是用Node.js语法。

//引入两个模块：app 和 BrowserWindow
//app 模块，控制整个应用程序的事件生命周期。
//BrowserWindow 模块，它创建和管理程序的窗口。

const { app, BrowserWindow, Tray } = require('electron')

//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.on('ready', () => {
    // 以下配置可选择

    //创建一个窗口
    const mainWindow = new BrowserWindow({
        // 创建的窗口宽高
        width: 800,
        height: 600,
        // 无边框窗口
        //frame: false,
        //不允许用户改变窗口大小
        //resizable: false,
        //应用运行时的标题栏图标
        //icon: iconPath,
        webPreferences: {
            //设置应用在后台正常运行
            backgroundThrottling: false,
            // 是否使用node语法
            nodeIntegration: true
        }

    })
    //实例化一个tray对象，构造函数的唯一参数是需要在托盘中显示的图标url  
    //let tray = new Tray(iconPath)
    //鼠标移到托盘中应用程序的图标上时，显示的文本
    //tray.setToolTip('测试')
    //点击图标的响应事件，这里是切换主窗口的显示和隐藏
    //tray.on('click', () => {
    //   if (mainWindow.isVisible()) {
    //        mainWindow.hide()
    //    } else {
    //       mainWindow.show()
    //    }
    //})
    //窗口加载html文件
    mainWindow.loadFile('./src/main.html')
})

3.新建一个文件src用来存放web开发的资源，html文件路径必须和上面窗口加载的入口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>
  <h1>欢迎来到你创建的第一个Elcectron应用</h1>
  <p>这是你的的应用面板</p>
</body>
</html>

4.接着在package.json文件中添加启动代码。

{
//这是配置的启动
  "scripts": {
    "start": "electron ."
  },
//原本文件中只有此段代码
  "dependencies": {
    "electron": "^19.0.8"
  }
}

5.调出控制台npm run start 运行项目，即可看到你自己最简单的桌面端应用。

ps：我启动后遇到一个问题，尚未解决，代码报错如下。

ERROR:gpu_init.cc(481)] Passthrough is not supported, GL is disabled, ANGLE is

喵咪老师QvQ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
Electron的入门使用

关于我在初次使用Electron客户端框架遇到的一些问题。
复制链接

扫一扫