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 源码
- <!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 小游戏快速移植为桌面游戏, 前端程序员, 可以使用已掌握的前端技术, 分一块桌面软件的蛋糕, 真香!
来源: http://www.jianshu.com/p/3b295544c78e