新媒体与网站建设,网站友情链接怎么做,收费网站方案,医院预约挂号系统网站开发方案创建应用程序
创建 Electron 应用
使用 Webpack 创建新的 Electron 应用程序#xff1a;
npm init electron-applatest my-new-app -- --templatewebpack
启动应用
npm start 设置 Webpack 配置
添加依赖包#xff0c;确保可以正确使用 JSX 和其他 React 功能#xff…创建应用程序
创建 Electron 应用
使用 Webpack 创建新的 Electron 应用程序
npm init electron-applatest my-new-app -- --templatewebpack
启动应用
npm start 设置 Webpack 配置
添加依赖包确保可以正确使用 JSX 和其他 React 功能
npm install --save-dev babel/core babel/preset-react babel-loader
修改配置文件
// webpack.rules.js
module.exports [// ... existing loader config ...{test: /\.jsx?$/,use: {loader: babel-loader,options: {exclude: /node_modules/,presets: [babel/preset-react]}}}// ... existing loader config ...
]; 集成前端 React
添加 React 依赖
将基本的 React 包添加到 dependencies
npm install --save react react-dom
集成 React 代码
现在可以开始在 Electron 中编写和使用 React 组件了。在 src/app.jsx 中编写 React 代码
import * as React from react;
import { createRoot } from react-dom/client;const root createRoot(document.body);
root.render(h2Hello from React!/h2);
添加渲染进程
将 React 代码添加到渲染进程 src/renderer.js 中
import ./index.css;
import ./app.jsx;
console.log( This message is being logged by renderer.js, included via webpack);
启动应用
npm start 主进程和渲染进程通信
在 Electron 中渲染进程和主进程之间的通信需要通过预加载脚本 preload.js 来进行preload.js 的作用就是作为渲染进程和主进程之间通信的桥梁。
渲染进程 - 主进程
当用户在界面上点击最小化或者最大化或者更改某些全局设置如语言偏好、主题等时这些更改通常由渲染进程触发但实际执行由主进程负责。在这种情况下渲染进程调用主进程的方法以应用这些更改但不需要等待主进程的回包因为用户界面的响应可以立即更新而不必等待设置保存的确认。
预加载脚本
在预加载脚本 preload.js 中定义双方通信方法使用 ipcRenderer.send 将信息发往主进程
// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scriptsconst {contextBridge, ipcRenderer} require(electron);contextBridge.exposeInMainWorld(my_app_name, {// 最小化minimize: () {ipcRenderer.send(minimize)},// 最大化maximize: () {ipcRenderer.send(maximize)}
})
渲染进程
在渲染进程中使用 window.app_name.func_name 调用预加载脚本里的方法
import * as React from react;
import { createRoot } from react-dom/client;const root createRoot(document.body);
root.render(divbutton onClick{() {window.my_app_name.minimize()}}最小化/buttonbutton onClick{() {window.my_app_name.maximize()}}最大化/button
/div);
主进程
在主进程中使用 ipc.Main.on 监听事件并执行具体操作
const {app, BrowserWindow, ipcMain} require(electron);
const path require(node:path);let mainWindow;const createWindow () {// 创建浏览器窗口。mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // 预加载脚本用于在主进程和渲染进程之间安全地共享数据},});// 加载应用的index.html。mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);// 打开开发者工具。mainWindow.webContents.openDevTools();
};// .....其他代码.....// 监听来自渲染进程的minimize消息最小化主窗口。
ipcMain.on(minimize, event {mainWindow.minimize();
})// 监听来自渲染进程的maximize消息最大化主窗口。
ipcMain.on(maximize, event {mainWindow.maximize();
})
渲染进程 - 主进程
在 Electron 中用户可能需要打开、保存或者删除文件。当用户点击一个按钮或者菜单项来执行这些操作时渲染进程会向主进程发送一个消息请求执行相应的操作。主进程接到消息后调用系统API来完成文件操作并将操作结果发送回渲染进程渲染进程根据主进程的响应更新界面状态等。
预加载脚本
在预加载脚本 preload.js 中定义双方通信方法使用 ipcRenderer.invoke 将信息发往主进程并将结果返回到渲染进程
// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scriptsconst {contextBridge, ipcRenderer} require(electron);contextBridge.exposeInMainWorld(my_app_name, {// 选择文件chooseFile: async () {const path await ipcRenderer.invoke(choose-file);return path;},
})
渲染进程
在渲染进程中使用 window.app_name.func_name 调用预加载脚本里的方法
import * as React from react;
import {createRoot} from react-dom/client;const root createRoot(document.body);
root.render(divbutton onClick{() {window.my_app_name.chooseFile().then(result {console.log(result[filePaths][0])alert(result[filePaths][0])})}}选择文件/button
/div);
主进程
在主进程中使用 ipc.handle 监听事件执行操作并将结果返回给预加载脚本
const {app, BrowserWindow, ipcMain, dialog} require(electron);
const path require(node:path);let mainWindow;const createWindow () {// 创建浏览器窗口。mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // 预加载脚本用于在主进程和渲染进程之间安全地共享数据},});// 加载应用的index.html。mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);// 打开开发者工具。mainWindow.webContents.openDevTools();
};// .....其他代码.....// 监听来自渲染进程的choose-file消息选择文件并将结果返回给预加载脚本。
ipcMain.handle(choose-file, async (event, data) {const result await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {properties: [openFile]});return result
});
主进程 - 渲染进程
Electron 应用启动时有时候需要由主进程从本地存储或者服务器来加载应用的配置信息窗口大小、位置、主题设置等。主进程加载完设置后通过单向通信将配置信息发送给渲染进程。渲染进程接收到配置信息后根据这些信息调整界面布局或者样式。通常用于初始化或者更新应用的界面设置。
主进程
在主进程中使用 mainWindow.webContents.send 将消息发送给预加载脚本
const {app, BrowserWindow, ipcMain, dialog} require(electron);
const path require(node:path);let mainWindow;const createWindow () {// 创建浏览器窗口。mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // 预加载脚本用于在主进程和渲染进程之间安全地共享数据},});// 加载应用的index.html。mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);// 打开开发者工具。mainWindow.webContents.openDevTools();// 设置十秒钟后发送消息到渲染进程setTimeout(() {mainWindow.webContents.send(message-from-main, Hello from main process!);}, 3000); // 10000 毫秒等于 10 秒
};// .....其他代码.....
预加载脚本
在预加载脚本 preload.js 中使用 ipcRenderer.on 监听消息然后通过回调函数将消息传递给渲染进程
// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scriptsconst {contextBridge, ipcRenderer} require(electron);contextBridge.exposeInMainWorld(my_app_name, {msgFromMain: (callback) ipcRenderer.on(message-from-main, (event, message) {callback(message);})
})
渲染进程
在渲染进程中使用 useEffect 来监听消息并作出相应处理
import React, { useEffect, useState } from react;const App () {const [messageFromMain, setMessageFromMain] useState();useEffect(() {// 调用预加载脚本中暴露的 msgFromMain 方法window.my_app_name.msgFromMain((message) {setMessageFromMain(message);});// 清理函数可选如果需要的话可以在这里注销监听器return () {// 如果有必要的话可以在这里注销监听器但在这个例子中我们不需要因为ipcRenderer.on会自动管理监听器的生命周期};}, []); // 确保这个 effect 只运行一次return (div{/* 显示从主进程接收到的消息 */}p{messageFromMain}/p/div);
};export default App; 【1】React | Electron Forge
