整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
作者｜
/a/76934
前言
雖然 B/S 是目前開發(fā)的主流，但是 C/S 仍然有很大的市場需求。受限于瀏覽器的沙盒限制，網(wǎng)頁應用無法滿足某些場景下的使用需求，而桌面應用可以讀寫本地文件、調(diào)用更多系統(tǒng)資源，再加上 Web 開發(fā)的低成本、高效率的優(yōu)勢，這種跨平臺方式越來越受到開發(fā)者的喜愛。
是一個基于 和 Node.js，使用 HTML、CSS 和 來構(gòu)建跨平臺應用的跨平臺開發(fā)框架，兼容 Mac、Windows 和 Linux。目前， 已經(jīng)創(chuàng)建了包括 VScode 和 Atom 在內(nèi)的大量應用。
環(huán)境搭建
創(chuàng)建 跨平臺應用之前，需要先安裝一些常用的工具，如 Node、vue 和 等。
安裝Node
進入 Node 官網(wǎng)下載頁 ，然后下載對應的版本即可，下載時建議下載穩(wěn)定版本。如果安裝 Node 使用 方式，建議安裝時將 npm 倉庫鏡像改為淘寶鏡像，如下所示。
npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org安裝/升級 vue-cli
先執(zhí)行以下命令，確認下本地安裝的 vue-cli 版本。
vue -V
如果沒有安裝或者不是最新版，可以執(zhí)行以下命令安裝/升級。
npm install @vue/cli -g
安裝
使用如下命令安裝 插件。
npm install -g electron
或者
cnpm install -g electron
為了驗證是否安裝成功，可以使用如下的命令。
electron --version
創(chuàng)建運行項目
官方提供了一個簡單的項目，可以執(zhí)行以下命令將項目克隆到本地。
git clone https://github.com/electron/electron-quick-start
然后在項目中執(zhí)行如下命令即可啟動項目。
cd electron-quick-start
npm install
npm start
啟動后項目的效果如下圖。
除此之外，我們可以使用 vue-cli 腳手架工具來創(chuàng)建項目。
vue init simulatedgreg/electron-vue
然后根據(jù)下面的提示一步步選中選項即可創(chuàng)建項目，如下所示。
然后，使用 npm install 命令安裝項目所需要的依賴包，安裝完成之后，可以使用 npm run dev 或 npm run build 命令運行 -vue 模版應用程序，運行效果如下圖所示。
源碼目錄
的源代碼主要依據(jù) 的拆分約定被拆成了許多部分。為了更好地理解源代碼，您可能需要了解一下 的多進程架構(gòu)。
源碼目錄結(jié)構(gòu)和含義具體如下：
Electron
├──atom - Electron 的源代碼
| ├── app - 系統(tǒng)入口代碼
| ├── browser - 包含了主窗口、UI 和其他所有與主進程有關(guān)的東西，它會告訴渲染進程如何管理頁面
| | ├── lib - 主進程初始化代碼中 JavaScript 部分的代碼
| | ├── ui - 不同平臺上 UI 部分的實現(xiàn)
| | | ├── cocoa - Cocoa 部分的源代碼
| | | ├── gtk - GTK+ 部分的源代碼
| | | └── win - Windows GUI 部分的源代碼
| | ├── default_app - 在沒有指定 app 的情況下 Electron 啟動時默認顯示的頁面
| | ├── api - 主進程 API 的實現(xiàn)
| | | └── lib - API 實現(xiàn)中 Javascript 部分的代碼
| | ├── net - 網(wǎng)絡相關(guān)的代碼
| | ├── mac - 與 Mac 有關(guān)的 Objective-C 代碼
| | └── resources - 圖標，平臺相關(guān)的文件等
| ├── renderer - 運行在渲染進程中的代碼
| | ├── lib - 渲染進程初始化代碼中 JavaScript 部分的代碼
| | └── api - 渲染進程 API 的實現(xiàn)
| | └── lib - API 實現(xiàn)中 Javascript 部分的代碼
| └── common - 同時被主進程和渲染進程用到的代碼，包括了一些用來將 node 的事件循環(huán)
| | 整合到 Chromium 的事件循環(huán)中時用到的工具函數(shù)和代碼
| ├── lib - 同時被主進程和渲染進程使用到的 Javascript 初始化代碼
| └── api - 同時被主進程和渲染進程使用到的 API 的實現(xiàn)以及 Electron 內(nèi)置模塊的基礎(chǔ)設(shè)施
| └── lib - API 實現(xiàn)中 Javascript 部分的代碼
├── chromium_src - 從 Chromium 項目中拷貝來的代碼
├── docs - 英語版本的文檔
├── docs-translations - 各種語言版本的文檔翻譯
├── spec - 自動化測試
├── atom.gyp - Electron 的構(gòu)建規(guī)則
└── common.gypi - 為諸如 `node` 和 `breakpad` 等其他組件準備的編譯設(shè)置和構(gòu)建規(guī)則
平時開發(fā)時，需要重點關(guān)注的就是 src、package.json 和 .yml 目錄。除此之外，其他需要注意的目錄如下：
應用工程目錄
使用 -vue 模版創(chuàng)建的 工程結(jié)構(gòu)如下圖。
和前端工程的項目結(jié)構(gòu)類似， 項目的目錄結(jié)構(gòu)如下所示：
對于開發(fā)者來說， 90% 的工作都是在 src 中完成，src 中的文件目錄如下。
應用程序分成三個基礎(chǔ)模塊：主進程、進程間通信和渲染進程。
1、主進程
運行 package.json 的 main 腳本（.js）的進程被稱為主進程。在主進程中運行的腳本通過創(chuàng)建web頁面來展示用戶界面。一個 應用總是有且只有一個主進程。
2、渲染進程
由于 使用了 來展示 Web 頁面，所以 的多進程架構(gòu)也被使用到。每個 中的 Web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中，Web 頁面通常在一個沙盒環(huán)境中運行，不被允許去接觸原生的資源。然而 允許用戶在 Node.js 的 API 支持下可以在頁面中和操作系統(tǒng)進行一些底層交互。
3、主進程與渲染進程通信
主進程使用 實例創(chuàng)建頁面。每個 實例都在自己的渲染進程里運行頁面。當一個 實例被銷毀后，相應的渲染進程也會被終止。主進程管理所有的 Web 頁面和它們對應的渲染進程。每個渲染進程都是獨立的，它只關(guān)心它所運行的 Web 頁面。
src 目錄結(jié)構(gòu)
在 目錄中，src 會包包含 main 和 兩個目錄。
main 目錄
main 目錄會包含 index.js 和 index.dev.js 兩個文件。
渲染進程
是渲染進程目錄，平時項目開發(fā)源碼的存放目錄，包含 assets、、router、store、App.vue 和 main.js。
assets：assets 下的文件如（js、css）都會在 dist 文件夾下面的項目目錄分別合并到一個文件里面去。：此文件用于存放應用開發(fā)的組件，可以是自定義的組件。router：如果你了解 vue-router，那么 項目的路由的使用方式和 vue-router 的使用方式類似。modules：-vue 利用 vuex 的模塊結(jié)構(gòu)創(chuàng)建多個數(shù)據(jù)存儲，并保存在 src//store/modules 中。
綜合示例
創(chuàng)建 跨平臺應用之前，需要先安裝一些常用的工具，如 Node、vue 和 等。
1、網(wǎng)易云音樂
-vue-cloud-music是一款使用+Vue+Ant Design Vue技術(shù)開發(fā)跨平臺桌面應用。下載鏈接：。具有如下特點：
以下是部分運行效果：
2、qq音樂播放器
qq音樂播放器基于 -vue 開發(fā)的音樂播放器，界面模仿QQ音樂，使用的技術(shù)棧-vue+vue+vuex+vue-router+element- UI。可以使用如下的方式來運行項目。
git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# 運行開發(fā)模式
npm run dev
# 打包安裝文件
npm run build部分運行效果如下圖。
源碼：
- END?-
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
