Electron学习1 安装环境和第程序
Electron学习1 安装环境与第一个程序
- 一、 Electron 简介
- 二、安装 nvm
- 三、安装nodejs
- 四、安装nrm
- 五、安装electron
- 1. npm 初始化
- 2. 创建 package.json
- 3. 安装electron
- 4. 创建一个页面
- 5. 创建文件main.js
- 6. 创建预加载器文件 preload.js
- 7. 启动程序
- 六、打包
一、 Electron 简介
Electron是一个用于构建跨平台桌面应用程序的开源库。它使用HTML、CSS和JavaScript等技术,通过将Web技术打包为原生应用程序,使得开发者能够创建出具有本地操作系统特性的软件。Electron使用Chromium作为渲染引擎,并允许开发者使用Node.js来访问底层系统资源。
本文将介绍electron开发环境配置。
准备环境 :
- windows10
- 一款编辑器软件,如vscode
二、安装 nvm
nvm(Node Version Manager)是一个用于管理Node.js版本的工具,它允许你在同一台机器上安装和切换多个Node.js版本。
nvm的主要功能包括:
- 安装多个Node.js版本:你可以使用nvm安装多个Node.js版本,并在需要时进行切换。这使得你可以在同一台机器上测试不同版本的Node.js应用程序。
- 切换Node.js版本:使用nvm,你可以轻松地在不同版本的Node.js之间进行切换,只需运行nvm use [version_number]即可。
- 创建独立的Node.js环境:你可以使用nvm为每个项目创建一个独立的Node.js环境,这样每个项目都可以使用其自己的Node.js版本,而不必担心版本冲突。
- 安装npm包:你可以使用nvm安装npm包,并确保它们与当前的Node.js版本兼容。
nvm 下载地址:
https://github.com/coreybutler/nvm-windows/releases
下载exe程序双击安装即可。
按提示,安装完以后,命令行运行:
nvm --version
可以查看到打印出版本信息。下面使用nvm来安装nodejs。
三、安装nodejs
nvm list available
nvm install 16.16.0
在列出的可用版本里选择一个版本进行安装。
上面示例安装了16.16.0版本。
安装后,激活默认nodejs版本。
nvm use 16.16.0
nvm on
四、安装nrm
nrm 是 npm 的源管理工具,可以方便地添加、切换和删除 npm 源。nrm 的全称是 “npm Resource Manager”,旨在帮助开发者管理 npm 源的配置和切换。
使用 nrm,你可以轻松地在不同的 npm 源之间进行切换,而无需手动修改 npm 的配置文件。这对于在多个项目之间切换或者使用不同的 npm 源时非常有用。
# 安装 nrm
npm install -g nrm
# 列出可用源
nrm ls
# 使用指定源
nrm use taobao
其它还有添加、删除源等功能,平时并不常用 。
五、安装electron
1. npm 初始化
mkdir my-electron-app && cd my-electron-app
npm init
在文件夹里创建以下文件:
2. 创建 package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"scripts": {
"start": "electron ."
},
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
3. 安装electron
npm install --save-dev electron
4. 创建一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>Electron , 你好!</h1>
</body>
</html>
5. 创建文件main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const createWindow = ()=>{
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
};
app.whenReady().then(()=>{
createWindow();
// 苹果在退出后仍驻留
app.on('activate', ()=>{
if (BrowserWindow.getAllWindows().length === 0 ){
createWindow();
}
});
});
app.on("window-all-closed", ()=>{
if(process.platform !== 'darwin') app.quit();
});
6. 创建预加载器文件 preload.js
window.addEventListener('DOMContentLoaded', () => {
// 暂时什么都不做
})
文件夹示例:
7. 启动程序
npm start
六、打包
使用命令:
# 将 Electron Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架
npm install --save-dev @electron-forge/cli
npx electron-forge import
# 制作分发包
npm run make
生成结果示例:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhifhcgc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11