一、快速搭建一個electron 項目結構
# 克隆示例項目的倉庫 $ git clone https://github.com/electron/electron-quick-start # 進入這個倉庫 $ cd electron-quick-start # 安裝依賴並運行 $ npm install && npm start
二、關於<webview> 標簽 的使用
<webview> 標簽 可以把一個第三方頁面嵌入到你的應用中，在一個最簡單的 webview 中，它包含了 web page 的文件路徑和一個控制 webview 容器展示效果的css樣式:
<webview id="foo" src="https://www.github.com/" style="display:inline-block; width:640px; height:480px"></webview>
如何獲取 <webview></webview> 標簽嵌入第三方網頁的DOM元素
1、在 <webview> 標簽 內使用 preload 屬性指定聲明該標簽的js文件
<webview src="https://wx2.qq.com/?&lang=zh_CN" autosize="on" minwidth="576" min-height="800" id="foo" preload="./inject.js"></webview>
2、定義<webview> 標簽聲明的js文件內容，是一個大的對象
inject.js文件:
webViewFunction = { getDom:function(){ var a = document.getElementById('chatRoomMember.html') console.log(a) } }
3、在渲染進程js文件中調用, 調用的方式必須為對象形式
onload = function(){ var webview = document.getElementById('foo'); // 找到頁面上的webview對象 webview.addEventListener("dom-ready", function(){ // 打開webview 的調試窗口 webview.openDevTools() webview.executeJavaScript('webViewFunction.getDom()') // 調用webview里的方法 }); }
如何調用 <webview> 標簽的各個方法：必須在webview加載完之后調用
獲取到頁面上的<webview> 標簽對象，在<webview> 標簽加載完成之后進行調用
var webview = document.getElementById('foo'); // 找到頁面上的webview對象 webview.addEventListener("dom-ready", function(){ // 打開webview 的調試窗口 webview.openDevTools() console.log(webview.getURL()) // 獲得webview 的URl });
關於 <webview>.loadURL(url[, options]) 方法：重新載入一個新的url
如何綁定<webview> 標簽的各個DOM事件：
獲取到頁面上的<webview> 標簽對象，使用 addEventListener 進行綁定事件
onload = function(){ var webview = document.getElementById('foo'); // 找到頁面上的webview對象 webview.addEventListener("dom-ready", function(){ // 綁定加載完后事件 webview.openDevTools() }); webview.addEventListener("did-stop-loading", function(){ // 綁定加載結束時的事件 console.log('載入結束') }); webview.addEventListener("did-start-loading", function(){ // 綁定開始載入時事件 console.log('開始載入') }) }
三、主進程和渲染進程之間的通訊
const {ipcMain} = require('electron')
ipcMain.on('send',function(event, data){ // 使用 ipcMain 模塊接收渲染進程發射的事件
console.log(data)
event.sender.send('reply', '接收到事件后進行回復') // 發射回復事件
})
const {ipcRenderer} = require('electron')
ipcRenderer.send('send','發送數據') // 使用 ipcRenderer 模塊，發送事件給主進程
ipcRenderer.on('reply', (event, data) => { // 接收主進程的回復事件
console.log('主進程回復過來的數據'+data)
})
四、兩個渲染進程之間的通訊方法
在兩個網頁（渲染進程）間共享數據最簡單的方法是使用瀏覽器中已經實現的 HTML5 API，比較好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB。
還可以用 Electron 內的 IPC 機制實現。將數據存在主進程的某個全局變量中，然后在多個渲染進程中使用 remote 模塊來訪問它
// 在主進程中 global.sharedObject = { someProperty: 'default value' };
// 在第一個頁面中 require('remote').getGlobal('sharedObject').someProperty = 'new value';
// 在第二個頁面中 console.log(require('remote').getGlobal('sharedObject').someProperty);
五、在主進程main.js文件中可使用的模塊
app 模塊： 控制整個應用的生命周期設計
autoUpdater 模塊： 自動更新應用
BrowserWindow 模塊： 創建一個瀏覽器窗口
contentTracing 模塊： 收集由底層的Chromium content 模塊 產生的搜索數據
dialog 模塊： 提供一個彈出框或者文件選擇框
globalShortcut 模塊： 注冊全局的自定義快捷鍵
ipcMain 模塊： 提供主進程和渲染進程之間的通訊方法，接收渲染進程發射過來的事件和數據並進行回復
menu 模塊： 創建鼠標右鍵顯示菜單，跟 menuItem模塊 配合使用，可以通過 remote 模塊給渲染進程調用.
powerSaveBlocker 模塊： 阻止應用系統進入睡眠模式，允許應用保持系統和屏幕繼續工作
session 模塊： 創建一個新的 Session 對象. 可為應用創建多個Cookie文件夾存儲不同的數據信息，並且不會相互影響，各自獨立
webContents模塊 ： 是一個 事件發出者，負責渲染並控制網頁，也是 BrowserWindow 對象的屬性. 可設置打開調試窗口等
六、在渲染進程中可使用的模塊
desktopCapturer 模塊： 獲取可用資源，這個資源可通過 getUserMedia 捕獲得到.
ipcRenderer 模塊： 提供渲染進程個主進程之間的通訊方法，可以從渲染進程向主進程發送同步或異步消息. 也可以收到主進程的相應.
remote 模塊： 使渲染進程可以調用主進程的模塊
webFrame 模塊： 自定義如何渲染當前網頁
七、兩個進程間都可以使用的模塊
clipboard 模塊： 提供方法來供復制和粘貼操作
crashReporter 模塊 ： 開啟發送應用崩潰報告，自動提交崩潰報告給服務器
nativeImage 模塊： 圖片對象，從剪切板中讀取圖片，它返回的是 nativeImage
screen 模塊 ： 屏幕的 size，顯示，鼠標位置等的信息. 即可根據用戶顯示器大小等信息進行渲染頁面
shell 模塊 ： 提供了集成其他桌面客戶端的關聯功能，比如調用用戶默認瀏覽器打開一個新窗口等
相關文檔鏈接參考：https://www.w3cschool.cn/electronmanual/electronmanual-electron-faq.html