编写带事件的程序
🚀🚀首发:CSDN碰磕,分享自己的学习日志
🌧🌧💧小雨
✊✊开心过好每一天
📅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程序了~😁😁😁