Electron.js简介-第1部分：设置

最新推荐文章于 2023-11-14 11:16:24 发布

cukw6666

最新推荐文章于 2023-11-14 11:16:24 发布

阅读量637

点赞数

文章标签： java python vue nodejs js ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/electron-intro-to-electron-setup

版权

In this article we’ll be learning how to develop our own native desktop applications using Electron.js. We’ll be making a basic todo list app to master the fundamentals behind creating menus, working with local data, and bundling our apps into something we can run on our local machine. If you ever wish to explore any of these options deeper, I would take a look at the official docs.

在本文中，我们将学习如何使用Electron.js开发我们自己的本机桌面应用程序。我们将制作一个基本的待办事项列表应用程序，以掌握创建菜单，使用本地数据以及将应用程序捆绑到可以在本地计算机上运行的东西之后的基础知识。如果您想更深入地探索这些选项中的任何一个，我将看一下官方文档。

先决条件 (Prerequisites)

Only some Node.js basics are necessary, but since we’ll be using Nedb, which is built on MongoDB and Mongoose, being familiar with using a NoSQL database will be very helpful, which you can learn more about here.

仅需要一些Node.js基础知识，但是由于我们将使用基于MongoDB和Mongoose构建的Nedb，因此熟悉使用NoSQL数据库将非常有帮助，您可以在此处了解更多信息。

安装 (Installation)

We only need a few things to get things started.

我们只需要几件事就可以开始。

electron
electron
electromon A version of nodemon for live reloading electron apps.
electromon实时重新加载电子应用程序的nodemon版本。
nedb A version of MongoDB and Mongoose that allows us to save data directly to our machine.
nedb MongoDB和Mongoose的一个版本，使我们可以将数据直接保存到我们的计算机中。
electron-packager A builder for our app so we can send and download it later.
electron-packager我们的应用程序的构建器，因此我们可以稍后发送和下载。

$ npm i electron electromon nedb electron-packager

档案结构 (File Structure)

All we really need to get started is a place to put our icons for our different operating systems, a HTML page with a client-side JavaScript file, and a file for our server. We’ll also break our Menu Bar into it’s own component since it can get a bit cumbersome.

我们真正需要入门的只是一个地方，可以放置我们用于不同操作系统的图标，带有客户端JavaScript文件HTML页面以及用于服务器的文件。我们还会将菜单栏分解为它自己的组件，因为它可能会变得有些麻烦。

* assets 📂
  * icons 📂 // electron-packager needs a different logo format for every platform
    * mac  // mac and linux, since they take the same file type
    * win 
* src 📂 
  * MenuBar.js
  * index.html 
  * script.js
* app.js
* package.json

建立 (Setup)

For our project’s package.json file, the scripts object may seem complicated, but we’re just adding a start script and some build commands for when we’re ready to deploy to various platforms. In the build commands, make sure the --icon path leads to the correct location and ProductName equals the name of your app, we’ll worry about the icons later.

对于我们项目的package.json文件，脚本对象可能看起来很复杂，但是我们只是在准备好将其部署到各种平台时添加一个启动脚本和一些构建命令。在构建命令中，确保--icon路径指向正确的位置，并且ProductName等于您的应用程序的名称，稍后我们将担心这些图标。

package.json

{
  "dependencies": {
    "electromon": "^1.0.10",
    "electron": "^5.0.8",
    "electron-packager": "^14.0.3",
    "nedb": "^1.8.0"
  },
  "name": "electron-app",
  "version": "1.0.0",
  "main": "app.js",
  "devDependencies": {},
  "scripts": {
    "start": "electromon .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron App\"",
    "package-linux": "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

Let’s get our interface set up with just a basic HTML page. I will be using the Tailwind CSS framework to make it look a little nicer. All we really need is a form to enter our new items, and and empty ul to append them onto later.

让我们通过一个基本HTML页面设置我们的界面。我将使用Tailwind CSS框架使它看起来更好一些。我们真正需要的只是一个表格来输入我们的新项目，然后清空ul以将其追加到以后。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  <title>Electron</title>
</head>

<body class="bg-gray-900 text-white flex flex-col items-center">
  <form>
    <input type="text" placeholder="New Item" class="bg-transparent rounded h-12 mt-4 pl-3">
    <button type="submit" class="bg-blue-800 rounded h-12 w-16">Add</button>
  </form>

  <ul></ul>

  <script src="./script.js"></script>
</body>
</html>

To avoid getting an error, we’re just going to set our menu bar to an empty array, and it’ll be passed to and rendered by app.js. We’ll go into more detail on that later.

为了避免出错，我们将菜单栏设置为一个空数组，并将其传递给app.js并由app.js呈现。稍后我们将对此进行详细介绍。

MenuBar.js

const menuBar = [];

module.exports = menuBar;

窗口 (Window)

After requiring everything, we’re going to destructure all of the tools we need off of electron.

在需要所有东西之后，我们将使用电子来破坏我们需要的所有工具。

app Controls the lifecycle of our app; whether it’s on, shutting off, reloading, etc.
app控制我们应用程序的生命周期；是否开启，关闭，重新加载等
BrowserWindow Establishes the window itself, it comes with a long list of options but all we really need is to tell it to use Node.js on our client side.
BrowserWindow建立窗口本身，它带有一长串选项，但是我们真正需要的只是告诉它在客户端使用Node.js。
Menu Sets our menu bar from our template over in MenuBar.js
Menu在MenuBar.js通过模板设置菜单栏
ipcMain Controls event calls between the server and the client. It’s client-side counterpart, ipcRenderer, sends our data to our server while ipcMain will catch that before we can save the data to our machine.
ipcMain控制服务器和客户端之间的事件调用。它是客户端对应的ipcRenderer ，将我们的数据发送到我们的服务器，而ipcMain会在将数据保存到我们的机器之前捕获到该数据。

Since we are essentially just making a web page we can just pass our new window our page URL, which we can make a bit more palatable using url.format().

由于本质上是制作网页，因此我们可以将页面URL传递给新窗口，使用url.format()可以使页面URL更具可口性。

app.js

const electron = require('electron');
const url = require('url');
const path = require('path');

// Components
const menuBar = require('./src/components/MenuBar');

const { app, BrowserWindow, Menu, ipcMain } = electron;

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    webPreferences: { nodeIntegration: true } // This will allow us to use node specific tools like require in our client side javascript.
  });
  mainWindow.loadURL(url.format({
    // All this is doing is passing in to file://your_directory/src/index.html
    pathname: path.join(__dirname, 'src/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // Shut down app when window closes
  mainWindow.on('closed', () => app.quit()); 

  const mainMenu = Menu.buildFromTemplate(menuBar);
  Menu.setApplicationMenu(mainMenu);
});

结论 (Conclusion)

Since this article started to get excessively long, I decided to break it into two parts to make it a bit more graspable. What we have so far makes a good boilerplate and In part 2 we’ll be going over the more interesting bits like communicating between the client and the server, managing our database, and bundling our app. You can find the repo for the completed example here.

由于本文开始变得太长，我决定将其分为两部分，以使其更加易懂。到目前为止，我们所拥有的东西是一个很好的样板，在第二部分中，我们将介绍一些更有趣的内容，例如客户端和服务器之间的通信，管理数据库以及捆绑应用程序。您可以在此处找到完整示例的仓库。

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

cukw6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron.js简介-第1部分：设置

In this article we’ll be learning how to develop our own native desktop applications using Electron.js. We’ll be making a basic todo list app to master the fundamentals behind creating menus, working ...
复制链接

扫一扫