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

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可执行文件和安装包。

赞 (0)

相关推荐

  • electron-builder打包配置详解

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

  • 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写个带界面的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 如何将任意资源打包的方法步骤

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

  • 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 + vue项目实现打印小票功能及实现代码

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

  • Electron 如何调用本地模块的方法

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

  • 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打包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

随机推荐