用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-appnpm startDemo1: 更改index.html内容, 用html css进行布局
- index.html源码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>工程师的五个级别</title></head><body> <style> .title { font-weight: bold; font-size: 36px; } ol li { list-style: none; color: #413F43; font-size: 26px; line-height: 40px; position: relative; } ol li:hover { background-color: #FCF6E5; } ol li:hover:after { font-size: 20px; border: 1px solid #AB3319; border-radius: 5px; content: attr(data); position: absolute; right: 0; opacity: 1; transition: all 0.2s ease-out; } </style> <div class="title">工程师的五个级别</div> <ol> <li data="爱迪生、福特、贝尔、香农、理查德.斯托曼"> 第一级:开创一个产业 </li> <li data="迪恩，丹尼斯.里奇，肯·汤普逊">第二级: 能设计和实现别人不能做出的产品</li> <li data="张小龙，阮一峰">第三级: 能独立设计和实现产品并且能在市场上获得成功</li> <li data="项目主管">第四级: 能领导和带领其他人一同完成更有影响力的工作</li> <li data="两年开发经验的工程师">第五级: 能独立解决问题, 完成工程工作</li> </ol></body></html>如果出现中文乱码, command+shift+R 刷新缓存即可解决
Demo2: 读取本地文件
浏览器中的js是无法读取本地文件的, 但electron有了node的的加持, 可以随意读取本地的文件, 这里以读取
index.html同级目录下的main.js为例
- index.html 源码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>读取本地文件</title></head><body> <button id="btn">展示index.js内容</button> <div id="package-json-area"> </div></body><script>const fs = require("fs");const path = require("path");let btn = document.getElementById("btn");console.log(btn);btn.addEventListener('click', function(e) { fs.readFile(path.join(__dirname, "index.js"), "utf-8", function(err, data) { if (err) { console.log(err); } else { console.log(data); document.getElementById("package-json-area").innerHTML = data; } })})</script></html>Demo3: 拖拽读取本地文件
- index.html 源码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖拽读取文件</title></head><style>body { margin: 0; padding: 0;}#text-area { height: 300px; background-color: #FCF6E5; position: relative; font-size: 20px; overflow: auto; font-weight: bold;}#text-area #info { border-radius: 20px; height: 100px; font-size: 40px; color: #A84631; text-align: center; line-height: 100px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0;}</style><body> <div id="text-area"> <div id="info">将文件拖拽到此处打开</div> </div></body><script>/*释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 */const fs = require("fs");const path = require("path");let textArea = document.getElementById("text-area")textArea.ondragenter = textArea.ondragover = textArea.ondragleave = function(e) { e.preventDefault();}textArea.ondrop = function(e) { e.preventDefault(); let filePath = e.dataTransfer.files[0].path; console.log(filePath); fs.readFile(filePath, "utf-8", function(err, data){ textArea.innerHTML = data; })}</script></html>小结:
- 有了nodejs, 前端程序员, 获得了开发网站后台的能力!
- 有了 React-Native, 前端程序员有了开发跨平台app的能力!
- 有了Electron, 我们可以自由的读取本地的文件, 随意调用npm下的大量工具包, 当然也可以把在线h5小游戏快速移植为桌面游戏, 前端程序员,可以使用已掌握的前端技术, 分一块桌面软件的蛋糕, 真香!
- 下一篇我们将尝试多窗口的实现: https://www.jianshu.com/p/438e852fa08f
文章链接：https://www.sbkko.com/ganhuo-199.html
文章标题：用Electron创建跨平台应用(第一弹)
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：用Electron创建跨平台应用(第一弹)
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
