Electron文档
使用Electron脚手架
-
下载Node.js
-
克隆示例项目仓库
git clone https://github.com/electron/electron-quick-start
-
进入仓库
cd electron-quick-start
-
换源,提高速度
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
-
安装依赖
npm install
-
运行
npm start
渲染进程和主进程
-
Electron分为渲染进程和主进程
-
渲染进程:用户看见的web界面就是由渲染进程描绘出来的。包括html,css和js
-
渲染进程获取process对象时出错
Main.js在createwindow时少了一个参数nodeIntegration:true
**require('electron')**出错也如上述所示
-
渲染进程获取文件信息
-
设置一个dom对象
-
获取dom对象
-
为dom对象添加事件——“drop”并设置回调,传回事件参数
-
阻止drop事件默认行为——preventDefault
-
获取文件对象——e.dataTransfer.files
-
为dom对象添加事件——“dragover"并设置回调,传回参数e
-
阻止dragover事件默认行为
-
显示文件内容
- 添加const fs=require("fs")
- 读取fs.readFileSync(path)——默认是buffer
- 需要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:一个框架中的文本加载完成后触发该事件