Electron的使用(1)

Electron文档

文档地址

使用Electron脚手架

  1. 下载Node.js

    参考连接

  2. 克隆示例项目仓库

    git clone https://github.com/electron/electron-quick-start
    
  3. 进入仓库

    cd electron-quick-start
    
  4. 换源,提高速度

    npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
    
  5. 安装依赖

    npm install
    
  6. 运行

    npm start
    

渲染进程和主进程

  • Electron分为渲染进程和主进程

  • 渲染进程:用户看见的web界面就是由渲染进程描绘出来的。包括html,css和js

    1. 渲染进程获取process对象时出错

      process对象出错

      Main.js在createwindow时少了一个参数nodeIntegration:true

      **require('electron')**出错也如上述所示

    2. 渲染进程获取文件信息

      1. 设置一个dom对象

      2. 获取dom对象

      3. 为dom对象添加事件——“drop”并设置回调,传回事件参数

      4. 阻止drop事件默认行为——preventDefault

      5. 获取文件对象——e.dataTransfer.files

      6. 为dom对象添加事件——“dragover"并设置回调,传回参数e

      7. 阻止dragover事件默认行为

        渲染进程获取文件路径信息
      8. 显示文件内容

        1. 添加const fs=require("fs")
        2. 读取fs.readFileSync(path)——默认是buffer
        3. 需要toString()
  • 主进程:Electron运行package.json的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个Electron应用总是有且只有一个主进程

  • 主进程的调试:

    electron --inspect=[port]
    例如:electron --inspect=5858 your/app
    打开浏览器输入:chrome://inspect
    
  • 渲染进程调试:与web调试一致

    npm start //运行项目
    View->toggle developer tools
    

一些常用事件

  • APP常用事件
    • ready:当Electron完成初始化时被触发
    • window-all-closed:所有窗口被关闭
    • before-quit:在应用程序开始关闭窗口之前触发
    • will-quit:当所有窗口都已经关闭并且应用程序将退出时发出
    • quit:在应用程序退出时发出
  • webContents常用事件
    • did-finish-load:导航完成时触发,即选项卡的旋转器将停止旋转,并指派onload事件后
    • dom-ready:一个框架中的文本加载完成后触发该事件