导言
近来对electron有点感兴趣,奈何干啃官方文档实在难受,还是直接从demo入手会比较好。受到一两个教程的启发,然后自己瞎捣鼓一下。
说明
利用Electron.js构建一个有以下功能的桌面端应用:
实现简单的获取文本框输入的内容并保存为文件
能够通过拖拽文件来读取其中的信息
应用界面
因为只是demo ,为了方面,就只是加基础样式了,将就着看。
应用界面.png
输入文字.png
结果.png
拖拽文件.png
读取并查看内容.png
快速开始:
准备工作
以官方Electron的electron-quick-start作为脚手架,
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
这里试过坑。
在自己的电脑上这npm install安装依赖死活不成功,后来发现是Node.js还是Npm的版本有点老,就重装过。因为国外的镜像太慢,我换成cnpm之后。
你以为可以了,我也以为的时候,然后又出现了一个坑!
如果你的项目所在的硬盘格式是FAT32的话!就会又特么的报错,无法安装依赖。所以把项目转移到NTFS格式的盘上吧。
好了,现在项目核心文件如下:
electron-quick-start/
├── package.json
├── renderer.js
├── main.js
└── index.html
//至于其他的文件如README.md , LICENSE.md , .gitignore 等等就不用管了,那不是重点
下面开始进行主要工作
目前这个demo只需修改下面两个文件:
Index.html :