Electron 建立第一个应用

最新推荐文章于 2024-10-01 19:27:44 发布

@凌晨三点半

最新推荐文章于 2024-10-01 19:27:44 发布

阅读量273

点赞数

分类专栏： electron 文章标签： Electron 第一个应用启动调试

本文链接：https://blog.csdn.net/soulwyb/article/details/86619506

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装node.js 这个不说官网下一步下一步就是了

在命令行运行 node --version 有出现版本号就表示成功

然后安装electron

node install electron -g 表示全局安装

安装完成后输入electron -v 有出现版本号就说明OK

新建目录（自定义）

然后建立3个文件：package.json index.js index.html

index.html

<!DOCTYPE html>
<head>
    <title>Hello World</title>
    <meta charset='utf-8'>
</head>
<div>Hello World</div>
</html>

index.js

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

function createBrowser() {
    win = new BrowserWindow({ width: 800, height: 600 });
    win.loadFile('index.html');
    win.on('closed', () => {
        console.log('close');
        win = null;
    });
}

app.on('ready', createBrowser);

其中在createBrowser函数中添加： win.webContents.openDevTools();可将调试控制台显示在页面上

package.json

{
    "name":"first",
    "version":"1.0.0",
    "main":"index.js"
}

保存后在命令行下切换至代码所在目录运行 electron . 这个'.'号表示当前目录

搞定

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@凌晨三点半

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Electron: 1、从零开始写一个记事本app

xuguangyuansh的博客

05-14

5283

Electron: 从零开始写一个记事本app Electron介绍 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;原文版权属于简书的鳗驼螺，这里只是做了重现，并记录到自己的日记中。 &amp;nbsp;&amp;nbsp;&amp;nbsp

一 第一个Electron应用

jnlup的博客

02-07

876

文章目录什么是Electorn？一、第一个Electron应用二、开发前的准备1.安装Node.js2.安装Visual Studio Code三、创建你的应用四、打包应用程序什么是Electorn？ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发

参与评论您还未登录，请先登录后发表或查看评论

Electron应用创建和打包

最新发布

qq_30386941的博客

10-01

1685

electron-build相比electron-package功能更丰富些，electron-build打包的项目可以同时打包.zip绿色版和.exe安装版，同时还会能配置是否asar打包，打包结果中海油一个未做任何压缩的版本用于查看打包结果是否正确，electron-build通过配置可以在打包时移动文件目录位置，配置跨平台配置打包等等，当然跨平台配置不是electron-build能够交叉打包，而是在对应的平台进行构建打包。当然也可以手动在任何地方创建目录，cmd中。

electron安装到第一个实例

ff55fff的博客

08-25

797

1、node.js下载，然后安装。下载地址：链接：http://pan.baidu.com/s/1o7TONhS 密码：fosa 2、cmd下输入：npm install electron-prebuilt -g 3、解压这个文件，然后双击exe 4、创建一个文件夹，里面创建三个文件 package.json，main.js，index.html 内容： package.

创建electron应用

Jq的博客

08-02

591

安装Electron cnpm install electron --save-dev 修改package.json，增加start命令指向electron，设定入口为main.js，参照下面代码: "main": "main.js", "scripts": { "start": "electron ." } 创建最简Electron项目创建main.js文件，添加下面的代码。创建...

第一个Electron程序

xingxingxingge的博客

05-22

521

再此之前你需要安装node 官方下载：https://nodejs.org/en/download/安装好之后在命令行中输入 node -v 可查看到node的版本号即可 1.创建一个空文件夹,在该文件夹中运行 npm init 运行后需要输入项目名称版本描述各种,一切默认即可,完成后会在文件夹中生成package.json 文件,这里稍加修改 { "name": "hel...

初识electron

weixin_36352085的博客

03-23

120

这里写自定义目录标题初识electron关于安装第一个项目初识electron 关于安装 // 1.下载node.js，选择最新稳定版即可 // 2.在cmd中输入以下代码查看是否安装成功 node -v npm -v // 3.设置淘宝镜像 npm config set registry https://registry.npm.taobao.org // 4.创建项目，并初始化 mkdir my-electron-app cd my-electron-app npm init -y // 这一步比较久

electron 快速创建一个本地应用

luoxiaonuan_hi的博客

06-15

1298

electron

electron结合JAVAweb_桌面应用之electron开发与转换

weixin_39627699的博客

12-20

2927

