前端開發桌面程序這個概念已經出現有一段時間了，這項技術也已經走向成熟，Github上nw和光electron的star就差很少有10w顆星了，github也衍生出了不少開源的桌面項目儼然成了一個熱門項目。既然這麼熱，那就一個字：學。javascript
本文主要幫助js基礎比較薄弱，又沒有接觸過electron的同窗更好的學習electron，文中有什麼不足之處或者錯誤，歡迎指出。html
electron 安裝
npm命令安裝electron庫前端
npm install electron --save-dev --save-exact
傳送門：electron官方Githubvue
如何快速上手electron
剛接觸一個新東西，不免一頭霧水，若是多看一點相關的文章勢必會有一個方向感，去更好的上手新東西。上手electron，官方提供了一個很是好的快速上手實例。java
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start
這個倉庫給咱們初始化了一個electron項目，結構很是純淨，克隆下來你就能夠直接改形成本身的項目。node
electron API
官方api（英文） 官方docsreact
翻譯API（版本有誤差）翻譯版docswebpack
國內也有翻譯版的API文檔，可是不能保證是最新的，使用時必定要看好本身的版本和翻譯版。使用翻譯版API。同時能夠看看官方的更新日誌，看看有什麼新功能。官方社區有不少有用的工具，開始學習欠務必瞭解，涉及到項目開發調試和項目構建。這裏推薦一個倉庫，這個倉庫收錄了一些比較經常使用的API，克隆後跑起來你就能夠快速查看這些經常使用APIgit
git clone https://github.com/fuchao2012/zh-cn-Electron-API-Demos
cd zh-cn-Electron-API-Demos npm install npm start
electron項目和web項目的區別
electron核心咱們能夠分紅2個部分，主進程和渲染進程。主進程鏈接着操做系統和渲染進程，能夠把她看作頁面和計算機溝通的橋樑。渲染進程就是咱們所熟悉前端環境了。只是載體改變了，從瀏覽器變成了window。傳統的web環境咱們是不能對用戶的系統就行操做的。而electron至關於node環境，咱們能夠在項目裏使用全部的node api 。github
簡單理解：
給web項目套上一個node環境的殼。
相比web項目，桌面項目多了一個進程
項目遷移
若是要遷移項目到web端，就須要把項目中的electron提供的API和node的API徹底剝離出來，只能遺留web的代碼，好比 node fs模塊，electron提供ipc 模塊，都須要剝離。
若是你一開始就打算雙端程序，在開始寫代碼時應該對web代碼和elecctron的代碼進行分離，以便後期的遷移。
項目開發打包工具
這裏推薦devtron 和 electron-builder 2個開發工具，配置簡單，功能強大。這裏不詳細介紹工具的使用。官方都有很是好的文檔。
傳送門： devtron
傳送門： electron-builder
社區還有不少好用的工具，能夠自行查閱，選擇使用。
傳送門：community
ps： electron打包的時候須要下載一個版本庫，速度會很是慢，能夠經過淘寶鏡像源解決
>就是在你的命令前加ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/及空格 $ ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm run build
Electron介紹差很少就到這裏，框架有了。然而一大堆配置頭都暈了，從0-1很是困難，咱們不妨從1到0，能夠先找個模版作個小demo感覺一下electron的魅力，在作項目中學習electron。
傳送門： react模版
傳送門： vue模版
electron-vue經驗分享
官方文檔中做者提供了不少對開發有用的東西，我推薦學習的同窗都通讀一遍
傳送門： electron-vue文檔
electron-vue，做者爲咱們封裝好了一個基於vue框架的腳手架，包括electron全部基本的開發構建工具 和vue配套的請求，路由以及vuex等插件。
經過腳手架咱們能夠直接進入開發階段，開發的同時，去了解electron的工做機制，以後再開始深刻去理解她更深層次的代碼邏輯。 先走形，再走心。
不遷移項目就能夠打包雙版本的可行方案
做者並未提供web開發的支持，可是提供了很是好的web打包支持。
只要寫好邏輯咱們能夠不用遷移項目就能夠打包桌面項目和web項目。
process.env.IS_WEB是暴露的一個全局變量，咱們能夠在渲染進程中獲取，項目在electron環境下，返回false。不然爲true。於此，咱們能夠經過設置她的值來達到web dev的效果，也能夠處理不一樣環境的不一樣邏輯，一些示例：
打開新窗口的「最佳」作法
由於是webpack配置，入口只有index.html ，因此打開新窗口，通常會再配置一個入口。其實還有一種更佳的作法。
>>> 主進程 定義好監聽事件
ipc.on('newPage', function(e) { const modalPath = process.env.NODE_ENV === 'development' ? 'http://localhost:9080/#/newPage' : `file://${__dirname}/index.html#newPage` let win = new BrowserWindow({ width: 1024, height: 724, webPreferences: { webSecurity: false } }) win.on('close', function() { win = null }) win.loadURL(modalPath) }) >>> router/index.js 定義路由 // import 你的新頁面 .vue 文件 { path: '/newPage', name: 'newPage', component: newPage, } 》》》配置完成 任意進程調用ipc.send('newPage') 完美解決
頁面之間的數據共享問題
electron項目能夠經過本地數據庫去作一個數據存儲，這樣你就能夠在任何須要的地方調用這份數據。個人作法：
1.首先選擇一個 本地數據庫插件 ，我用的 nedb
>>> 新建db.js
import Datastore from 'nedb' import path from 'path' import { remote } from 'electron' const db = { tableData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/tableData.db')}), chartData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/chartData.db')}), cfgData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/cfgData.db')}), } export default { db } >>>> 引入數據庫 /** * 本地數據庫導入 * web模式註釋該代碼 */ import db from '../db' Vue.prototype.$db = db.db >>>> 任意頁面調用數據庫 this.$db.chartData.loadDatabase(); this.$db.chartData.find({}, (err, docs)=> { // console.log(docs); if(docs && docs.length > 0){ this.totalOptionList = docs; } });
根據本身的習慣選擇數據庫，我本身對mongodb數據庫比較熟悉，因此採用了nedb。語法糖相似，基本直接拿來就能用，不須要再次學習。
後記
最後說一些能夠幫助你更好學習electron的基礎知識：
webpack： 最強構建工具，沒有之一，瞭解webpack，你才能更好編寫項目配置。
node： electron是搭載谷歌v8內核的高性能的node環境 ，全部node能用的東西，咱們都能用。是否是很酸爽？
奉上一個demo項目，簡單的相冊程序。還有一個項目涉及公司，代碼就很差上了，只能分享經驗。
傳送門: 相冊Github