electron入門及仿客戶端QQ簡易版

項目: electron仿客戶端QQ簡易版

簡單講解electron的起源 --- 學習 -- 從入門到放棄！

仿qq項目地址

啓動

---

• npm install
• npm run dev

---

---

• 進度：已完成 -- 簡易登陸頁，簡易聊天頁
• 目的：學習electron的開發
• 技術棧：electron + vue全家桶 + elementUi + frozenui
• 學習參考文章：蘇南大叔的博客--electron官網--electron-VUE官網
• electron入門-簡單傳值
• electron用react快速搭建項目

---

效果圖

登陸頁：

Electron是什麼?

這是一個由GitHub的工程師Cheng Zhao（又名zcbenz）發起的開源項目,Electron是一個實時框架，容許您使用HTML5，CSS和JavaScript建立桌面應用程序。

Chromium和Node自己就是廣受歡迎的應用程序平臺，它們都被獨立用於建立雄心勃勃的應用程序。 Electron將兩個平臺結合在一塊兒，容許您使用JavaScript構建一個全新的應用程序類。您能夠在瀏覽器中執行任何操做

優點：

1.若是你有nodeJS開發經驗，和web開發經驗，你能夠很容易的上手electron

2.作客戶端比作網頁更值錢

圖解：

electron由Node.js+Chromium+Native APIs構成。你能夠理解成，它是一個獲得了Node.js和基於不一樣平臺的Native APIs增強的Chromium瀏覽器，能夠用來開發跨平臺的桌面級應用。

它的開發主要涉及到兩個進程的協做——Main（主）進程和Renderer（渲染）進程。簡單的理解兩個進程的做用：

• 1.Main進程主要經過Node.js、Chromium和Native APIs來實現一些系統以及底層的操做，好比建立系統級別的菜單，操做剪貼板，建立APP的窗口等。同時，也能夠在electron中使用node的api，是否是以爲很親切，很舒服？

• 2.Renderer進程主要經過Chromium來實現APP的圖形界面——就是平時咱們熟悉的前端開發的部分，不過獲得了electron給予的增強，一些Node的模塊（好比fs）和一些在Main進程裏能用的東西（好比Clipboard）也能在Render進程裏使用。

• 3.Main進程和Renderer進程經過ipcMain和ipcRenderer來進行通訊。經過事件監聽和事件派發來實現兩個進程通訊，從而實現Main或者Renderer進程裏不能實現的某些功能。

electron通訊的方式：

• localstory

• ipcMain---ipcRenderer 基友通訊

• webContents 渲染以及控制 web 頁面，強行操做！

• node寫接口

electron入門-簡單傳值

簡單傳值代碼地址