利用Electron进行现代化书签管理器

2023-12-29 05:52:50

在第一章中，我们从一个比较高的层面上讨论了Electron，既然这本书的名字叫做《Electron实战》，那么在这一章中我们就将从头开始设置和构建一个简单的应用程序——书签管理。我们的应用程序将利用现代浏览器特有的特性。

在上一章中，我们探讨了使用Electron可以做些什么以及为什么使用它。我们还讨论了Electron如何工作的基础知识。现在，我们将深入了解这些概念，并通过构建一个简单的应用程序来了解Electron。

我们将从头开始构建一个简单的应用程序，该应用程序将使用Electron来管理书签列表。该应用程序将使用JavaScript、HTML和CSS构建，并使用Electron来打包成一个独立的应用程序。

首先，我们将创建一个新的Electron项目。我们将使用Electron的命令行界面(CLI)来做到这一点。我们可以使用以下命令来创建项目:

electron-cli init

这将创建一个新的Electron项目，并创建一个名为"myapp"的文件夹。

接下来，我们将安装Electron所需的依赖项。我们可以使用以下命令来做到这一点:

npm install

这将安装Electron及其依赖项。

现在，我们可以开始构建我们的应用程序了。我们将创建一个名为"index.js"的文件，并将其放在"myapp"文件夹中。我们将使用以下代码来创建文件:

const {app, BrowserWindow} = require('electron')

function createWindow () {
  // 创建浏览器窗口。
  const win = new BrowserWindow({width: 800, height: 600})

  // 加载index.html文件。
  win.loadFile('index.html')

  // 打开开发者工具。
  win.webContents.openDevTools()
}

// 当Electron完成初始化并准备创建浏览器窗口时，调用createWindow函数。
app.whenReady().then(createWindow)

// 所有窗口都关闭时退出应用程序。
app.on('window-all-closed', () => {
  // 在macOS上，应用程序通常在用户按Cmd + Q之前仍然活跃。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当用户单击dock图标并且没有其他窗口打开时，
  // 重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

我们将创建一个名为"index.html"的文件，并将其放在"myapp"文件夹中。我们将使用以下代码来创建文件:

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>书签管理器</h1>

  <ul id="bookmarks">
  </ul>

  <script>
    // 创建书签管理器。
    const bookmarkManager = new BookmarkManager()

    // 将书签添加到书签管理器。
    bookmarkManager.addBookmark('Google', 'https://www.google.com')
    bookmarkManager.addBookmark('Facebook', 'https://www.facebook.com')
    bookmarkManager.addBookmark('Twitter', 'https://www.twitter.com')

    // 将书签显示在页面上。
    const bookmarksList = document.getElementById('bookmarks')
    for (const bookmark of bookmarkManager.bookmarks) {
      const listItem = document.createElement('li')
      const link = document.createElement('a')
      link.href = bookmark.url
      link.textContent = bookmark.name
      listItem.appendChild(link)
      bookmarksList.appendChild(listItem)
    }
  </script>
</body>
</html>