electron入门教程

官方文档：https://electronjs.org/docs
一、安装配置
1、为你的应用创建一个新的空文件夹 Electron
2、打开你的命令行工具，从该文件夹运行 npm init 会帮助你创建一个基本的 package.json 文件

3、安装electron npm install --save-dev electron
4、项目根目录新建main.js文件（入口文件）

const { app, BrowserWindow } = require('electron')function createWindow () {   // 创建浏览器窗口const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})// 并且为你的应用加载index.htmlwin.loadFile('index.html')// 打开开发者工具win.webContents.openDevTools()
}// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，// 否则绝大部分应用及其菜单栏会保持激活。if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {// 在macOS上，当单击dock图标并且没有其他窗口打开时，// 通常在应用程序中重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) {createWindow()}
})// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

5、根目录下新建index.html文件

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h1>Hello Electron!!!</h1>
</body>
</html>

6、在package.json文件中配置electron命令

"scripts": {"start": "electron .",
}

7、命令窗口执行 npm run start 命令可以调试内容
到目前为止，生成了一个非常简单的demo。
作为一个桌面应用程序，我们希望直接点击exe文件进行运行。因此用到了electron-packager插件。

二、electron-packager的使用
1、项目根目录下安装 cnpm install electron-packager --save-dev
2、package.json 配置打包命令

"scripts": {"start": "electron .","pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=4.1.4"}

打包命令代码的含义解释：

“.”：需要打包的应用目录（.代表当前目录）。

“myFirstElectron”：应用名称。

“–win”：打包平台（windows平台）

" --out ./dist"“：输出目录

“–arch=x64”：64位

“–app-version=0.0.1”：应用版本

“–electron-version=4.1.4”：electron版本
3、执行打包命令 npm run pack
4、在项目根目录下的dist文件夹中找到myFirstElectron.exe打开即可运行

electron入门教程相关推荐

Electron 入门教程
整个教程不涉及过于深入的知识,通过一系列c操作能够运行一个简单的MarkDown编辑器.在整个过程中体会Electron的作用,对于我来说就是把整个网页和浏览器打包成一个程序了,简单说可能就是我们常说 ...
Electron入门教程1 —— 编写第一个桌面应用程序
前言: 最近临时起意,想开发桌面应用程序,但是我们肯定都先会想到微软的C#.而我又不想花时间去学习C#,而且就算学了C#,还是很难快速开发出好看的Windows桌面应用.所以此时我就想,既然移动app ...
Electron系列教程——第一篇：入门
Electron系列教程--第一篇:入门一.楔子想要学习Electron,跟着官网或者中文网,仔细阅读,并实践,其实是够了,不必要重复.那为什么还要写这个系列呢?大概有两方面原因,其一:我使用el ...
Electron 入门，主进程向渲染进程发送事件，渲染进程向主进程发送事件
Electron 入门,主进程向渲染进程发送事件,渲染进程向主进程发送事件相关教程: Electron教程(二)启动过程:主进程,渲染进程是什么刚入门 electon ,整 electon + v ...
Tauri 入门教程
Tauri入门教程 1 简介 2 创建Tauri项目(页面基于Vue) 2.1 环境准备 2.2 创建工程 3 Tauri 工程目录介绍 4 页面调用rust方法 5 事件系统 6 HTTP请求 7 ...
Visual Studio Code 入门教程
一.入门教程 1.1 简介 Visual Studio Code ,简称 VSCode.它是一款由微软开发且跨平台的轻量级但功能强大的免费源代码编辑器.该软件支持语法高亮.代码自动补全.代码重构. ...
Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
Kafka入门教程与详解
1 Kafka入门教程 1.1 消息队列(Message Queue) Message Queue消息传送系统提供传送服务.消息传送依赖于大量支持组件,这些组件负责处理连接服务.消息的路由和传送.持久 ...
【CV】Pytorch一小时入门教程-代码详解
目录一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...

electron入门教程

electron入门教程相关推荐

最新文章

热门文章