Electron入门示例程序转

2021年1月19日 0条评论 406次阅读 0人点赞慕容

转自：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程序。

更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在天边资源网。

慕容的工作随笔

Electron入门示例程序转

发表回复