/electron-bdcloud

:heart_eyes::two_hearts::airplane:BaiDu cloud with React16.x and Electron练手项目

Primary LanguageJavaScript

仿百度云盘客户端

基于Electron,Webpack3,Babel7,React16,MobX shortscreen

electron的官方脚手架只是一个demo，并没有完全的基于业务实现。所以，想通过此项目来系统的接触。其实不太需要真实的API,所以并不不会考虑文件的传输问题（当然要对接一些云也是可以的）。 关于UI的细节也没有花太多精力，那些都是体力活，模仿的百度云仅用于学习。主要是强调生产的过程，比如项目的工程化，托盘处理，自动更新、跨平台打包、网络检测，发布到平台等等这样原生功能。

Dev

  1. fork仓库，安装依赖包
    yarn install
  1. 启动
    yarn start
  1. 打包调试
   yarn package:win
  1. 编译安装包
   yarn release

TODOS

  • 拖拽窗口
  • 网络检测
  • 自动更新
  • 系统通知

注意事项

  1. electron不同于普通的web程序，涉及到进程通信，所以在webpack编译的时候要配置 target: 'electron-renderer'
  2. 比较常见的就是es6classthis的绑定问题，一般有三种方式解决：
    • 在constructor手动bind，或者用auto-bind这个报来自动绑定
    • 在调用的地方bind，<button onClick={this.handleClick.bind(this)}>click me</button>
    • 不定义方法类成员方法，定义成类的属性handleClick = () => {....}
  3. babel7修饰符插件的问题。修饰符插件和类属性插件顺序很重要,@babel/plugin-proposal-class-properties插件必须开启loose模式,否则就会出现mobx不会刷新组件
  4. Not allowed load local resource错误。
    • 检查文件是否存在，或者路劲是否正确
    • 可以在BrowserWindow()中关闭安全策略
    {
    webPreferences: {
        webSecurity: false
    }
}
    • 因为运行的环境是nodejs，所以在Webpack配置中要保证__dirname行为输出的是常规的文件目录
        node: {
        __dirname: false
    }
  5. 打包体积问题。electron打包的东西出来通常体积比较大，那是因为包含了一个chromuin浏览器和node在里面。但是我们开发的环境中node_modules的体积也是很庞大的。所以我们可以main.js也进行打包，这样就可以不出现冗余的node_modules包。注意的是，在编译main的时候webpack的target要配置为electron-main
  6. 字体乱码的问题。这个问题比较2，就是缺少了<meta charset="UTF-8">的声明
  7. electron-packager适合打包调试，推荐electron-builder
  8. 要自动更新必须要打nupkg类型的包，linux平台并不支持自动更新
  9. 一般情况下在render进程中通过remote接口去拿main进程的模块，可以不用显示的发事件

体会

  1. MobX vs Redux
  2. Electron