remote:在Electron中将JavaScript对象从主进程桥接到渲染器进程

  • c9_809530
    了解作者
  • 130.8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-27 01:36
    上传日期
@电子/远程 @electron/remote是一个模块,用于将JavaScript对象从主进程桥接到渲染器进程。 这使您可以访问仅主进程对象,就好像它们在渲染器进程中可用一样。 :warning: 警告! 这个模块有。 比起使用此模块,几乎总是有更好的方法来完成您的任务。 例如, 可以服务于许多常见的用例。 @electron/remote替代了Electron中的内置remote模块,该模块已被弃用,最终将被移除。 从remote迁移 注意: @electron/remote需要Electron 10或更高版本。 从内置的remote模块迁移到@electron/remote需要做三件事。 首先,您需要从NPM安装它: $ npm install --save @electron/remote 其次, @electron/remote/main必须在主进程中初始化,然后才能在渲染器中使
remote-master.zip
  • remote-master
  • .gitignore
    20B
  • package.json
    1.3KB
  • renderer
  • index.js
    49B
  • src
  • renderer
  • remote.ts
    13.1KB
  • index.ts
    182B
  • callbacks-registry.ts
    1.7KB
  • main
  • objects-registry.ts
    4.1KB
  • server.ts
    18.2KB
  • index.ts
    37B
  • common
  • type-utils.ts
    3.5KB
  • types.d.ts
    1.4KB
  • get-electron-binding.ts
    318B
  • ipc-messages.ts
    976B
  • module-names.ts
    966B
  • internal-ambient.d.ts
    715B
  • tsconfig.json
    301B
  • README.md
    11.6KB
  • main
  • index.js
    45B
  • .releaserc.json
    190B
  • .circleci
  • mocha-reporter-config.json
    142B
  • config.yml
    1.2KB
  • test
  • all.ts
    38.5KB
  • events-helpers.ts
    1.5KB
  • index.js
    238B
  • window-helpers.ts
    1.5KB
  • fixtures
  • property.js
    174B
  • function-with-args.js
    54B
  • to-string-non-function.js
    104B
  • remote-event-handler.html
    407B
  • remote-object-set.js
    203B
  • send-on-exit.html
    204B
  • id.js
    18B
  • exception.js
    52B
  • call.js
    111B
  • print_name.js
    604B
  • export-function-with-properties.js
    57B
  • function-with-properties.js
    213B
  • promise.js
    113B
  • preload-remote-function.js
    204B
  • circular.js
    58B
  • rejected-promise.js
    112B
  • unhandled-rejection.js
    82B
  • render-view-deleted.html
    938B
  • function.js
    48B
  • error-properties.js
    160B
  • function-with-missing-properties.js
    190B
  • remote-static.js
    130B
  • no-prototype.js
    220B
  • class.js
    337B
  • yarn.lock
    227.2KB
  • index.d.ts
    1.1KB
