electron 學習筆記

1、快速搭建一個electron 項目結構

# 克隆示例項目的倉庫
$ git clone https://github.com/electron/electron-quick-start

# 進入這個倉庫
$ cd electron-quick-start

# 安裝依賴並運行
$ npm install && npm start

 

2、關於<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元素

一、在 <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>

二、定義<webview>  標籤聲明的js文件內容，是一個大的對象

inject.js文件:

webViewFunction = {
  getDom:function(){
    var a = document.getElementById('chatRoomMember.html')
    console.log(a)
  }
}

 

三、在渲染進程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('開始載入')
  })

}

 

 

 

 

3、主進程和渲染進程之間的通信

ipcMain 模塊： 在主進程引入，用於接收渲染進程發射的事件和進行回覆  

　　　　　　　結構： ipcMain.on ( 接收事件名， callback (事件對象，接收參數) )

 

const {ipcMain} = require('electron')

ipcMain.on('send',function(event, data){   // 使用 ipcMain 模塊接收渲染進程發射的事件
  console.log(data)
  event.sender.send('reply', '接收到事件後進行回覆')   // 發射回覆事件
})

 

ipcRenderer 模塊： 在渲染進程引入，用於發射事件給主進程和接收主進程返回的回覆事件

　　　　　　　　　結構：ipcRenderer.send ( 事件名稱，發射的數據)

　　　　　　　　　　　　ipcRenderer.on ( 回覆事件名稱，回覆的數據)

 

const {ipcRenderer} = require('electron')

ipcRenderer.send('send','發送數據')   　　　　　　// 使用 ipcRenderer 模塊，發送事件給主進程
ipcRenderer.on('reply', (event, data) => {   // 接收主進程的回覆事件
  console.log('主進程回覆過來的數據'+data) 
})

 

 

 4、兩個渲染進程之間的通信方法

在兩個網頁（渲染進程）間共享數據最簡單的方法是使用瀏覽器中已經實現的 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);

 

 

 

5、在主進程main.js文件中可以使用的模塊

 app 模塊： 　　　　　　   控制整個應用的生命週期設計

autoUpdater 模塊： 　　   自動更新應用

BrowserWindow 模塊：     建立一個瀏覽器窗口

contentTracing 模塊： 收集由底層的Chromium content 模塊 產生的搜索數據

dialog 模塊： 　　　　　　提供一個彈出框或者文件選擇框   

globalShortcut 模塊：       註冊全局的自定義快捷鍵

ipcMain 模塊：  　　　　　提供主進程和渲染進程之間的通信方法，接收渲染進程發射過來的事件和數據並進行回覆

menu 模塊： 　　　　　　建立鼠標右鍵顯示菜單，跟 menuItem模塊 配合使用，能夠經過 remote 模塊給渲染進程調用.

powerSaveBlocker 模塊： 阻止應用系統進入睡眠模式，容許應用保持系統和屏幕繼續工做

session 模塊： 　　　　　建立一個新的 Session 對象. 可爲應用建立多個Cookie文件夾存儲不一樣的數據信息，而且不會相互影響，各自獨立

webContents模塊 ：　　   是一個 事件發出者，負責渲染並控制網頁，也是 BrowserWindow 對象的屬性.  可設置打開調試窗口等

 

6、在渲染進程中可以使用的模塊

desktopCapturer 模塊： 獲取可用資源，這個資源可經過 getUserMedia 捕得到到.

ipcRenderer 模塊： 　　提供渲染進程個主進程之間的通信方法，能夠從渲染進程向主進程發送同步或異步消息. 也能夠收到主進程的相應.

 remote 模塊： 　　　　 使渲染進程能夠調用主進程的模塊

webFrame 模塊： 　　  自定義如何渲染當前網頁 

 

7、兩個進程間均可以使用的模塊

clipboard 模塊： 　　  提供方法來供複製和粘貼操做

crashReporter 模塊 ： 開啓發送應用崩潰報告，自動提交崩潰報告給服務器

nativeImage 模塊： 　　圖片對象，從剪切板中讀取圖片，它返回的是 nativeImage

screen 模塊 ： 　　  　屏幕的 size，顯示，鼠標位置等的信息. 便可根據用戶顯示器大小等信息進行渲染頁面

shell 模塊 ： 　　　　   提供了集成其餘桌面客戶端的關聯功能，好比調用用戶默認瀏覽器打開一個新窗口等

 

 

 

相關文檔連接參考：https://www.w3cschool.cn/electronmanual/electronmanual-electron-faq.html

 

　　　　　　　　　https://electronjs.org/docs