proton-jms_如何使用JavaScript（Proton Native）构建本机桌面应用程序

proton-jms

by Mohammed Salman

穆罕默德·萨尔曼(Mohammed Salman)

如何使用JavaScript(Proton Native)构建本机桌面应用程序 (How to build native desktop apps with JavaScript (Proton Native))

When I was writing this article, Atwood’s Law came to mind:

当我写这篇文章时，想到了阿特伍德定律：

Any application that can be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood

可以用JavaScript编写的任何应用程序最终都将用JavaScript编写。 - 杰夫·阿特伍德

Originally posted on my blog!

最初发布在我的博客上！

Today we are going to take a look at Proton Native, and make a simple app with it.

今天，我们将看一下Proton Native ，并使用它制作一个简单的应用程序。

Unlike Electron apps, apps built with Proton Native are actually native (hence the name) and not web-based on chromium.

与Electron应用程序不同，使用Proton Native构建的应用程序实际上是本地的 (因此得名)，而不是基于Chrome的基于Web的应用程序。

Proton Native is like React Native but for desktop. It compiles to native platform code, so it looks and performs like a native app.

Proton Native类似于React Native，但用于桌面。 它可以编译为本机平台代码，因此其外观和性能类似于本机应用程序。

So let’s get started.

因此，让我们开始吧。

视窗 (Windows)

Install the build tools by running:

通过运行以下命令安装构建工具：

npm install --global --production windows-build-tools

的Linux (Linux)

You’ll need these libraries:

您将需要以下库：

• libgtk-3-dev
  libgtk-3-dev
• build-essential
  必要的

苹果电脑 (Mac)

You don’t need anything.

你什么都不需要

Now run the following:

现在运行以下命令：

npm install -g create-proton-app

and

和

create-proton-app my-app

to make a new project.

制作一个新项目。

Open the project directory with your favorite code editor. The directory should look like this:

使用您喜欢的代码编辑器打开项目目录。 该目录应如下所示：

└───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js should look like this:

index.js应该看起来像这样：

Just like any React or React Native Project, we import the react library and make a class component.

就像任何React或React Native Project一样，我们导入react库并创建一个类组件。

The App element is just a container that holds the Window and Menu, and the Window has three props: title (the window title), size (takes an object that contains the width and height of the window), and menuBar (set to false because we don’t want a menu bar).

App元素只是一个包含Window和Menu的容器，并且Window具有三个属性： title (窗口标题)， size (采用包含窗口的宽度和高度的对象)和menuBar (设置为false因为我们不需要菜单栏)。

Before we start coding, let’s install crypto using npm:

在开始编码之前，让我们使用npm安装crypto ：

npm i crypto

We will use crypto to hash the text with the MD5 algorithm.

我们将使用crypto算法通过MD5算法对文本进行哈希处理。

index.js (index.js)

I first imported Text and TextInput so I could use them later. Then in the class after setting the text and md5 to empty strings in the state object, I created a function hash that takes a text argument.

我先导入了Text和TextInput以便以后使用。 然后，在将state对象中的text和md5设置为空字符串之后的class ，我创建了一个带有text参数的函数hash 。

In the hash function, we set the state to text and declare md5 to store the encrypted text (as below)

在hash函数中，我们将状态设置为text并声明md5来存储加密的文本(如下所示)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

and set the state object to the updated md5.

并将状态对象设置为更新的md5 。

this.setState({ md5 });

The render method returns some jsx element. The Box element is just like div in React, or View in React Native, which holds the TextInput and Text . This is because the parent window element doesn’t allow having more than one child.

render方法返回一些jsx元素。 Box元素就像React中的div或React Native中的View ，其中包含TextInput和Text 。 这是因为父窗口元素不允许有多个孩子。

TextInput has an onChange prop that will be called every time the text changes. Therefore, we set it to a fat arrow function that takes a text argument and returns the hash function we declared earlier.

TextInput有一个onChange道具，每次文本更改时都会调用它。 因此，我们将其设置为带有text参数并返回我们先前声明的hash函数的粗箭头函数。

So now every time the text changes, text is hashed and set to md5.

因此，现在每次文本更改时，都会对text进行哈希处理并将其设置为md5 。

Now if we run it with

现在，如果我们用

npm run start

this window should pop up:

该窗口应弹出：

And if we enter some text, it gets hashed to md5 like this:

如果我们输入一些文本，它会像这样散列到md5：

You might say “It looks ugly — let’s add some styling to it.” Well, at the time of writing this article, Proton Native is still at it’s infancy. It’s very buggy and it doesn’t support styling (yet), but it’s a fun project to play with.

您可能会说“它看起来很丑-让我们为其添加一些样式。” 好吧，在撰写本文时，Proton Native仍处于起步阶段。 这是非常多的错误，尚不支持样式设置，但是这是一个有趣的项目。

If you want to contribute to the project, check out the repo.

如果您想为该项目做出贡献，请查看回购 。

If you have any questions or suggestions, feel free to comment or reach me on Twitter @4msal4 and don’t forget to hit that clap button :)

如果您有任何疑问或建议，请随时在Twitter @ 4msal4上发表评论或与我联系 ，不要忘了点击那个鼓掌按钮:)

?Buy me a coffee?

你给我一杯咖啡吗？

?Check out my previous story?

看看我以前的故事吗？

How to build a news app with React Native.

如何使用React Native构建新闻应用程序 。

翻译自: https://www.freecodecamp.org/news/build-native-desktop-apps-with-javascript-a49ede90d8e9/

proton-jms