Electron的入门使用

关于我在初次使用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 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值