桌面应用之electron开发与转换一,介绍与需求1.1,介绍1. Electron简介Electron是用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。目前，Electron已被Microsoft、Faceboo...

223-electron-screen-recorder:223-用Electron建立萤幕录影机

04-28

标题 "223-electron-screen-recorder:223-用Electron建立萤幕录影机" 提供了我们正在讨论的主题，即如何利用Electron框架来开发一款屏幕录像应用。Electron是一个开源的框架，它允许开发者使用JavaScript、HTML和CSS...

第02课：Electron 开发的准备工作

一个被知识诅咒的人

09-22

1446

2.1 搭建 Electron 开发环境在使用 Electron 开发应用之前，要先安装 Electron，而 Electron 需要依赖 Node.js，因此在安装之前，要先安装 Node.js。Node.js 允许使用 JavaScript 开发服务端以及命令行程序，读者可以到 Node.js 的官网下载最新版本的安装程序。 Node.js 是跨平台的，建议读者下载长期维护版本（LTS），然...

第04课：Electron 应用代码管理

一个被知识诅咒的人

09-22

1181

本课程使用 VS Code 作为编写 Electron 应用的 IDE，主要原因是 VS Code 对 JavaScript 的调试支持得比较好。在开发正式的项目时，不管是开源的还是私有的，通常都需要通过代码库来管理，最流行的是 Git 代码库。VS Code 已经集成了 Git，能够支持 Git 的基本功能。本节将介绍如何使用 VS Code 将本地代码提交到远程 Git 代码仓库，以及从远程代...

创建一个electron应用

热情、奔放、快乐编程！

05-15

1791

Electron 程序是通过 npm 包创建的。我们应将 Electron 依赖安装到，然后在 package.json 中设置一个脚本来运行。执行命令后，Electron 程序会运行我们在 package.json 文件的main字段设置的入口文件。这个入口文件控制着 Electron 的主进程，后者运行于 Node.js 实例，负责应用的生命周期、展示原生窗口、执行特殊操作和管理渲染进程。渲染器进程(简称渲染器) 负责展示图形内容。我们可以将渲染的网页指向 web 地址或本地 HTML 文件。

创建Electron应用

ASP.NET

08-25

296

创建 Electron 应用步骤官方文档地址 https://www.electronjs.org/docs 应用标准目录 my-electron-app ├── package.json ├── main.js ├── preload.js └── index.html 为项目安装 Electron 1、新建文件夹使用 cmd 命令行中进入文件夹（也可命令行中创建文件夹） 1.mkdir my-electron-app-name && cd my-electron-ap

构建Electron应用

小柒的前端之旅

12-24

429

前面的话 Electron可以让我们使用web开发的技术去开发跨平台的桌面端应用，我们熟悉的VSCode编译器就是使用Electron开发的。这篇文章介绍如何将Electron接入webpack。主进程启动一个electron应用从一个主进程开始。主进程的启动通过一个JavaScript入口文件实现的。主进程启动后会一直驻留在后台运行，我们操作的窗口并不是主进程，而是由主进程新启动的窗口子......

学习electron（一）：安装及创建第一个应用程序

weixin_45132755的博客

01-08

1411

electron（一）：安装及创建第一个应用程序：注1、所有的命令行都是在你node.js安装目录cmd 进行的。（以D:\nodejs为例）2、本章是讲述如何安装electron，如果需要学习创建应用，本章略，可直接查看（二）3、有报错，可以先去看一下《三、处理报错》（找不到cli.js文件）

创建一个Electron简单应用

游九尘的博客

06-03

105

/ 从index.js中拿到add.html的值。// 自定义事件，并且传递参数。

创建第一个electron项目

chenyidong521的博客

11-27

2734

必要文件package.json main.js 页面文件packagepackage文件中主要放的是项目的配置{ "name" : "your-app", "version" : "0.1.0", "main" : "main.js"//指定启动文件 }mainconst {app, BrowserWindow} = require('electron') const

2024年了，如何从 0 搭建一个 Electron 应用

Becomin' Charles

02-20

3055

介绍了如何利用项目模板，一行命令快速创建一个直接能够运行的 Electron App。

Electron如何与第三方网页通过websocket交互

06-01

1. 安装WebSocket模块：在Electron应用程序的主进程中使用npm安装WebSocket模块。 ``` npm install websocket ``` 2. 在Electron应用程序中创建WebSocket连接：在主进程中使用WebSocket模块创建WebSocket连接并...