前言

前端開發桌面程式這個概念已經出現有一段時間了，這項技術也已經走向成熟，Github上nw和光electron的star就差不多有10w顆星了，github也衍生出了很多開源的桌面專案儼然成了一個熱門專案。既然這麼熱，那就一個字：學。

本文主要幫助js基礎比較薄弱，又沒有接觸過electron的同學更好的學習electron，文中有什麼不足之處或者錯誤，歡迎指出。

electron 安裝

npm命令安裝electron庫

npm install electron --save-dev --save-exact

如何快速上手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個開發工具，配置簡單，功能強大。這裡不詳細介紹工具的使用。官方都有非常好的文件。

社群還有很多好用的工具，可以自行查閱，選擇使用。

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。

傳送門： 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;
                            }
                        });