Electron快速入门

electron快速入门

安装使用

  • 淘宝镜像设置
    1
    2
    3
    vi ~/.bash_profile
    export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
    souce ~/.bash_profile
  • 全局安装electron
    1
    npm install -s cpnm electron
  • 建立electron项目配置
mkdir app && cd app
npm init -y
npm install -g electron


### 主要模块
#### ASAR
- ASAR : Atom shell Archive Format
    - 将所有有联系文件打包,提高性能
- Renderer Process : 渲染进程
- Main Process : 主进程
- IPC : Inter-Process Communication 进程间通信

#### electron模块
- shell : 通过url方式访问、操作文件
- screen : 和屏幕有关操作,如截图、屏幕大小、尺寸、鼠标位置等
- clipborad : 剪切板
- CrashReporter : 奔溃报告
- NativeImage : 所有和图像有关,入剪切板图片
- ipcRender : 渲染进程模块,可以监听ipc信道中的事件及信息
- desktopCapturer : 捕获桌面视频、声音
- remote : 主进程的的一些模块,ipc通信的简便方式
- webFrame:  自定义渲染当前网页,如网页缩放
#### 主进程模块
- app:控制应用生命周期
- BrowserWindows: 控制和创建浏览器窗口
- webContents: 渲染以及控制 web 页面,BrowserWindows的一个实例属性
- ipcMain: 发送与接收ipc消息,从主进程到渲染进程的异步通信。
- dialog : 打开和保存文件以及提示框的功能
- Menu: 鼠标右键菜单及应用菜单、通知栏、小图标菜单
- MenuItem: 菜单项
- net : electron 自带的网络库
- protocol: 注册自定义协议并拦截基于现有协议的请求
- session: 会话,cookie、缓存、代理
- Tray:添加通知栏区域的图标
- systemPreferences :当前计算机的偏好设置
- globalShortcut:定义键盘的快捷键
- contentTracing: 手机跟踪数据模块,从Chromium的内容模块收集跟踪数据,以查找性能瓶颈和缓慢的操作。
- powerSaveBlocker : 阻止系统进入低功耗 (休眠) 模式
- powerMonitor: 电源监控
- autoUpdater: 自动更新模块


### electron学习实例
- 1_hello_world
- 2_window
- 3_menu
- 4_主进程与渲染进程_同步通信
- 5_主进程与渲染进程_异步通信
- 6_渲染进程与渲染进程之间的通信
- 7_状态栏图标
- 8_弹出框等
- 9_导出PDF
- 10_electron auto-updater
- 11_download
- 完整代码地址: https://github.com/qianbaidu/electron-learn