electronJS 开发linux App-白红宇

electronJS 开发linux App

阅读量：596 次

发布时间：2019-03-12

本文共 2748 字，大约阅读时间需要 9 分钟。

Electron.js 实用指南

Electron.js 的优势与局限性

Electron.js 是一款基于 Node.js 的开源工具，专注于构建跨平台的桌面应用程序。其核心优势在于支持 JavaScript、HTML 和 CSS 开发，能够帮助开发者打造拥有丰富界面的应用程序。然而，这种灵活性也带来了内容膨胀的缺点，即即便是一个简单的“Hello, World!”程序，文件容量也可能超过几百 Megabytes。这使得 Electron.js 更适合那些对界面要求较高的应用开发项目。

支持的平台与安装方法

Electron.js 应用能够在 Windows、macOS、Linux 和 Android 等多个操作系统上运行。安装 Electron 的过程相对简单，指定的官方快速入门仓库可以提供一个标准化的安装指南。以下是常用的安装步骤：

# 克隆仓库$ git clone https://github.com/electron/electron-quick-start#进入仓库$ cd electron-quick-start#安装依赖$ npm install# 启动应用$ npm start

主进程与渲染进程的工作原理

Electron.js 的核心逻辑分为两部分：主进程（Main Process）和渲染进程（Renderer Process）。主进程负责代码执行和系统管理，而渲染进程则负责显示网页内容。从架构上来看，主进程使用 Node.js 运行，而渲染进程则像传统浏览器，使用 V8 引擎渲染网页内容。

消息通信机制

主进程与渲染进程之间采用 IPC（Inter-Process Communication）机制进行信息交换。以下是典型的实现方式：

// 主进程（main.js）const { ipcMain } = require('electron');function createWindow () {  const mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true,      preload: path.join(__dirname, 'preload.js')    }  });  mainWindow.removeMenu();  mainWindow.loadFile('index.html');  mainWindow.webContents.openDevTools();  ipcMain.on('asynchronous-message', (event, arg) => {    console.log(arg);    event.sender.send('asynchronous-reply', 'async pong');  });  ipcMain.on('synchronous-message', (event, arg) => {    console.log(arg);    event.returnValue = 'sync pong';  });  mainWindow.on('closed', () => {    mainWindow = null;  });}app.on('ready', createWindow);app.on('window-all-closed', () => {  if (process.platform !== 'darwin') {    app.quit();  }});app.on('activate', () => {  if (mainWindow === null) {    createWindow();  }});

//渲染进程（render.js）const { ipcRenderer } = require('electron');console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping'));ipcRenderer.on('asynchronous-reply', (event, arg) => {  console.log(arg);});ipcRenderer.send('asynchronous-message', 'async ping');

发送消息到渲染进程

在实际应用中，主进程需要在渲染进程加载完成后，才能进行交互操作。以下是常用的操作方式：

mainWindow.webContents.on('did-finish-load', () => {  mainWindow.webContents.send('asynchronous-message', 'Hello');});

或者：

setInterval(() => {  mainWindow.webContents.send('asynchronous-message', 'Hello');}, 1000);

集成 WebSocket

对于需要实时通信的场景，Electron.js 也支持 WebSocket。以下是基本示例：

main.js

const { ipcMain, WebSocket } = require('electron');// 其他代码...let electron.ws = new WebSocket('ws://localhost:8000');electron.ws.onmessage = (event) => {  console.log('从渲染进程收到消息：', event.data);};

render.js

const { ipcRenderer, WebSocket } = require('electron');const ws = new WebSocket('ws://localhost:8000');ws.onmessage = (event) => {  console.log('从主进程收到消息：', event.data);};// 发送消息setInterval(() => {  ws.send('ping');}, 2000);

总结

通过以上指南，你可以更好地理解 Electron.js 的工作原理及其开发场景。无论是创建跨平台应用吗，还是进行复杂的消息交互，都可以通过合理配置 Electron.js 实现需求。

转载地址：http://gizxz.baihongyu.com/

你可能感兴趣的文章