快捷導(dǎo)航

electron原理，以及electron生成可執(zhí)行文件的方法實(shí)例分析原創(chuàng)

原創(chuàng) 更新時(shí)間：2023年04月23日 18:32:46 原創(chuàng) 投稿：shichen2014

這篇文章主要介紹了electron原理，以及electron生成可執(zhí)行文件的方法,結(jié)合實(shí)例形式分析了electron原理以及electron生成可執(zhí)行文件的具體操作步驟、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

Electron是一種跨平臺(tái)的桌面應(yīng)用程序開發(fā)框架。它基于Node.js和Chromium，使得開發(fā)者可以使用HTML、CSS和JavaScript等Web技術(shù)來構(gòu)建原生體驗(yàn)的桌面應(yīng)用程序。

Electron的工作原理是將一個(gè)包含了Node.js和Chromium的運(yùn)行時(shí)環(huán)境打包成一個(gè)可執(zhí)行文件，然后再將開發(fā)者編寫的應(yīng)用代碼和資源文件打包進(jìn)去，在用戶端解壓縮后運(yùn)行，從而實(shí)現(xiàn)桌面應(yīng)用程序的運(yùn)行。

以下是生成Electron可執(zhí)行文件的步驟：

安裝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"字段指定了應(yīng)用程序的主入口文件，"scripts"字段中的命令用于啟動(dòng)應(yīng)用程序、打包應(yīng)用程序（不包含安裝包）和構(gòu)建安裝包。

編寫主入口文件(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();
});

編寫預(yù)加載腳本(preload.js)

預(yù)加載腳本可以在渲染進(jìn)程和主進(jìn)程初始化之前執(zhí)行，通常用于注入Node.js模塊和全局變量等。

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

編寫html文件(index.html)

這里假設(shè)我們的應(yīng)用程序只是一個(gè)簡單的包含按鈕的窗口。

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