欢迎来到体育彩票365官网下载_彩票365下载官方端口_体育彩票365官网下载! 联系我们 网站地图

体育彩票365官网下载_彩票365下载官方端口_体育彩票365官网下载

0379-65557469

实施方案
全国服务热线
0379-65557469

电话: 0379-65557469
0379-63930906
0379-63900388 
0379-63253525   
传真: 0379-65557469
地址:洛阳市洛龙区开元大道219号2幢1-2522、2501、2502、2503、2504、2505室 

实施方案
当前位置: 首页 | 咨询案例 > 实施方案

Electron在企业云盘中的使用

作者:admin 发布时间:2019-10-27 19:54:17 浏览次数:216
打印 收藏 关闭
字体【
视力保护色

扼要介绍

  • 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为了Electron在企业云盘中的使用确保数据的持久性,每一次update或许delete操作实践上都是在最终一行增加一条数据,可是每次load database的时分,会主动兼并一切的数据项,所以云盘里边能Electron在企业云盘中的使用够看到每次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 --ignoElectron在企业云盘中的使用re 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

作者:刘, 卉

版权所有:洛阳市建设工程咨询有限责任公司 联系人:李经理 电话: 地址:洛阳市洛龙区开元大道219号2幢1-2522、2501、2502、2503、2504、2505室
版权所有 体育彩票365官网下载 渝ICP备176869492号-8