Electron 学习入门

2020-01-08 本文已影响0人男卅_卅

一、是什么？能做什么？

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的一个简单的介绍。