Electron基础学习

2022-09-01 1,436 阅读1分钟

第一节

运行一个HellowWorld

npm install -g electron:全局安装Electron
在某一个磁盘下创建一个demo拽进vsCode中
新建一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HellowWorld</title>
</head>
<body>
   HellowWorld
</body>
</html>

新建一个main.js

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

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

var min = null  //声明要打开的主窗口

app.on('ready',()=>{
    min = new BrowserWindow({width:300,heigth:300})  //设置打开的窗口大小
    min.loadFile('index.html') //加载那个页面
    //监听关闭事件，把主窗口设置为null
    min.on('closed',()=>{
        var min = null  
    })
})

npm init --yes：终端输入命令生成package.json文件。

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

electron .：终端输入命令运行测试打开窗口。

编写邀请小姐姐程序