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

Electron的入门使用相关推荐

Electron开发入门
首先需要安装NodeJS. 设置npm, npm config set registry "https://registry.npm.taobao.org/" 安装Electron ...
Electron从入门到精通
一,Electron 快速入门 1.简介 Electron是利用web前端技术进行桌面应用开发的一套框架,它是由Github开发的,利用HTML.CSS.JavaScript来构建跨平台桌面应用程序的 ...
Electron 从入门到实践07之实战相机应用
Electron 从入门到实践之实战-照相机的开发 1.初始化项目新建一个目录用于存放第一个e-camera mkdir e-camera #注意 windows没有mkdir命令,直接新建文件夹即 ...
微软不会放弃Electron：Electron 快速入门及IPC 通信
最近,有媒体推文说"微软要放弃Electron了",很多不明真相的群众被带偏了节奏:我刚学了Electron就要过时了吗?求真相!那么我们还要不要学Electron呢? 实际上:只 ...
【Electron】Electron开发入门（八）：自定义electron框架外壳（shell）的菜单（Menu）...
1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu = require('electron').Menu; var te ...
【Electron】Electron开发入门（一）：开发环境搭建
刚接触Electron+js开发PC端桌面应用程序的时候,简直一头雾水,搜了网上很多教程,有的要么讲的零零碎碎,要么就是版本太低,很多API语法都不能用了:现在我把一些有用的教程归纳一下,并把目前最新 ...
一口气完成electron的入门学习
介绍目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发.目前类似的工具有electron,NW.js等.这里我们着重介绍下electron. electron开发 ...
【Electron】Electron开发入门（五）：项目打包
一.安装 electron-packager PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 "main&quo ...
electron教程入门1
electron创建的三种方式一通过git 克隆快速展示项目 # 安装electron(只需安装一次) $ npm install electron -g # 克隆这仓库 $ git clone ...

Electron的入门使用

Electron的入门使用相关推荐

最新文章

热门文章