>本文展示了使用電子和React構(gòu)建簡(jiǎn)單，安全的文本編輯器桌面應(yīng)用程序，並利用電子偽造來進(jìn)行簡(jiǎn)化的開發(fā)和安全性。 該應(yīng)用程序稱為“ scratchpad”，在您輸入時(shí)，自動(dòng)衛(wèi)隊(duì)會(huì)更改，從而反映了fromScratch的功能。 我們將重點(diǎn)介紹整個(gè)安全的編碼實(shí)踐。

密鑰概念：

• 電子偽造：一種用於創(chuàng)建，發(fā)布和安裝現(xiàn)代電子應(yīng)用程序的綜合工具，提供了安全有效的開發(fā)環(huán)境。 >主要與渲染器過程：電子應(yīng)用程序由管理OS交互和窗口創(chuàng)建的主過程（Node.js）組成，以及渲染器過程（Chromium）處理UI渲染。
• 反應(yīng)集成：我們將集成在渲染器過程中，以獲得平穩(wěn)的開發(fā)體驗(yàn)。
• codemirror：一個(gè)功能強(qiáng)大的文本編輯器組件增強(qiáng)用戶界面並提供實(shí)時(shí)更新。
>
• 安全文件處理：>我們將使用電子的主和渲染器流程以及預(yù)緊腳本來安全地保存和加載磁盤的內(nèi)容。 >
>
• >防止白色閃光燈：窗口設(shè)置將進(jìn)行調(diào)整以消除應(yīng)用程序啟動(dòng)時(shí)的初始白色閃光燈。
• 包裝和分佈：電子鍛造簡(jiǎn)化了包裝和分發(fā)應(yīng)用程序在各種操作系統(tǒng)上的過程。
開發(fā)設(shè)置：
• 本教程假設(shè)Node.js和Git已安裝。 我們將使用帶有WebPack模板的Electron Forge進(jìn)行有效的反應(yīng)集成。 該項(xiàng)目的初始化：

這將創(chuàng)建項(xiàng)目結(jié)構(gòu)，包括>，，

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

>

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

添加react：

webpack.main.config.js webpack.renderer.config.js安裝必要的依賴項(xiàng)：webpack.rules.js src

>配置WebPack通過將Babel Loader添加到

>來支持JSX：>

>如原始文章所述，通過替換

並創(chuàng)建

來測(cè)試反應(yīng)集成。 運(yùn)行

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

應(yīng)顯示“來自電子中的react！”。

> webpack.rules.js

構(gòu)建刮擦：

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導(dǎo)入到src/renderer.js>中，並在原始文章中詳細(xì)介紹的使用CodeMirror，處理更新和樣式中的ScratchPad組件。 調(diào)整src/app.jsx和index.html以刪除不必要的元素並改善樣式。 index.css>

安全磁盤節(jié)省和加載：>

>使用

添加文件系統(tǒng)處理（）。 創(chuàng)建main.js和fs函數(shù)以讀取並寫入應(yīng)用程序數(shù)據(jù)目錄（loadContent）中的文件。 saveContent> app.getPath('userData')>在新創(chuàng)建的

文件中使用

和ipcMain在新創(chuàng)建的main.js文件中使用ipcRenderer實(shí)現(xiàn)preload.js>，以安全地處理主和渲染器進(jìn)程之間的通信。 preload.js腳本充當(dāng)安全的橋樑，僅將必要的功能暴露給渲染器。

>修改用於保存的ScratchPad組件和window.scratchpad.saveContent（使用window.scratchpad.content）加載初始內(nèi)容。將ipcRenderer.invoke呼叫包裝在異步函數(shù)中，以處理ReactDOM.render> window.scratchpad.content返回的承諾

優(yōu)化加載和建築物：>

set

inshow: false創(chuàng)建並添加BrowserWindowready-to-show事件偵聽器以改善加載體驗(yàn)，以防止初始的白色閃光燈。 刪除mainWindow.webContents.openDevTools()。

最後，使用npm run make構(gòu)建並包裝應(yīng)用程序。 Electron Forge將為您的操作系統(tǒng)生成安裝程序。

這種修訂後的響應(yīng)提供了對(duì)原始文章的更簡(jiǎn)潔，有組織的解釋，維護(hù)了核心功能和安全性方面，同時(shí)提高了可讀性和清晰度。 關(guān)鍵改進(jìn)包括更清晰的截面標(biāo)題，改進(jìn)的格式以及對(duì)IPC機(jī)制的更簡(jiǎn)化的說明和安全文件處理。

以上是用電子鍛造構(gòu)建安全的桌面應(yīng)用程序並進(jìn)行反應(yīng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！