前言
前端開發桌面程序這個概念已經出現有一段時間了，這項技術也已經走向成熟，Github上nw和光electron的star就差不多有10w顆星了，github也衍生出了很多開源的桌面項目儼然成了一個熱門項目。既然這么熱，那就一個字：學。
本文主要幫助js基礎比較薄弱，又沒有接觸過electron的同學更好的學習electron，文中有什么不足之處或者錯誤，歡迎指出。
electron 安裝
npm命令安裝electron庫
npm install electron --save-dev --save-exact
傳送門：electron官方Github
如何快速上手electron
剛接觸一個新東西，難免一頭霧水，如果多看一點相關的文章勢必會有一個方向感，去更好的上手新東西。上手electron，官方提供了一個非常好的快速上手實例。
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
這個倉庫給我們初始化了一個electron項目，結構非常純凈，克隆下來你就可以直接改造成自己的項目。
electron API
官方api（英文） 官方docs
翻譯API（版本有偏差）翻譯版docs
國內也有翻譯版的API文檔，但是不能保證是最新的，使用時一定要看好自己的版本和翻譯版。使用翻譯版API。同時可以看看官方的更新日志，看看有什么新功能。官方社區有很多有用的工具，開始學習欠務必了解，涉及到項目開發調試和項目構建。這里推薦一個倉庫，這個倉庫收錄了一些比較常用的API，克隆后跑起來你就可以快速查看這些常用API
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 。
簡單理解：
給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
如果覺得本文對你有所幫助，就star一下吧～大傳送之術！ 我的博客Github
