electron 跳坑指南 2 (主程式和渲染程式)

lihaotian發表於2019-07-10

主程式和渲染器程式：

ackage.json 的 main 指令碼的程式為 主程式
在主程式中執行的指令碼通過建立 web 頁面來展示使用者介面
一個 Electron 應用總是有且只有一個主程式。

由於 electron 使用了 Chromium（谷歌瀏覽器）來展示 web 頁面，所以 Chromium 的多程式架構也被使用到
每個 electron 中的 web 頁面 執行在它自己的渲染程式中
主程式使用 BrowserWindow例項建立頁面
每個 BrowserWindow 例項都在自己的渲染程式裡執行頁面
當一個 BrowserWindow 例項被銷燬後，相應的渲染程式也會被終止。

electron 渲染程式中通過 nodejs 讀取本地檔案:

在普通的瀏覽器中，不允許去接觸原生的資源。
而 electron 的使用者在 node.js 的 API 支援下可以在頁面中和作業系統進行一些底層互動。
nodejs 在主程式和渲染程式中都可以使用。渲染程式因為安全限制，不能直接操作原生 GUI。
雖然如此，因為整合了 nodejs，渲染程式也有了作業系統底層 API 的能力
Nodejs中常用的 path fs Crypto 等模組在 electron 可以直接使用，方便我們處理連結、路徑、檔案 MD5 等，同時 npm 還有成千上萬的模組供我們選擇

index.html 檔案內容:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content"></div>
<button type="button" id="btn">獲取檔案內容</button>

<script src="./renderer.js"></script>
</body>
</html>

renderer.js 檔案內容:

var fs = require("fs");

// 獲取按鈕和容器的DOM節點
var content = document.getElementById('content'),button = document.getElementById('btn');

/**
 * 註冊按鈕點選事件
 * 當按鈕點選的時候讀取當前目錄下的 1.text
 * 之後將裡面的內容放到content 之中
 */
button.addEventListener('click', (e) => {
    fs.readFile('1.text', 'utf8', function (err, data) {
        content.innerText = data;
    });
});

對程式碼不滿足，是任何真正有天才的程式設計師的根本特徵,做一個有魅力的程式設計師- 學無止境

相關文章