用Electron创建跨平台应用连载目录:
- 用Electron创建跨平台应用(第一弹)
- 用Electron创建跨平台应用(第二弹)开启多窗口
- 用Electron创建跨平台应用(第三弹)开启系统通知
Electron是GitHub开发的一个开源框架，它使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的跨平台开发，目前，Electron已经创建了包括VScode和Atom在内的大量应用。
- 如果你有
html，css，js,Nodejs的基础， 掌握Electron将是一件非常容易的事- 如果你是一个前端工程师, 掌握了Electron，你无需学习C，Java, 或Python, 就可以创建跨平台的桌面级应用
安装electron
npm install -g electron
用electron-forge创建一个项目
electron-forge是一个脚手架程序(和create-react-app类似), 它可以帮我们快速构建一个electron应用, 应用创建成功后, 我们直接编辑
src/index.html即可快速上手electron桌面程序, 下面是创建的具体步骤和几个简单实用的小demo
全局安装electron-forge
npm install -g electron-forge
用electron-forge快速创建项目zhaoolee-electron-app
electron-forge init zhaoolee-electron-app
开启项目
cd zhaoolee-electron-app
npm start
Demo1: 更改index.html内容, 用html css进行布局
- index.html源码
工程师的五个级别
工程师的五个级别
-
第一级:开创一个产业
- 第二级: 能设计和实现别人不能做出的产品
- 第三级: 能独立设计和实现产品并且能在市场上获得成功
- 第四级: 能领导和带领其他人一同完成更有影响力的工作
- 第五级: 能独立解决问题, 完成工程工作
如果出现中文乱码, command+shift+R 刷新缓存即可解决
Demo2: 读取本地文件
浏览器中的js是无法读取本地文件的, 但electron有了node的的加持, 可以随意读取本地的文件, 这里以读取
index.html同级目录下的main.js为例
- index.html 源码
读取本地文件
Demo3: 拖拽读取本地文件
- index.html 源码
拖拽读取文件
将文件拖拽到此处打开
小结:
- 有了nodejs, 前端程序员, 获得了开发网站后台的能力!
- 有了 React-Native, 前端程序员有了开发跨平台app的能力!
- 有了Electron, 我们可以自由的读取本地的文件, 随意调用npm下的大量工具包, 当然也可以把在线h5小游戏快速移植为桌面游戏, 前端程序员,可以使用已掌握的前端技术, 分一块桌面软件的蛋糕, 真香!
- 下一篇我们将尝试多窗口的实现: https://www.jianshu.com/p/438e852fa08f