内容介绍
# @electron/remote `@electron/remote` is an [Electron](https://electronjs.org) module that bridges JavaScript objects from the main process to the renderer process. This lets you access main-process-only objects as if they were available in the renderer process. > ⚠️ **Warning!** This module has [many subtle > pitfalls][remote-considered-harmful]. There is almost always a better way to > accomplish your task than using this module. For example, [`ipcRenderer.invoke`](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) can serve many common use cases. `@electron/remote` is a replacement for the built-in `remote` module in Electron, which is deprecated and will eventually be removed. ## Migrating from `remote` > **NOTE:** `@electron/remote` requires Electron 10 or higher. There are three things you need to do to migrate from the built-in `remote` module to `@electron/remote`. First, you need to install it from NPM: ```shell $ npm install --save @electron/remote ``` Second, `@electron/remote/main` must be initialized in the main process before it can be used from the renderer: ```javascript // in the main process: require('@electron/remote/main').initialize() ``` Third, `require('electron').remote` in the renderer process must be replaced with `require('@electron/remote')`. ```javascript // in the renderer process: // Before const { BrowserWindow } = require('electron').remote // After const { BrowserWindow } = require('@electron/remote') ``` **Note:** Since this is requiring a module through npm rather than a built-in module, if you're using `remote` from a sandboxed process, you'll need to configure your bundler appropriately to package the code of `@electron/remote` in the preload script. Of course, [using `@electron/remote` makes the sandbox much less effective][remote-considered-harmful]. **Note:** `@electron/remote` respects the `enableRemoteModule` WebPreferences value. You must pass `{ webPreferences: { enableRemoteModule: true } }` to the constructor of `BrowserWindow`s that should be granted permission to use `@electron/remote`. # API Reference The `remote` module provides a simple way to do inter-process communication (IPC) between the renderer process (web page) and the main process. In Electron, GUI-related modules (such as `dialog`, `menu` etc.) are only available in the main process, not in the renderer process. In order to use them from the renderer process, the `ipc` module is necessary to send inter-process messages to the main process. With the `remote` module, you can invoke methods of the main process object without explicitly sending inter-process messages, similar to Java's [RMI][rmi]. An example of creating a browser window from a renderer process: ```javascript const { BrowserWindow } = require('@electron/remote') let win = new BrowserWindow({ width: 800, height: 600 }) win.loadURL('https://github.com') ``` In order for this to work, you first need to initialize the main-process side of the remote module: ```javascript // in the main process: require('@electron/remote/main').initialize() ``` **Note:** The remote module can be disabled for security reasons in the following contexts: - [`BrowserWindow`](browser-window.md) - by setting the `enableRemoteModule` option to `false`. - [`<webview>`](webview-tag.md) - by setting the `enableremotemodule` attribute to `false`. ## Remote Objects Each object (including functions) returned by the `remote` module represents an object in the main process (we call it a remote object or remote function). When you invoke methods of a remote object, call a remote function, or create a new object with the remote constructor (function), you are actually sending synchronous inter-process messages. In the example above, both `BrowserWindow` and `win` were remote objects and `new BrowserWindow` didn't create a `BrowserWindow` object in the renderer process. Instead, it created a `BrowserWindow` object in the main process and returned the corresponding remote object in the renderer process, namely the `win` object. **Note:** Only [enumerable properties][enumerable-properties] which are present when the remote object is first referenced are accessible via remote. **Note:** Arrays and Buffers are copied over IPC when accessed via the `remote` module. Modifying them in the renderer process does not modify them in the main process and vice versa. ## Lifetime of Remote Objects Electron makes sure that as long as the remote object in the renderer process lives (in other words, has not been garbage collected), the corresponding object in the main process will not be released. When the remote object has been garbage collected, the corresponding object in the main process will be dereferenced. If the remote object is leaked in the renderer process (e.g. stored in a map but never freed), the corresponding object in the main process will also be leaked, so you should be very careful not to leak remote objects. Primary value types like strings and numbers, however, are sent by copy. ## Passing callbacks to the main process Code in the main process can accept callbacks from the renderer - for instance the `remote` module - but you should be extremely careful when using this feature. First, in order to avoid deadlocks, the callbacks passed to the main process are called asynchronously. You should not expect the main process to get the return value of the passed callbacks. For instance you can't use a function from the renderer process in an `Array.map` called in the main process: ```javascript // main process mapNumbers.js exports.withRendererCallback = (mapper) => { return [1, 2, 3].map(mapper) } exports.withLocalCallback = () => { return [1, 2, 3].map(x => x + 1) } ``` ```javascript // renderer process const mapNumbers = require('@electron/remote').require('./mapNumbers') const withRendererCb = mapNumbers.withRendererCallback(x => x + 1) const withLocalCb = mapNumbers.withLocalCallback() console.log(withRendererCb, withLocalCb) // [undefined, undefined, undefined], [2, 3, 4] ``` As you can see, the renderer callback's synchronous return value was not as expected, and didn't match the return value of an identical callback that lives in the main process. Second, the callbacks passed to the main process will persist until the main process garbage-collects them. For example, the following code seems innocent at first glance. It installs a callback for the `close` event on a remote object: ```javascript require('@electron/remote').getCurrentWindow().on('close', () => { // window was closed... }) ``` But remember the callback is referenced by the main process until you explicitly uninstall it. If you do not, each time you reload your window the callback will be installed again, leaking one callback for each restart. To make things worse, since the context of previously installed callbacks has been released, exceptions will be raised in the main process when the `close` event is emitted. To avoid this problem, ensure you clean up any references to renderer callbacks passed to the main process. This involves cleaning up event handlers, or ensuring the main process is explicitly told to dereference callbacks that came from a renderer process that is exiting. ## Accessing built-in modules in the main process The built-in modules in the main process are added as getters in the `remote` module, so you can use them directly like the `electron` module. ```javascript const app = require('@electron/remote').app console.log(app) ``` ## Methods The `remote` module has the following methods: ### `remote.require(module)` * `module` String Returns `any` - The object returned by `require(module)` in the main process. Modules specified by their relative path will resolve relative to the entrypoint of the main process. e.g. ```sh project/ ├── main │   ├── foo.js │   └── index.js ├── package.json └── rendere
评论
    相关推荐
    • electron-test
      电子测试 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • electron_sample
      电子样品 安装步骤 sudo npm install -g electron-prebuilt
    • electron-boilerplate
      电子样板 具有React + Babel的Electron的模板。 开始项目 npm install npm run init npm run server 包装 npm run release
    • pluggable-electron
      可插拔电子 什么是可插拔电子 可插拔Electron是一个框架,用于构建可以被其他方扩展的Electron应用程序。 :red_exclamation_mark: 注意 :red_exclamation_mark...npm install pluggable-electron 用法 该框架围绕扩展
    • electron-demo
      电子演示 按照安装依赖项以编译串行端口。 npm安装 npm run electronic命令运行该应用程序 npm run dist命令创建dist
    • electron-musicplayer
      安装依赖 npm install 本地运行项目 npm start 项目打包成 App npm run dist
    • productivity-electron
      生产率 桌面生产力经理 构建设置 # install dependencies npm install ...# build electron application for production npm run build 该项目是通过使用 @ 生成的。 关于原始结构的文档可以在找到。
    • vue3-electron
      vue3-电子 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • electron.zip
      npm install electron安装后报错无法运行的小伙伴,说明electron没下载成功 下载后解压到node_modules目录即可,npm install electron安装后无法运行的小伙伴,下载这个electron压缩包,解压到node_modules
    • electron-remotty
      用法 在OSX中构建应用 npm install -g electron-packager electron-packager . remotty --platform=darwin --arch=x64 --version=0.33.3 --overwrite --icon=images/icon.icns