Electron 不完全快速手冊


Electron能干嘛

Vscode 基於Electron開發的,他是用來開發桌面軟件的,可以輕易的跨平台

他的前身是atomshell,圖標很丑,不用在意,一點也不像vscode也不用在意。

 

Let's go

Electron 是基於Node Chromium V8 組合而來,目前的版本是1.3.3

 

https://github.com/electron/electron/releases/download/v1.3.3/electron-v1.3.3-win32-x64.zip

 

我貼出windows版的electron 發布好的下載鏈接,其他版本自行去electron官網尋找

下載完先跑起來看一看。是的,一點不像vscode.

讓我們先准備一個helloworld頁面

直接從硬盤上將我們的頁面拖到瀏覽器里面是不能正確運行的,因為有些js 的 xhr 操作,一定需要一個服務器。

但是直接拖到electron里面是可以的,因為他集成了nodejs。

 

從electron里面運行我們的index.html

看起來是這樣的

一點也不像瀏覽器呀,別急,按下alt鍵,菜單出來了有木有,從view 里 選擇 toogle develop tool。

然后

這個和chrome 瀏覽器的調試工具一樣一樣的東西就出現了

當當,這就跑起來了

這樣不行

這樣當然不行,我們用electron 是為了開發本地app,他要解決幾個問題。

要和頁面不一樣

 

你用svn 從這里抓一下代碼,只能用svn抓喲

http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl/webgl_light/webgl_light

 

然后把拖進electron,如果沒有js,回去重學typescript。

拖進去你會發現沒有啥變化呀。

關掉輸入法,按一下Q鍵

彈出來一個窗口了吧

然后修改一下里面的文字,按一下fix it

主窗口里面的文字變了,有趣吧。

怎么做到的

是因為electron 啟動的其實需要是一個js,作為一個沒有外觀的主進程。

然后這個主進程可以開很多個 頁面進程

沒錯,是進程,electron 開發的app,都是多進程的,這點很囧,不同窗口之間的通訊都是跨進程的。通訊方法 electron有封裝。

 

頁面進程=窗口進程,因為強大的習慣作祟,我可能會混亂,有時候寫頁面進程,有時候寫窗口進程,他們是一個東西。

 

我們做了什么:

  1. elemain.js 是沒有外觀的主進程
  2. 主進程的代碼里寫死了,使用index.html啟動一個頁面進程
  3. Index頁面進程 按 Q的時候,使用index2.html 再啟動一個頁面進程

    並將一些數據放到主進程里。

  4. Index2頁面進程啟動后,到主進程里取出數據並顯示在界面里。

    Index2頁面按鈕按下時,index2將數據放進主進程,並群發一條消息

  5. Index頁面注冊一個事件處理器,收到index2發來的事件后,修改文字和位置

 

這是electron最復雜的機制

我們還封裝了electron的調用本地對話框,打開文件,保存文件啥的

還封裝了electron的 保存和讀取本地問題

 

這兩個部分都比較簡單,相信你看到API就知道了。

有悟性的你,細節one by one 可以不必看了。為了完整,我還是要寫下去。

細節one by one

1.這里是electron的主進程

2.固定封裝了用index.html啟動 一個 頁面進程

另外有一些用主進程保存全局數據的支持代碼,可以讓頁面進程之間共享數據。

還有一些讓頁面進程之間互發消息的支持代碼,可以讓頁面進程之間通訊。

一般不需要去改他。

3.index頁面進程按Q的邏輯

electron.API.Init 必須調用,初始化一些electron對象。

這些封裝都在里,你一般也不需要去改他。

如果Init返回false 八成現在就不是electron 環境

 

IPC 是electron 的跨進程通訊的概念

IPC SetInfo 是將數據存儲在主進程內,這樣對於每個窗口進程都是統一的存儲位置,你放在一個窗口進程里的數據,其他窗口進程沒辦法直接取得

 

IPC OpenWin 是打開一個新的窗口進程,因為只有主進程才能有這個權限,所以這個操作時首先通過IPC通知主進程,然后主進程去開的窗口,啥時候窗口開好不知道。所以千萬不要在OpenWin之后馬上對着這個Win干啥,你不知道他啥時候開好的。

 

4.index2頁面進程的邏輯

上面說了,index2頁面進程啥時候開好,index那邊是不知道的,所以不能讓index把數據發過來,這不可靠,要index2頁面自己初始化自己。

Index2的邏輯如圖,onload事件就是自己ok了,然后Ipc_GetInfo 從主進程取數據,主進程沒有外觀,一直待命的,除非index 窗口進程關閉,主進程才關閉,並且主進程關閉時,所有主進程管理的窗口進程全部關閉(這個跟着index進程關閉主進程的邏輯也是我寫死的,所以index窗口進程不能隨便關,可以在index窗口進程里寫退出事件,讓用戶確認才退出)

 

 

然后index2頁面進程 按鈕按下的邏輯如下

再把數據放進主進程

另外直接來個群發

 

  1. index窗口進程怎么收事件?

就這么簡單,只要指定一個接受函數就行啦

最后補一張圖直接在vs里面配置啟動electron,這樣按f5就行啦


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM