用电子锻造构建安全的桌面应用程序并进行反应

>本文展示了使用电子和React构建简单，安全的文本编辑器桌面应用程序，并利用电子伪造来进行简化的开发和安全性。 该应用程序称为“ scratchpad”，在您输入时，自动卫队会更改，从而反映了fromScratch的功能。 我们将重点介绍整个安全的编码实践。

密钥概念：

• 电子伪造：一种用于创建，发布和安装现代电子应用程序的综合工具，提供了安全有效的开发环境。 >主要与渲染器过程：电子应用程序由管理OS交互和窗口创建的主过程（Node.js）组成，以及渲染器过程（Chromium）处理UI渲染。
• 反应集成：我们将集成在渲染器过程中，以获得平稳的开发体验。
• codemirror：一个功能强大的文本编辑器组件增强用户界面并提供实时更新。
>
• 安全文件处理：>我们将使用电子的主和渲染器流程以及预紧脚本来安全地保存和加载磁盘的内容。>
>
• >防止白色闪光灯：窗口设置将进行调整以消除应用程序启动时的初始白色闪光灯。
• 包装和分布：电子锻造简化了包装和分发应用程序在各种操作系统上的过程。
开发设置：
• 本教程假设Node.js和Git已安装。 我们将使用带有WebPack模板的Electron Forge进行有效的反应集成。 该项目的初始化：

这将创建项目结构，包括>，，

，以及包含初始html，css和javascript文件的目录。

>

npx create-electron-app scratchpad --template=webpack

添加react：

webpack.main.config.js webpack.renderer.config.js安装必要的依赖项：webpack.rules.js src

>配置WebPack通过将Babel Loader添加到

>来支持JSX：>

>如原始文章所述，通过替换

并创建

来测试反应集成。 运行

npm install --save-dev @babel/core @babel/preset-react babel-loader
npm install --save react react-dom

应显示“来自电子中的react！”。

> webpack.rules.js

构建刮擦：

module.exports = [
  // ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  // ...
];

src/renderer.js>安装codemirror和react-dodemirror：>

npx create-electron-app scratchpad --template=webpack

>将必要的CSS导入到src/renderer.js>中，并在原始文章中详细介绍的使用CodeMirror，处理更新和样式中的ScratchPad组件。 调整src/app.jsx和index.html以删除不必要的元素并改善样式。index.css>

安全磁盘节省和加载：>

>使用

添加文件系统处理（）。 创建main.js和fs函数以读取并写入应用程序数据目录（loadContent）中的文件。saveContent> app.getPath('userData')>在新创建的

文件中使用

和ipcMain在新创建的main.js文件中使用ipcRenderer实现preload.js>，以安全地处理主和渲染器进程之间的通信。 preload.js脚本充当安全的桥梁，仅将必要的功能暴露给渲染器。

>修改用于保存的ScratchPad组件和window.scratchpad.saveContent（使用window.scratchpad.content）加载初始内容。将ipcRenderer.invoke呼叫包装在异步函数中，以处理ReactDOM.render> window.scratchpad.content返回的承诺

优化加载和建筑物：>

set

inshow: false创建并添加BrowserWindowready-to-show事件侦听器以改善加载体验，以防止初始的白色闪光灯。 删除mainWindow.webContents.openDevTools()。

最后，使用npm run make构建并包装应用程序。 Electron Forge将为您的操作系统生成安装程序。

这种修订后的响应提供了对原始文章的更简洁，有组织的解释，维护了核心功能和安全性方面，同时提高了可读性和清晰度。 关键改进包括更清晰的截面标题，改进的格式以及对IPC机制的更简化的说明和安全文件处理。

以上是用电子锻造构建安全的桌面应用程序并进行反应的详细内容。更多信息请关注PHP中文网其他相关文章！