Electron一个示例程序

一个简单的Electron项目包含三个文件
Electron一个示例程序_第1张图片

我们在文件夹E:\greeting1 中新建 index.html、main.js、package.json三个文件。

标题

在package.json中写入

{
  "name": "greeting",
  "version": "0.1.0",
  "main": "main.js"
}

这个文件中不能有注释

在main.js中写入

const {app, BrowserWindow} = require('electron')
//声明我们的greeting窗体变量
let greetingWin;

//当app完成初始化时,执行窗体的创建。
app.on('ready', createGreetingWindow)

function createGreetingWindow(){
    //构建一个高600,宽800的窗体,可以认为,一个窗体是一个浏览器的tab选项卡。
    greetingWin = new BrowserWindow({width: 800, height: 600})
    //窗体中显示的内容是index.html文件中的内容,将按照google浏览器的渲染方式,渲染显示。
    //__dirname,表示main.js所在的目录路径
    greetingWin.loadURL(__dirname + "/index.html")
    //监听窗体关闭事件,当窗体已经关闭时,将win赋值为null,垃圾回收。
    greetingWin.on('closed', () => {
       win = null
    }) 
} 

在index.html中是要显示的内容,写入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1> 
    <p id="demo">这是一个段落</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <script >
    	function myFunction()
    	{
    		document.getElementById("demo").innerHTML="hello electron!"
    	}
    </script>
  </body>
</html>

保存文件。

然后按win+R键,运行cmd
Electron一个示例程序_第2张图片
项目文件夹在E:\Electron\greeting1,我们进入到E:\Electron,运行electron greeting1
在这里插入图片描述
弹出窗口
Electron一个示例程序_第3张图片
就构建了一个Electron程序。

参考https://blog.csdn.net/g6666123/article/details/78885813#comments

你可能感兴趣的:(Electron一个示例程序)