Electron.js简介-第2部分：Todo应用

Over in the first part of this introduction to Electron.js, we just got Electron setup with our bundling scripts and a local window. With the foundations out of the way, we can get started with the more interesting functionality of our app.

在Electron.js简介的第一部分中，我们仅使用绑定脚本和本地窗口进行了Electron设置。 有了基础，我们就可以开始使用我们应用程序更有趣的功能。

在客户端和服务器之间传递数据 (Passing Data Between Client and Server)

Since we’re not setup with a database yet, the todo functionality is almost the same as any vanilla JavaScript todo app. The only difference being we’ll first use ipcRenderer.send to send an event to our server with our data, which we can listen for with ipcMain.on, then do whatever we need to with the data (like save it to our database), and send it back to the client to be rendered if successful.

由于我们尚未设置数据库，因此todo功能与任何普通JavaScript todo应用程序几乎相同。 唯一的区别是，我们将首先使用ipcRenderer.send将事件与我们的数据，我们可以监听与发送到我们的服务器ipcMain.on ，然后做什么，我们需要的数据(如保存到我们的数据库) ，如果成功，则将其发送回客户端进行渲染。

script.js

script.js

const electron = require('electron')
const { ipcRenderer } = electron

const form = document.querySelector('form')
const item = document.querySelector('input')
const list = document.querySelector('ul')

// Render Items to Screen
const render = item => {
  const li = document.createElement('li')
  li.innerHTML = item
  list.appendChild(li)
}

// Get All Items After Starting 
window.addEventListener('load', () => ipcRenderer.send('loadAll'))
ipcRenderer.on('loaded', (e, items) => items.forEach(item => render(item.item)))

// Send Item to the server and clear the form
form.addEventListener('submit', e => {
  e.preventDefault()
  ipcRenderer.send('addItem', { item: item.value })
  form.reset()
})

Next we just need to start a new database with Datastore and use some mongoose-like methods when we catch our events from the client.

接下来，我们只需要使用Datastore启动一个新数据库，并在从客户端捕获事件时使用一些类似于猫鼬的方法。

Instead of a method on ipcMain, as you may expect, we need to use webcontents.send on the window we want it applied to. Later this will also allow us to send events from our menu without destructuring anything from electron.

如您所料，我们需要在要应用它的窗口上使用webcontents.send来代替ipcMain上的方法。 稍后，这还将使我们能够从菜单发送事件，而不会破坏电子。

NeDB gives us many of the same options as Mongoose does for manipulating and querying our data. I strongly recommend looking at the docs since there are some differences between Nedb and Mongoose.

NeDB为我们提供了许多与Mongoose相同的选项，用于处理和查询我们的数据。 我强烈建议您查看文档，因为Nedb和Mongoose之间存在一些差异。

The main methods that we need just take an object with the properties you want the return item to match, and a callback function for when it’s complete.

我们需要的主要方法只是使用一个对象，该对象具有您希望返回项匹配的属性，并在完成时使用回调函数。

• insert Takes the new item as an object and adds it to the database.

  insert将新项目作为对象并将其添加到数据库。

• remove Takes the query, and object of options, and removes from the database.

  remove接受查询和选项对象，然后从数据库中删除。

• find Takes the query and returns the objects.

  find进行查询并返回对象。

• update Takes the query and an object of properties you want updated.

  update接受查询和要更新的属性的对象。

app.js

app.js

const db = new Datastore({
  filename: './items.db',
  autoload: true
})

// Get all items from db and send them to the client
ipcMain.on('loadAll', () => db.find({}, (err, items) => mainWindow.webContents.send('loaded', items)))

// Saves item and returns it to client
ipcMain.on('addItem', (e, item) => {
  db.insert(item, err => {
    if (err) throw new Error(err)
  })

  mainWindow.webContents.send('added', item)
})

菜单栏 (Menu Bar)

Now we can start adding some more interesting functionality into our menu bar. For every object in our array we have a few options to customize it.

现在，我们可以开始在菜单栏中添加一些更有趣的功能。 对于数组中的每个对象，我们都有一些自定义选项。

• label Set the name shown on the menu bar

  label设置菜单栏上显示的名称

• submenu Sets and array of objects as a sub directory, these can go on infinitely.

  submenu对象集和数组作为子目录，它们可以无限进行。

• click Sets an onClick handler, takes in itself and the current focused window.

  click设置一个onClick处理程序，并使用其自身和当前的焦点窗口。

• accelerator Sets any keyboard shortcuts, we can use process.platform to check what OS is being used, since Mac and Windows have a few different keys.

  accelerator设置任何键盘快捷键，我们可以使用process.platform来检查正在使用的操作系统，因为Mac和Windows具有几个不同的键。

• type Set menu item as one of electrons preset formats; normal, separator, checkbox, and radio.

  type设置菜单项作为电子预置的格式中的一个; normal ， separator ， checkbox和radio 。

Along with our file menu, we’re going to add the option to toggle the dev tools to help debug our application.

除了文件菜单外，我们还将添加选项以切换开发工具以帮助调试应用程序。

MenuBar.js

MenuBar.js

const menuBar = [
  {
    label: 'file',
    submenu: [
      {
        label: 'Clear All',
        accelerator: process.platform == 'darwin' ? 'Command+C' : 'Ctrl+C',
        click(item, currentWindow) { currentWindow.webContents.send('clearAll') }
      }
    ]
  }, {
    label: 'DevTools',
    accelerator: process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
    click(item, mainWindow) { mainWindow.toggleDevTools() }
  }
]

With the cleared event being sent, we can clear our ul.

发送清除事件后，我们可以清除ul 。

script.js

script.js

// Catches ClearAll from menu, sends the event to server to clear the db.
ipcRenderer.on('clearAll', () => ipcRenderer.send('clearAll'))
ipcRenderer.on('cleared', () => list.innerHTML = '')

app.js

app.js

// Clears database and send event to client if successful
ipcMain.on('clearAll', () => {
  // Without multi being set to true only the first matching item with be removed.
  db.remove({}, { multi: true }, (err) => {
    if (err) throw new Error(err)
    mainWindow.webContents.send('cleared')
  })
})

捆绑 (Bundling)

Before we can bundle our new app we need some icons to go with it, but they need to be in the right formats for their operating system. icns for Mac and Linux and ico for Windows. I recommend using Cloud Convert to do this.

在捆绑我们的新应用之前，我们需要一些图标，但它们必须采用适合其操作系统的正确格式。 icns Mac和Linux和ico为Windows。 我建议使用Cloud Convert来做到这一点。

When they’re all in the correct locations you can just run their script from our package.json file and a new release-builds folder should be created. In your OS’s folder you can find your new application ready to run natively on your machine.

当它们都位于正确的位置时，您只需从package.json文件中运行其脚本，然后应创建一个新的release-builds文件夹。 在操作系统的文件夹中，您可以找到准备在本机上本地运行的新应用程序。

$ npm run package-mac
$ npm run package-win
$ npm run package-linux

结论 (Conclusion)

While this may have been a bit of a lengthy process, I hope that you found this helpful in understanding the fundamentals of building your own desktop apps using Electron. You can find the full repo for this example here.

尽管这可能是一个漫长的过程，但我希望您发现这有助于理解使用Electron构建自己的桌面应用程序的基础。 您可以在此处找到此示例的完整仓库。

翻译自: https://www.digitalocean.com/community/tutorials/electron-intro-to-electron-todo-app