前言

前端開發(fā)桌面程序這個概念已經(jīng)出現(xiàn)有一段時間了刻帚，這項技術(shù)也已經(jīng)走向成熟鲫构，Github上nw和光electron的star就差不多有10w顆星了卿泽，github也衍生出了很多開源的桌面項目儼然成了一個熱門項目。既然這么熱紧憾，那就一個字：學(xué)到千。

本文主要幫助js基礎(chǔ)比較薄弱赴穗，又沒有接觸過electron的同學(xué)更好的學(xué)習(xí)electron，文中有什么不足之處或者錯誤般眉，歡迎指出。

electron

electron 安裝

npm命令安裝electron庫

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

傳送門：electron官方Github

如何快速上手electron

剛接觸一個新東西甸赃，難免一頭霧水柿汛，如果多看一點相關(guān)的文章勢必會有一個方向感埠对，去更好的上手新東西裁替。上手electron，官方提供了一個非常好的快速上手實例貌笨。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

這個倉庫給我們初始化了一個electron項目弱判，結(jié)構(gòu)非常純凈，克隆下來你就可以直接改造成自己的項目锥惋。

electron API

官方api（英文） 官方docs

翻譯API（版本有偏差）翻譯版docs

國內(nèi)也有翻譯版的API文檔，但是不能保證是最新的剥哑，使用時一定要看好自己的版本和翻譯版。使用翻譯版API株婴。同時可以看看官方的更新日志暑认，看看有什么新功能困介。官方社區(qū)有很多有用的工具，開始學(xué)習(xí)欠務(wù)必了解蘸际，涉及到項目開發(fā)調(diào)試和項目構(gòu)建。這里推薦一個倉庫根穷，這個倉庫收錄了一些比較常用的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項目的區(qū)別

electron核心我們可以分成2個部分屿良，主進(jìn)程和渲染進(jìn)程惫周。主進(jìn)程連接著操作系統(tǒng)和渲染進(jìn)程，可以把她看做頁面和計算機溝通的橋梁喷橙。渲染進(jìn)程就是我們所熟悉前端環(huán)境了。只是載體改變了贰逾，從瀏覽器變成了window菠秒。傳統(tǒng)的web環(huán)境我們是不能對用戶的系統(tǒng)就行操作的。而electron相當(dāng)于node環(huán)境，我們可以在項目里使用所有的node api 。

簡單理解：
給web項目套上一個node環(huán)境的殼酵熙。

項目結(jié)構(gòu)

相比web項目轧简，桌面項目多了一個進(jìn)程

項目遷移

如果要遷移項目到web端，就需要把項目中的electron提供的API和node的API完全剝離出來哮独，只能遺留web的代碼察藐，比如 node fs模塊，electron提供ipc 模塊分飞，都需要剝離。

如果你一開始就打算雙端程序讯檐，在開始寫代碼時應(yīng)該對web代碼和elecctron的代碼進(jìn)行分離染服，以便后期的遷移。

項目開發(fā)打包工具

這里推薦devtron 和 electron-builder 2個開發(fā)工具挖垛，配置簡單秉颗，功能強大。這里不詳細(xì)介紹工具的使用站宗。官方都有非常好的文檔。

傳送門： devtron

傳送門： electron-builder

社區(qū)還有很多好用的工具夷家，可以自行查閱敏释，選擇使用。

傳送門：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的魅力藏否，在做項目中學(xué)習(xí)electron充包。

傳送門： react模版 ????

傳送門： vue模版 ????

electron-vue經(jīng)驗分享

官方文檔中作者提供了很多對開發(fā)有用的東西，我推薦學(xué)習(xí)的同學(xué)都通讀一遍

傳送門： electron-vue文檔

electron-vue继薛，作者為我們封裝好了一個基于vue框架的腳手架愈捅，包括electron所有基本的開發(fā)構(gòu)建工具 和vue配套的請求，路由以及vuex等插件蓝谨。
通過腳手架我們可以直接進(jìn)入開發(fā)階段，開發(fā)的同時咖楣，去了解electron的工作機制芦昔，之后再開始深入去理解她更深層次的代碼邏輯。 先走形咕缎，再走心。

不遷移項目就可以打包雙版本的可行方案

作者并未提供web開發(fā)的支持焙蹭，但是提供了非常好的web打包支持嫂伞。
只要寫好邏輯我們可以不用遷移項目就可以打包桌面項目和web項目拯钻。

process.env.IS_WEB是暴露的一個全局變量撰豺，我們可以在渲染進(jìn)程中獲取，項目在electron環(huán)境下刊驴，返回false寡润。否則為true舅柜。于此，我們可以通過設(shè)置她的值來達(dá)到web dev的效果致份，也可以處理不同環(huán)境的不同邏輯，一些示例：

示例

示例2

示例3

打開新窗口的“最佳”做法

因為是webpack配置，入口只有index.html 滔蝉，所以打開新窗口，一般會再配置一個入口阳谍。其實還有一種更佳的做法螃概。

>>> 主進(jìn)程 定義好監(jiān)聽事件 
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,  
        }

》》》配置完成 任意進(jìn)程調(diào)用ipc.send('newPage')   完美解決

頁面之間的數(shù)據(jù)共享問題

electron項目可以通過本地數(shù)據(jù)庫去做一個數(shù)據(jù)存儲，這樣你就可以在任何需要的地方調(diào)用這份數(shù)據(jù)训貌。我的做法：

1.首先選擇一個 本地數(shù)據(jù)庫插件 冒窍，我用的 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
}

>>>>  引入數(shù)據(jù)庫
/**
 *  本地數(shù)據(jù)庫導(dǎo)入
 *  web模式注釋該代碼
 */
import db from '../db'
Vue.prototype.$db = db.db

>>>> 任意頁面調(diào)用數(shù)據(jù)庫
  this.$db.chartData.loadDatabase();
  this.$db.chartData.find({},  (err, docs)=> {
//                            console.log(docs);
                            if(docs && docs.length > 0){
                                this.totalOptionList = docs;
                            }
                        });

根據(jù)自己的習(xí)慣選擇數(shù)據(jù)庫，我自己對mongodb數(shù)據(jù)庫比較熟悉区拳，所以采用了nedb意乓。語法糖類似约素，基本直接拿來就能用，不需要再次學(xué)習(xí)笆凌。

后記

最后說一些可以幫助你更好學(xué)習(xí)electron的基礎(chǔ)知識：

webpack： 最強構(gòu)建工具，沒有之一送悔，了解webpack爪模，你才能更好編寫項目配置。

node： electron是搭載谷歌v8內(nèi)核的高性能的node環(huán)境 屋灌，所有node能用的東西，我們都能用祠丝。是不是很酸爽除嘹？

奉上一個demo項目，簡單的相冊程序尉咕。還有一個項目涉及公司，代碼就不好上了蟆肆，只能分享經(jīng)驗晦款。

傳送門: 相冊Github

如果覺得本文對你有所幫助炎功，就star一下吧～大傳送之術(shù)缓溅！ 我的博客Github