前端学习之路Electron——安装

最新推荐文章于 2024-08-25 10:52:52 发布

HarryHY

最新推荐文章于 2024-08-25 10:52:52 发布

阅读量253

点赞数

分类专栏： # Electron

本文链接：https://blog.csdn.net/HarryHY/article/details/105325482

版权

Electron 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

使用Electron开发的案例：

vscode、atom、slack、wordpress 等等

Electron生态

Electron技术可以降低开发PC端的成本和难度。
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。通过Node它提供了通常浏览器所不能提供的能力。

安装

首先你要安装node.js

npm install -g electron

查看版本

electron -V

npx electron -V

下面我们创建一个electron看下是否有差错
先建立一个文件夹

目录如下

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello word</title>
</head>
<body>
    <div>
        天青色等烟雨，而我在等你
    </div>
</body>
</html>

main.js部分：

var electron = require('electron')  //引入electron模块

var app = electron.app   // 创建electron引用

var BrowserWindow = electron.BrowserWindow;  //创建窗口引用

var mainWindow = null ;  //声明要打开的主窗口
app.on('ready',()=>{
    mainWindow = new BrowserWindow({width:400,height:400})   //设置打开的窗口大小

    mainWindow.loadFile('index.html')  //加载那个页面

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})

package.json部分：

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}