electron原理，以及electron生成可执行文件的方法实例分析原创

2024-08-07 05:11:48

Electron是一种跨平台的桌面应用程序开发框架。它基于Node.js和Chromium，使得开发者可以使用HTML、CSS和JavaScript等Web技术来构建原生体验的桌面应用程序。

Electron的工作原理是将一个包含了Node.js和Chromium的运行时环境打包成一个可执行文件，然后再将开发者编写的应用代码和资源文件打包进去，在用户端解压缩后运行，从而实现桌面应用程序的运行。

以下是生成Electron可执行文件的步骤：

安装Electron

npm install electron --save-dev

在package.json文件中配置main文件和打包脚本

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "dependencies": {
    "electron-store": "^5.1.0"
  },
  "devDependencies": {
    "electron": "^11.0.0",
    "electron-builder": "^22.10.5"
  }
}

其中"main"字段指定了应用程序的主入口文件，"scripts"字段中的命令用于启动应用程序、打包应用程序（不包含安装包）和构建安装包。

编写主入口文件(main.js)

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

function 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', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

编写预加载脚本(preload.js)

预加载脚本可以在渲染进程和主进程初始化之前执行，通常用于注入Node.js模块和全局变量等。

window.myAPI = {
  doSomething: function () {
    console.log('Doing something...');
  }
};

编写html文件(index.html)

这里假设我们的应用程序只是一个简单的包含按钮的窗口。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App</title>
</head>
<body>
  <button onclick="myAPI.doSomething()">Click me!</button>
</body>
</html>

运行

启动Electron应用程序的命令为：

npm start

可以在Chrome DevTools中调试应用程序。

打包

使用Electron Builder工具来打包可执行文件和安装包。

npm run dist

这样就生成了Windows、Mac和Linux可执行文件和安装包。

用Electron写个带界面的nodejs爬虫的实现方法

什么是Electron 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 [官网](https://electronjs.org/) 实质就是一个精简的Webkit浏览器显示html页面,通过electron做中间层可以和系统交流.给web项目套上一个node环境的壳. 前言公司买的推广居然没有后台的api,没有api又不想死板手动操作.那就做个爬虫吧.但是又是给小白用的,自然最好带个界面,本来用C#拖出来就好了,看到vs那么大,下载都要半天.干脆就用Electron做
使用electron将vue-cli项目打包成exe的方法

如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron
electron-builder打包配置详解

目录 1.基础配置 2.打包目标配置 3.其他平台配置 4.nsis配置 5.关于操作系统的配置 6.更新配置这里介绍的是直接在package.json中直接配置使用: 1.基础配置 "build": { // 这里是electron-builder的配置 "productName":"xxxx",//项目名这也是生成的exe文件的前缀名 "appId": "com.xxx.xxxxx"
electron实现静默打印的示例代码

前言 electron+vuecli3 实现设置打印机,静默打印小票功能网上相关的资料比较少,这里给大家分享一下,希望大家可以少踩一些坑 github地址必须要强调一下的是electron的版本必须是3.0.0不能,我尝试了4和5都没有实现效果图使用 git clone https://github.com/sunnie1992/electron-vue-print-demo.git npm install npm run electron:serve 实现操作思路 1.用户点击打印
electron打包vue项目的方法步骤

目录创建项目添加electron-builder electron下载失败窗体运行打包exe 白屏创建项目点击这里添加electron-builder 1.在项目目录下运行命令:vue add electron-builder2.electron-builder添加完成后会选择electron版本,直接选择最新版: electron下载失败 vue add electron-builder下载electron会下载失败,使用淘宝镜像下载:cnpm i electron 窗体运行 1
Electron + vue 打包桌面操作流程详解

提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好获取Electron的资源 git clone https://github.com/el
Electron 如何调用本地模块的方法

Electron 结合了 Chromium.Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口.通知.图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使用 Node.或者说:就好像构建一个 Node app,并通过 HTML 和 CSS 构建界面. 那么如何在页面中调用 Node API 呢? 碰到了一些坑- 先从页面加载方式说起,Electron 中加载页面的方式有两种: 一种是直接加载本地文件,另一种是通过 http 网络请求页面. //方法1
Electron 调用命令行(cmd)

因为最近的项目需求,需要在 Electron 客户端启动的时候启动 nginx 服务,所以研究了一下怎么在 Electron 调用命令行. 因为 Electron 基于 Chromium 和 Node.js,可以直接使用 Node.js 的 API 和一些包.目前研究有以下两种方法: child_process child_process是 Node.js 的内置模块,该模块提供了衍生子进程的能力. 实现代码: const exec = require('child_process').exe
electron 如何将任意资源打包的方法步骤

如何打包资源只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了. 那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢? 直接看下 packages.json 里面吧. { "name": "....", "version"
electron + vue项目实现打印小票功能及实现代码

一需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

electron原理，以及electron生成可执行文件的方法实例分析 原创

安装Electron

编写主入口文件(main.js)

编写预加载脚本(preload.js)

编写html文件(index.html)

运行

打包

相关推荐

随机推荐

electron原理，以及electron生成可执行文件的方法实例分析原创