Electron一个示例程序

最新推荐文章于 2023-07-17 10:56:04 发布

lilv66

最新推荐文章于 2023-07-17 10:56:04 发布

阅读量650

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46676149/article/details/105810149

版权

一个简单的Electron项目包含三个文件
在这里插入图片描述

我们在文件夹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
在这里插入图片描述
项目文件夹在E:\Electron\greeting1，我们进入到E:\Electron，运行electron greeting1

弹出窗口

就构建了一个Electron程序。

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

lilv66

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron一个示例程序

一个简单的Electron项目包含三个文件我们在文件夹E:\greeting1 中新建 index.html、main.js、package.json三个文件。标题在package.json中写入{ "name": "greeting", "version": "0.1.0", "main": "main.js"}这个文件中不能有注释在main.js中写入const...
复制链接

扫一扫