Electron使用指南——IPC 通信

2020-09-03 千鋒IT小助手

IPC 通信

1、index.html

<!DOCTYPE html><html> <head> <meta charset=&34;> <meta http-equiv=&34; content=&39;self&39;unsafe-inline&34;> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <button type=&34; id=&34;>Talk to main process</button><br> <!-- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>, and Electron <strong><script>document.write( process.versions.electron )</script></strong>. <script> // You can also require other files to run in this process require(&39;) </script> </body></html>

2、renderer.js

// This file is required by the index.html file and will// be executed in the renderer process for that window.// All of the Node.js APIs are available in this process.const { ipcRenderer } = require(&39;)let i = 1setInterval( () => { console.log(i) i++}, 1000)document.getElementById(&39;).addEventListener(&39;, e => { // ipcRenderer.send( &39;, &39;) let response = ipcRenderer.sendSync( &39;, &39;) console.log(response)})ipcRenderer.on( &39;, (e, args) => { console.log(args)})ipcRenderer.on( &39;, (e, args) => { console.log(args)})

3、main.js

// Modulesconst {app, BrowserWindow, ipcMain} = require(&39;)// Keep a global reference of the window object, if you don&39;index.html&39;did-finish-load&39;mailbox&39;Ray&39;ray@stackacademy.tv&39;closed&39;sync-message&39;A sync response from the main process&39;channel1&39;channel1-response&39;Message received on &34;. Thank you!&39;ready&39;window-all-closed&39;darwin&39;activate', () => { if (mainWindow === null) createWindow()})

相關焦點

  • Electron IPC 渲染線程和主線程通訊
    今天我們就看一看在 electron 中主線程是如何同渲染線程進行通訊的。那麼我們需要先了解一下什麼是主線程,什麼又是渲染線程。electron 會先運行此文件來啟動我們應用。#34; style="margin:0;"></p>引入 ipc 依賴,使用 ipcRender 的 send 方法消息給 main.js(主線程)這個是異步的,我麼可以在
  • Electron使用快速入門
    使用eletron前需要儲備哪些知識1、首先需要熟練掌握前端的基礎知識html,css,js2、有一定的node基礎,知道npm怎麼用下面我們從electron的安裝開始,了解下electron。一、electron安裝1、npm命令安裝electron庫:npm install electron --save-dev --save-exact2、查看是否安裝成功,輸入以下命令:electron -v二、electron官方新手入門實例該實例的使用方法如下:1、從GitHub上下載實例代碼
  • Electron使用指南—1介紹
    此外,我們還可以使用我們喜歡的框架和庫來實現這個程序,比如 Vue, React 等前端框架。Renderer Process在electron中,仍然使用Renderer Process渲染頁面,也就是說electron app使用Web頁面作為UI顯示,並且兼容傳統的Web頁面。
  • Electron-vue客戶端開發總結
    自定義最小化、最大化、關閉窗口按鈕功能實現:在主進程中寫入以下代碼段// 控制窗口大小以及關閉ipcMain.on('close', () => { win.destroy();})// 窗口最小化ipcMain.on('toMinimize', () => { win.minimize();})// 窗口最大化和還原ipcMain.on('toMaximize', () => { if (win.isMaximized()) { win.unmaximize
  • Electron使用指南——11添加一個新的信息
    this.status = true this.addButtonText = &39; } } }}</script>4、完善主進程 main.js編輯 /main.js , 在文件代碼中的最外層添加 ipcMain
  • Electron使用指南—18項目打包部署
    electron builder模塊。electron Builder 已成為打包 electron 幾乎所有我們需要的所有功能,包括一個非常簡單的使用 electron 更新。所以在使用electron Builder時,我們將看到如何實現將本地的應用
  • Electron使用指南——共享API
    We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>, and Electron <strong><script>document.write( process.versions.electron
  • electron初探踩坑筆記
    前幾天,基於希望完善自己的技術體系目的,發現了electron,於是就進行了一些基本功能實踐,本文將整體實踐過程進行記錄,希望對大家有所幫助。摘要可能以下一些問題會引起你的興趣:electron和vue的整合使用:nuxt,ant-design-vue。electron如何發起網絡請求:needle。electron如何使用本地存儲:nedb。
  • Electron使用指南7——特性和技巧
    特性和技巧本節我們來學習一下 Electron 其他特性和使用技巧。darwin&39;activate&34;UTF-8&34;Content-Security-Policy&34;script-src &39; &39;&34;status&39;status&39;online&39;offline&39;online&39;offline&34;UTF-8&34;Content-Security-Policy&34;script-src &39; &39;&39;electron
  • Electron使用指南——8項目簡介
    3、項目地址https://github.com/lurongtao/felixbooks-electron
  • Electron使用指南——9環境搭建
    1、搭建 Electron 環境在你認為合適的目錄下 創建 readit-vue 目錄,在終端命令行裡輸入命令:cd 你認為合適的目錄/readit-vuenpm init -ynpm install electron@latest -D
  • Electron指南3——Main Process API
    兩種使用方法app.on(&39;, createWindow)app.on(&39;, () => { console.log(&39;) createWindow()})檢查應用是否登錄:app.isReady()如果應用沒有Ready
  • 讓進程間通信更容易 - Pandora.js 的 IPC-Hub
    我們在淘寶業務中也是這樣實踐的,有一個問題也越發明顯,進程間如何通信呢?起初我們有一個比較簡單的 IPC 實現,通過 Domain Socket 進行通信。也是傳統的 C/S 架構的,兩個進程間進行比較基礎的消息通信(比較類似 Node-IPC 這個包)。不過實在是太基礎了,時不時地在想:在同一臺計算機上的同一個語言,為什麼要搞得這麼痛苦?
  • vue-cli@3+Electron開發跨平臺桌面應用,使用electron-builder
    electron-vue已經沒有更新了,vue已經更新到vue-cli@3了。vue-cli-plugin-electron-builder可以很好的支持vue-cli@3 + electron的開發,並且利用electron-builder打包更加強大!!
  • 使用electron+vue開發一個跨平臺todolist(便籤)桌面應用
    # 1最近一直在使用electron開發桌面應用,對於一個web開發者來說,html+javascript+css的開發體驗讓我非常舒服。之前我一直簡單的以為electron只是張網頁加個殼,和那些號稱跨平臺的運行在手機上的webapp是一個套路。
  • electron-egg
    electron-egg一個快速、功能豐富的桌面軟體開發框架,基於electron和egg.js特性 可以用服務端的開發思維,來編寫桌面軟體
  • IPC國際線上研討會推薦:IPC-CFX 電子製造商的工業4.0標準
    電子行業通過使用更好的設計和效率更高的組件,與各種物聯網和其他頂尖數位技術一同進行創新。正處於建設中的互聯生態系統具有許多良好的效益,並用此來產生競爭優勢。IPC-CFX對機器與機器之間的通信進行了簡化和標準化,同時也促進了機器對企業/企業對機器的解決方案。
  • Electron 7.0.0 發布,跨平臺桌面應用開發工具
    Electron 7.0.0 穩定版正式發布了,Electron 是 GitHub 開發的跨平臺桌面應用開發工具,支持使用 Web 技術開發桌面應用,其基於 C++ 開發,GUI 核心來自於 Chromium,而 JavaScript
  • electron-vue技術篇
    一份針對於electron-vue項目整理的搭建、運行、打包過程的踩坑總結分享首先為了保證安裝效率,採用cnpm或者yarn指令來安裝,前提是安裝了node環境安裝全局yarn,最好設置淘寶鏡像npm install -g yarn安裝全局vue-clinpm install