我正在开发一个简单的电子应用程序,可以显示我的谷歌议程-为此,我使用了谷歌的node.js快速入门指南,并试图用电子/HTML制作一个GUI。现在我得到了我的数据。我可以在我的控制台中使用这个函数编写它:
async function listEvents(auth, win) {
const calendar = google.calendar({version: 'v3', auth});
const res = await calendar.events.list({
calendarId: 'primary',
timeMin: new Date().toISOString(),
maxResults: 10,
singleEvents: true,
orderBy: 'startTime',
});
const events = res.data.items;
if (!events || events.length === 0) {
console.log('No upcoming events found.');
return;
}
console.log('Upcoming 10 events:');
events.map((event, i) => {
const start = event.start.dateTime || event.start.date;
console.log(`${start} - ${event.summary}`);
});
}
然后我将它存储在一个数组中(我认为)使用这个:
win.webContents.send('events', events);
在我的main.js中,我得到了这个:
const { app, BrowserWindow } = require('electron')
const path = require('path')
const { listEvents } = require('./index.js')
const { authorize } = require('./index.js')
let win
async function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1920,
height: 1080,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
// and load the index.html of the app.
win.loadFile('index.html')
// Call the listEvents function from index.js
const auth = await authorize();
const events = await listEvents(auth, win);
// Send the events to the renderer process
win.webContents.send('events', events);
}
app.whenReady().then(createWindow)
然后我试着像这样显示它:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GUI</title>
</head>
<body>
<h1>Google Calendar API GUI</h1>
<ul id="events"></ul>
<script>
const { ipcRenderer } = require('electron')
// Listen for the 'events' message from the main process
ipcRenderer.on('events', (event, events) => {
const eventsList = document.getElementById('events');
eventsList.innerHTML = '';
for (const event of events) {
const start = event.start.dateTime || event.start.date;
const li = document.createElement('li');
li.textContent = `${start} - ${event.summary}`;
eventsList.appendChild(li);
}
})
</script>
</body>
</html>
那现在我该怎么办?我错过了一些东西,我尝试了几件事:重命名我的窗口,编辑变量名,因为我想我可能用了一些我在其他地方用过的。
1条答案
按热度按时间fdx2calv1#
您只需要从
listEvents
函数返回events
并且不需要更改代码的其余部分。
在
createWindow
中,您将获得events
并将其发送到渲染器。并将它们显示在GUI中