认识Electron 开启新的探索世界一

一、Electron轻松入门

1.搭建开发环境:

一般情况下开发者会使用node.js来创建electron项目,node.js是一个基于Chrome V8引擎的javascript运行环境,所以首先需要到官网去下载安装node.js

下载链接:https://nodejs.org/enhttps://nodejs.org/en

另外,需要使用yarn依赖包管理工具,安装命令:npm install -g yarn

接下来,我们创建第一个electron应用,先创建一个目录,再次目录下打开命令行,执行如下命令创建第一个node.js项目:yarn init

上述命令执行完成后,会有一系列提示,要求用户输入项目名称、项目版本等信息。之后项目创建完成之后,在该目录下会生成一个package.json文件,该文件为为该项目的配置文件

2.安装electron依赖包:

国内用户一般在阿里巴巴搭建好的electron的镜像网站: https://npm.taobao.org/mirrors/electronhttps://npm.taobao.org/mirrors/electron

然后设置指令:yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron

之后环境变量设置号之后还需要在命令行中执行以下命令来安装electron:

yarn add electron --dev --platform=win64

3.安装成功之后,项目目录下会增加一个node_modules子目录,在该目录下存放着项目运行时依赖的node.js包

4.为了可以使用electron依赖包,可以在package.jsopn中增加一个script配置;

"script" : { "start" : "electron ./index.js" }

上述自定义脚本,代表我们可以使用yarn start使用electron来启动本项目

二、创建窗口界面

1.在项目的根目录下新建index.html文件

2.启动窗口:在项目的根目录下创建index.js文件

其中app代表整个应用,通过它可以获取应用程序生命周期中的各个事件。我们在app的ready事件中创建窗口并且把窗口对象交给一个全局引用,这样做的目的是不让javascript执行引擎在垃圾回收时回收这个窗口对象

在创建窗口时,我们传入了配置对象 webPreferences: {nodeIntergration: true},此配置对象告诉electron需要为页面集成node.js环境并赋予index.html页面中的javascript访问node.js的能力

窗口创建完成后,窗口加载了index.html

在窗口关闭时,将这个win全局置为空,所有的窗口关闭即可以退出app

执行yarn start 后,窗口成功启动 ​​​​​​​

三、引用javascript

1.electron给index.js提供了完整的node.js环境的访问能力,index.js可以像所有node.js程序一样,通过require引入其他的js文件

相关推荐
DevNote_2 小时前
1C1G 服务器从零配置实录(附完整命令)
linux·运维·服务器·javascript·adb·ssh·gmssh
瓦瓦gogo2 小时前
实习中接触前端开发后,我开始了解 React
前端·react.js·前端框架
梦曦i2 小时前
uni-app x 新组件库v0.1.0发布,多端统一开发
前端·ui·uni-app x
Dovis(誓平步青云)2 小时前
切换语言后按钮被截断,本地化审计怎样发现长度风险
开发语言·前端·javascript·人工智能·机器学习·华为·harmonyos
CappuccinoRose2 小时前
拖拽交互体系
前端·javascript·css·html·交互·1024程序员节
开开心心就好2 小时前
免安装PDF盖章工具,透明度和位置可调
运维·服务器·前端·javascript·pdf·ocr·1024程序员节
风骏时光牛马2 小时前
AI服务线上推理异常故障
前端
king王一帅2 小时前
做了三年 ProseMirror 后,我用四个月自研排版引擎实现 WPS / Google Docs 替代品,整套框架 MIT 开源
前端·vue.js·开源
এ慕ོ冬℘゜4 小时前
如何在 HTML 中嵌入音频和视频?
前端·html·音视频
2501_9445215910 小时前
Ramda 跨端三方库仓颉适配全流程
开发语言·javascript·flutter·php