简要介绍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('') } }, { 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以上，具体可参考 最后采用了ubuntu的服务器，centos版本都太低开源项目里面需要简单的配置下数据库、服务器、修改资源存储的路径为永久存储公司的服务器的端口必须是8000以上，刚开始设置了个5555 怎么都不好使，能ping通，但是浏览器没法访问包含了资源存储强大的api支持使用Squirrel来模块来完成自动升级mac使用.dmg和.zipwindow 使用.exe .nupkg

关于自动更新中必须要注意的几个点：

必须要有证书mac通过开发者账号生成,公司苹果开发者团队，可以通过权限申请加入，地址：证书

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事件,可以参考

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)

网络监测刚开始采用的

监测很准确，这种检测仅仅针对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": "" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true },

自动更新依赖于squirrel模块，这个模块决定了window的打包方式必须是squirrel的安装包，从而决定了不一样的window安装包（nsis或者squirrel）

squirrel安装包依赖于net 4.5

调试技巧

抓包

企业云盘里面所有的请求都基于node的request模块，所以给request设置下代理即可，如下

// 只能代理到httprequire('./mainProcess/request').defaults({ proxy: '' }) // https如下let useProxy=1;if(useProxy){ process.env.https_proxy = ""; process.env.http_proxy = ""; 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

官方给出的调试方案

electron 文章

electron和nw区别

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：

作者：刘, 卉