一、是什么？能做什么？
- Electron 是Github开发的一个框架，它依赖于Node.js.Node.js（V8）允许使用JavaScript语言开发服务端程序和终端程序(命令行程序)，Node.js + JavaScript = PHP。
- Node.js ：服务端程序（Web、聊天服务器等）和命令行程序
- Electron ：桌面应用（跨平台）
二、开发Electron桌面应用需要什么技术？
- 开发Electron桌面应用和开发web应用使用相同的技术，如Web三剑客：HTML、CSS和JavaScript。
三、Why Electron
- 由于Electron是基于Node.js的，也就是说，Electron可以调用大量的Node.js API。
- 桌面应用可以访问本地资源，各种硬件以及OS本身的资源，Docker、touchbar
四、配置环境
- 安装Node.js 官网
安装成功后敲开命令行 输入node --version 会显示以下图所示：
image.png
- 全局安装Electron(要联网)
使用npm安装，命令如下：
npm install electron -g
其中参数g就是全局安装
安装完成后检查是否安装成功：electron -v
出现版本号就是安装成功了！
此外：升级electron：npm update electron -g
卸载electron：npm uninstall electron
五、开发第一个Electron桌面应用
- 准备
1.1开发electron桌面应用至少需要3个文件
- package.json 用于配置Electron工程的 (名字是不可变的)
- index.js 相当于Electron桌面应用的入口点
- index.html 用于主窗口UI的页面文件
- 代码编写
2.1 package.json
{
"name":"DemoDay2020-01-08--1", //项目名
"version":"1.0.0", //项目版本
"main":"index.js" //项目入口文件
}
2.2 index.js
const {app,BrowserWindow} = require('electron'); //引入electron
function createWindow(){ //随意创建一个方法，方法名随意
win = new BrowserWindow({width:800,height:600}); //设置显示窗口大小
win.loadFile('index.html'); //执行的加载页面
}
app.on('ready',createWindow); //执行node中的ready函数中执行之前创建的方法
2.3 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DemoDay2020-01-08--1</title>
</head>
<body>
<h1>这是第一个桌面程序</h1>
</body>
</html>
HTML页面随意编写，运行有显示就好
- 编辑完这三个文件之后，就可以打开命令行输入
electron 加上三个文件所在目录
如果就在当前工程目录可以直接输入以下命令：
electron .
之后你就可以看到运行后的效果了
image.png
以上就是一个Electron的一个简单的介绍。
网友评论