编写带事件的程序

🚀🚀首发:碰磕，分享自己的学习日志

🌧🌧💧小雨

✊✊开心过好每一天

📅2022/6/5

前言

经过上一篇文章,相信你已经充分了解了Electron了,现在将web开发与它相结合开发一个带事件的程序

开始编写

实现:通过点击按钮将内容显示在指定标签中

初始化项目

推荐编写完主js文件再进行初始化

npm init --yes

首页

<!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>第一次</title>
</head>
<body>
    <h1>第一次</h1>
    <button id="gril">点我获取内容</button>
    <h3 style="color: red;" id="context"></h3>
</body>
<script src="./render/index.js"></script>
</html>

主进程

main.js

ar electron =require('electron')//导入

var app=electron.app;//引用app
var BrowserWindow=electron.BrowserWindow;//引用窗口
var mainWindow=null //声明要打开的窗口

app.on('ready',()=>{
    mainWindow=new BrowserWindow({width:300,height:300,
    webperferences:{
     nodeIntegeation:true,//允许使用nodejs的模块
	}
})//初始化主窗口
    mainWindow.loadFile('./helloworld.html')//加载网页在窗口上
    mainWindow.on('closed',()=>{ //监听关闭事件
        mainWindow=null
    })
})

与普通的不同的是只需要改变一下webperferences

渲染进程

index.js

里面编写事件即可,不要忘了首页要引入

/**
 * 渲染
 */
window.onload=function(){
    let btn=this.document.querySelector("#gril");
    let context=this.document.querySelector("#context");
    btn.onclick=function(){
        context.innerHTML="测试触发点击事件"
    }
}

该功能是通过点击按钮实现修改某个标签的内容

这样就实现了带事件的Electron程序了~😁😁😁

Electron桌面端开发(编写带事件的程序)

编写带事件的程序

前言

开始编写

初始化项目

首页

主进程

渲染进程