electron学习笔记：electron入门

最新推荐文章于 2025-06-09 09:31:28 发布

海的神话

最新推荐文章于 2025-06-09 09:31:28 发布

阅读量907

点赞数 1

CC 4.0 BY-SA版权

分类专栏： electron学习笔记

本文链接：https://blog.csdn.net/hai200501019/article/details/81320680

electron学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了由GitHub开发的Electron框架，该框架允许使用HTML、CSS和JavaScript构建跨平台的桌面应用。文章详细解释了Electron的基本工作原理，包括其与Chromium和Node.js的结合方式。同时，文中提供了构建一个基础Electron程序的步骤，涵盖了如何使用npm安装Electron，以及如何创建和配置package.json、index.js和index.html文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.关于electron

electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将chromium和node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

2.最基础的electron程序

基础的Electron程序三个文件：package.json（元数据）,index.js（代码）和index.html。

3.什么是npm

npm（全称 Node Package Manager，即“node包管理器”）是node.js默认的、以javascript编写的软件包管理系统。

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

4.package.json文件

package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

一个 package.json 文件可以有以下几点作用：

1.作为一个描述文件，描述了你的项目依赖哪些包

2.允许我们使用 “语义化版本规则”（后面介绍）指明你项目依赖包的版本

3.让你的构建更好地与其他开发者分享，便于重复使用

Package.json 属性说明

name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
devDependencies：在开发、测试环境中用到的依赖
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字

5.helloworld

创建electron程序的基本步骤（Mac 环境）：

1.执行命令，安装electron， npm install -g electron

2.创建目录，helloworld，mkdir helloworld

3.创建package.json文件，执行命令，npm init

4.分别创建js，html文件。

package.json文件

{

"name": "helloworld",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "",

"license": "ISC"

}

index.js文件

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

const path = require('path')

const url = require('url')



let win



function createWindow() {

win = new BrowserWindow({ width: 800, height: 600 })



win.loadURL(url.format({

pathname: path.join(__dirname, 'index.html'),

protocol: 'file:',

slashes: true

}))



win.on('closed', () => {

win = null

})

}



app.on('ready', createWindow)



app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})



app.on('activate', () => {

if (win === null) {

createWindow()

}

})

index.html文件

<html>

<head>

<title>hello world</title>

</head>

<body>

<div>

<h1>

hello world

</h1>

</div>

</body>

</html>