簡要介紹
- Electron是一個可以使用js、html、css創建桌面應用的庫
- 可以創建mac、window、linux等應用
- atom基於electron開發，以前叫atom-shell
如何開發你的desktop應用
- 一個簡單的 demo
demo
- 一個入口main.js（mainProcess）+ 一個index.html（renderProcess）
- 執行 electron main.js
企業雲盤的整體結構
├── build(app打包資源)
├── readme.md
├── release(發佈路徑)
├── renderProcess（渲染進程）
├── mainProcess（主進程）
├── plugin(插件)
├── certs(證書)
├── build.sh(自動發版腳本)
├── config.js(全局配置項)
├── package.json
└── windowinstall.js（window安裝包生成腳本）
- 整體的結構就是按照兩個進程來劃分
- renderProcess中可以使用任何你想用的架構，企業雲盤採用的是react+redux+router結構
- 企業雲盤開發環境中採用localhost:3000的實時編譯調試模式，發包時採用file協議
mainProces:
數據庫採用nodejs庫 nedb(mainProcess/database)
數據文件存儲在應用數據下的.clouddiskdata，剛開始採用的是mongodb,後來打包發現太大，多40多M，還卡
let Datastore = require('nedb');
let db = new Datastore({ filename: 'path/to/datafile' });
db.loadDatabase(function (err) { // Callback is optional
// Now commands will be executed
});
注意nedb為了保證數據的持久性，每一次update或者delete操作實際上都是在最後一行添加一條數據，但是每次load database的時候，會自動合併所有的數據項，所以雲盤裡面可以看到每次update都調用了
db.loadDatabase();
官方解釋如下：
Under the hood, NeDB’s persistence uses an append-only format, meaning that all updates and deletes actually result in lines added at the end of the datafile, for performance reasons. The database is automatically compacted (i.e. put back in the one-line-per-document format) every time you load each database within your application.
官網
登錄認證 (mainProcess/uuap)
瀏覽器向server發起請求,server端進行登錄，並且在head中set-cookie
mainProcess通過該有效cookie發起後續所有請求
renderProcess中的請求通過ipc通信方式使用nodejs的request模塊來進行通信
瀏覽器中直接調起客戶端，urlScheme(mainProcess/urlProtocol)
打包過程中也需要配置下，否則mac中不生效
窗口管理器（mainProcess/windowManage）
1.企業雲盤總共有三個window（主頁、設置頁、預覽頁、反饋頁、二次確認頁）
traymenu控制（mainProcess/trayMenu）
參考官方api寫即可，大致代碼如下：
const contextMenu = Menu.buildFromTemplate([
{
label: '訪問網頁版',
click: () => {
shell.openExternal('http://ecloud.baidu.com')
}
}, {
label: '反饋',
click: (e) => {
renderFeedBack(1);
}
}, {
label: '設置',
click: (e) => {
renderSettingWindow(1);
}
}, {
label: '退出',
click: () => {
app.quit();
}
}
])
傳輸控制（mainProcess/transfile 、 mainProcess/watcher）
本地文件增刪改查檢測（使用nodejs庫chokidar，目前mac已遷移到Object-c的app中）
關於electron中與oc app的通信方式。目前採用的是shell裡面的open命令，以及web server方式
mainProcess中創建webserver服務，oc中通過發起http請求進行通信
mainProcess和oc通信採用open方式
雲盤接受oc的web服務
let server = http.createServer(function (request, response) {
//.....
/*前端需要備份的文件*/
if (urlObj.pathname === '/set/file') {
response.end('end');
}
/*獲取我的備份下需要備份的根目錄或者文件*/
if (urlObj.pathname === '/get/rootpath') {
}
}).listen(8887);
//.......
md5計算，採用md5-file
let execSync = require('child_process').execSync;
execSync('open ecloud-sync-backup-file.app', {
cwd: `${config.projectPath}/mainProcess/watcher/OC/ecloud-sync-backup-file`
})
分片：
fs.createReadStream(filePath, {
start : i * limit,
end : (i * limit + limit - 1) > lastByte? lastByte: i * limit + limit - 1
}
系統通知：
mac採用 notification
window採用nodejs的node-notifier模塊
自動更新客戶端（mainProcess/checkUpdate）
官方文檔
官方提供了幾個自動更新的項目，nuts/electron-release-server/squirrel-updates-server/squirrel-release-server,這幾個項目中其中2個都是採用github來進行發佈，不符合我國國情
企業雲採用了electron-release-server這個項目來搭建自動升級服務
- 基於docker-compose
- 中間遇到的坑，這個項目基於docker-composer 的version2 版本，最低要求docker的版本為1.9.1以上，具體可參考 https://docs.docker.com/compose/compose-file/compose-file-v2/#args
- 最後採用了ubuntu的服務器，centos版本都太低
- 開源項目裡面需要簡單的配置下數據庫、服務器、修改資源存儲的路徑為永久存儲
- 公司的服務器的端口必須是8000以上，剛開始設置了個5555 怎麼都不好使，能ping通，但是瀏覽器沒法訪問
- 包含了資源存儲
- 強大的api支持
- 使用Squirrel來模塊來完成自動升級
- mac使用.dmg和.zip
- window 使用.exe .nupkg
關於自動更新中必須要注意的幾個點：
- 必須要有證書
- mac通過開發者賬號生成,公司蘋果開發者團隊，可以通過權限申請加入，地址：http://appdev.baidu.com/
- window證書
ecloud.pfx,帶秘鑰的證書，具體可以參考 如何生成pfx的證書
- 具體方案可以參考 Auto-updating apps for Windows and OSX using Electron: The complete guide
- 自動更新提示如下
- 遇到坑
mac中autoUpdater.quitAndInstall(); 沒有自動重啟應用
可以通過
/Users/liuhui/Library/Caches/com.electron.ecloud.ShipIt下的
ShipIt_stderr.log來查看問題所在
window中採用squirrel安裝方式後很多問題，安裝過程中應用就被打開，需要處理下squirrel事件,可以參考 https://github.com/electron/windows-installer
flash的支持
需要添加pepper flash插件，Pepper Flash Player 是由Google維護的專用於chromium引擎的flash播放器
首先是在自己電腦上找到pepper flash的插件（mac及window版本）
結果如下：
• 如果你有安裝Chrome瀏覽器，可以在地址欄輸入chrome://plugins/，點擊右側的詳細信息，找到Adobe Flash Player條目,目前chrome已經廢棄掉chrome://plugins/地址
• 實際mac地址：/Library/Internet Plug-Ins/PepperFlashPlayer/PepperFlashPlayer.plugin
window地址：C:\\Windows\\System32\\Macromed\\Flash\\pepflashplayer64_24_0_0_194.dll(名稱和版本號可能有出入) 重命名為pepflashplayer.dll即可。
中間遇到的坑：
- window上不好使，提示“無法加載插件”，確定為pepflashplayer64_24_0_0_194.dll的問題，去網上下載了一個
- chrome 53裡面的flash有個閃爍的bug，瀏覽器bug，需要升級chrome版本
pepper flash引入
let pluginName;
switch (process.platform) {
case 'win32':
pluginName = 'pepflashplayer.dll'
break
case 'darwin':
pluginName = 'PepperFlashPlayer.plugin'
break
case 'linux':
pluginName = 'libpepflashplayer.so'
break
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname+'/plugins/', pluginName))
網絡檢測(mainProcess/network)
網絡監測剛開始採用的 https://developer.mozilla.org/en-US/docs/Online_and_offline_events
監測很準確，這種檢測僅僅針對lan是否有連接，實際情況是很多時候網絡是連著的，但是不能上網
後面換成nodejs的方案
renderProcess
├── bin
│ ├── compile.js
│ └── server.js
├── build
│ ├── dll
│ ├── package.json
│ ├── webpack-compiler.js
│ ├── webpack.config.js
│ └── webpack.dll.config.js
├── config
│ └── index.js
├── package.json
├── server
│ └── main.js
└── src
├── components 組件
├── containers 容器
├── index.html 入口html
├── ipcCenter.js 消息中心
├── layouts 佈局
├── main.js 入口js
├── routes 路由
├── static 靜態js
├── statichtml 其他入口html
├── store 通用的store
└── styles 樣式
兩個進程
官方網站
- electron合併了chromium和node.js
- 提供了一系列的api進行native開發，例如file dialogs,notifications,icons更多
中間的坑：
- 可以看到官方網站提供了mainProcess和renderProcess區分了接口，但是這兩個api並不是完全獨立的，renderProces提供的remote模塊可以獲取到mainProcess到所有的api，詳細見接口 接口文檔
- 企業雲盤在mainProcess裡面定義了整個app通用的全局變量：
- 雖然renderProcess中可以訪問到mainProcess裡面的全局變量，但是renderProcess裡面修改並不會影響到mainPorcess裡面的變量
打包方式
打包方式，企業雲盤用過2種
- electron-package
"build": "electron-packager ./ clouddisk --platform=darwin,win32 --arch=x64 --prune --overwrite --version=1.4.13 --ignore renderProcess/node_modules --icon ./icon",
"buildwin": "electron-packager ./ clouddisk --platform=win32 --arch=x64 --prune --overwrite --version=1.4.13 --ignore renderProcess/node_modules --icon ./icon",
"buildmac": "electron-packager ./ clouddisk --platform=darwin --arch=x64 --prune --overwrite --version=1.4.3 --ignore renderProcess/node_modules --icon ./icon",
- electron-builder
"build": {
"appId": "com.electron.ecloud",
"productName": "ecloud",
"mac": {
"extendInfo": "build/info.plist"
},
// ...
這兩種打包方式的區別：
electron-package 僅能打出應用程序，無法打出安裝包，配置項沒有electron-builder那麼靈活
electron-builder 支持非常強大的配置，可以參考 官網
需要注意的是自動更新需要打出nupkg的包，electron-builder也是支持的
"win": {
"target": "squirrel",
"certificateFile": "./certs/ecloud.pfx",
"certificatePassword": "***"
},
"squirrelWindows": {
"iconUrl": "https://ecloud.baidu.com/static/common/img/auto_logo.ico"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
自動更新依賴於squirrel模塊，這個模塊決定了window的打包方式必須是squirrel的安裝包，從而決定了不一樣的window安裝包（nsis或者squirrel）
squirrel安裝包依賴於net 4.5
調試技巧
- 抓包
企業雲盤裡面所有的請求都基於node的request模塊，所以給request設置下代理即可，如下
// 只能代理到http
require('./mainProcess/request').defaults({ proxy: 'http://127.0.0.1:8888' })
// https如下
let useProxy=1;
if(useProxy){
process.env.https_proxy = "http://127.0.0.1:8888";
process.env.http_proxy = "http://127.0.0.1:8888";
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
}
調試renderProcess 打開browser window的控制檯
/localhost/.test(appUrl) && win.webContents.openDevTools();
- 調試mainProcess
console.log直接會在terminal中打出，另外全局有寫一個小工具debugInRender,這個工具會將mainProcess的調試信息打印在renderProcess的控制檯中
- 調試用戶的電腦
企業雲盤-顯示包內容-contents-resources-app裡面，修改代碼重啟可生效，
當然雲盤在打包的時候可以壓縮所有代碼為asar格式的，只需要在package的配置中添加
"asar": true
- mac中crash情況debugger
https://electron.atom.io/docs/development/debugging-instructions-macos/
- 官方給出的調試方案
https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md
electron 文章
https://nulab-inc.com/blog/typetalk/3-necessary-things-to-correctly-release-a-product-based-on-the-electron-app/
electron和nw區別
https://github.com/electron/electron/blob/master/docs/development/atom-shell-vs-node-webkit.md
希望本文能幫助到您！
點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）
關注 ｛我｝，享受文章首發體驗！
每週重點攻克一個前端技術難點。更多精彩前端內容私信 我 回覆“教程”
原文鏈接：http://eux.baidu.com/blog/fe/electron%E5%9C%A8%E4%BC%81%E4%B8%9A%E4%BA%91%E7%9B%98%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8
閱讀更多 前端小行家 的文章
