不能点击按钮(电子)

Question

我试着做一个项目，连接PC到PC像截屏。当下面的编码在线我有一个问题时，试图点击按钮。我不能点击按钮来显示id代码。

这是app.js的代码

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const { v4: uuid4} = require('uuid');
const screenshot= require('screenshot-desktop');
var socket = require('socket.io-client')('http://172.20.10.3:5000');
var interval;

const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 500,
height: 150,
webPreferences: {
preload: path.join(__dirname, 'index.js')
}
})
// and load the index.html of the app.
mainWindow.removeMenu();
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0)
createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin')
app.quit()
})
ipcMain.on("start-share", function(event , arg){
var uuid = uuid4();
socket.emit("join-message", uuid);
event.reply("uuid", uuid);
})
ipcMain.on("stop-share", function(event, arg){

})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

这是index.js文件

const ipcRenderer = require ('electron').ipcRenderer;
window.onload = function(){
ipcRenderer.on("uuid", (event, data)=>{
document.getElementById("code").innerHTML = data;
})
}
function startShare(){
ipcRenderer.send("start-share", {} );
document.getElementById("start").style.display = "none";
document.getElementById("stop").style.display = "block";
}
function stopShare(){
ipcRenderer.send("stop-share", {});
document.getElementById("stop").style.display = "none";
document.getElementById("start").style.display = "block";
}

这是运行代码时弹出的窗口。我不能点击开始按钮输入图片描述

我在看这个视频(youtube)这是我在电子电子网站上遵循的文档

如果有人有问题看到的代码，我会尝试编辑和插入更多的代码或可能发送一个zip文件。在开发这个教育项目时，我真的需要一些帮助

我期待一些指导来开发这个项目。如果可以的话，我想在视频中也一样但是我从头到尾都在看视频，但是在视频中间卡住了。真的需要帮助

Answer 1

似乎您没有将startShare和stopShare功能添加到index.html。预加载脚本仅用于主进程和ui进程之间的桥梁。它没有window对象，也不附着在index.html上。

webPreferences: {
preload: path.join(__dirname, 'index.js')
}

你必须创建一个桥并将ipcRenderer.on函数传递给你的ui进程。或者您也可以将nodeIntegration: true添加到webPreferences对象中。你可以读到它的一些缺点。

然后您需要使用<script>标签将index.js文件附加到index.html。