electron 我如何使用电子在列表中列出我的谷歌事件

fzwojiic  于 2023-05-04  发布在  Electron
关注(0)|答案(1)|浏览(203)

我正在开发一个简单的电子应用程序,可以显示我的谷歌议程-为此,我使用了谷歌的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>

那现在我该怎么办?我错过了一些东西,我尝试了几件事:重命名我的窗口,编辑变量名,因为我想我可能用了一些我在其他地方用过的。

fdx2calv

fdx2calv1#

您只需要从listEvents函数返回events

async function listEvents(auth, win) {
  ...
  const events = res.data.items;
  ...
  return events;
}

并且不需要更改代码的其余部分。
createWindow中,您将获得events并将其发送到渲染器。

const events = await listEvents(auth, win);
  win.webContents.send('events', events);

并将它们显示在GUI中

ipcRenderer.on('events', (e, events) => {
    ...
    for (const event of events) {
      ...
      const li = document.createElement('li');
      li.textContent = `${start} - ${event.summary}`;
      eventsList.appendChild(li);
    }

相关问题