使用Web前端技术开发桌面应用---Electron第一个Hello World程序

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

目前已经搭建好了Electron的开发环境，那这篇文章就写一个Electron最简单的Hello World，这也是每个学习开写的第一个程序。当然也有下伙伴说把Electron安装到项目中太麻烦了，可不可以安装到全局变量，那答案是肯定的。

全局安装Electron

npm install -g electron

这个如果安装失败，你可以多安装两遍，你也可以使用cnpm来进行安装。安装后确实可以使用起来方便一点。

新建index.html文件

新建一个文件夹，比如叫ElectronDemo01.

在项目的根目录中新建一个index.html文件，然后编写如下的代码(可以用快速生成的方式来写这段代码)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

新建main.js文件

在根目录下新建一个main.js文件，这个就是Electron的主进程文件。

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文件

写完后直接使用npm init --yes来初始化package.json文件，文件生成后如下：

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

这时候main的值为main.js就正确了。这时候你就可以打开终端，在终端里输入electron .就可以打开窗口了。

在这里插入图片描述

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢
在这里插入图片描述