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

hzx 发布于2019-08-26 12:13 / 2320人阅读

摘要：主进程和渲染器进程的脚本的进程为主进程在主进程中运行的脚本通过创建页面来展示用户界面一个应用总是有且只有一个主进程。在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作原生。

主进程和渲染器进程：

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 文件内容:




    
    Title

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;
    });
});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108241.html

Electron指南 - 快速入门

摘要：快速入门提供了丰富的本地操作系统的，使你能够使用纯来创建桌面应用程序。这并不意味着是一个绑定图形用户界面的库。每个页面在里是运行在自己的进程里，这些进程被称为渲染进程。有些只能在该事件发生后才能被使用。快速入门 Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面...

SQC 2019-08-19 18:25 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 评论0 收藏0
electron跳坑指南 1(electron的安装)

摘要：我们在执行首先全局安装或者可以用创建项目进入到项目里面运行项目这样就完成了前言: 对于electron的介绍大家可以自己百度,这个使用写客户端软件很爽,写下心得以便于大家学习和使用! 我本地开发环境为:Mac OS目录在 :/Volumes/lee/electron/开发工具:phpstorm 第一章介绍electron的安装: 对于electron 的安装方式有很多第1种方式:...

notebin 2019-08-26 12:12 评论0 收藏0