如何用JavaScript构建原生桌面应用程序
21CTO导读：JavaScript的世界越来越强大，使用Eletron类似的框架都可以轻松开发桌面级应用程序了。本文就讲解，如何使用JavaScript来开发一个本地原生程序。
Any application that can be written in JavaScript,will eventually be written in JavaScript.
- Jeff Atwood
不要担心，这长得这个样子
我们今天讲的不Electron，要看的是Proton Native，并用它来制作一个简单的本地应用程序。
与Eletron应用程序不同，使用Proton Native构建的应用程序实际是本地应用，而不是基于网络的Chromium。
Proton Native与React Native类似，但更适合于桌面应用程序。开发后它将成为编译为本地平台代码，因此它看起来像本地应用程序一样运行。
了解了这么多，我们现在开始吧。
Windows系统
安装构建工具，使用如下之命令：
npm install --global --production windows-build-tools
Linux系统
在Liunx系统下，你需要准备如下的第三方库：
1、libgtk-3-dev
2、build-essential
Mac系统
Mac用户有那么一点点幸福，啥也不需要，直接运行如下命令：
npm install -g create-proton-app
然后再运行：
create-proton-app my-app
然后就开始构建一个新项目。
打开这个项目的目录，然后再打开你喜欢的任何一款编辑器。你会看到这个项目的目录结构是这样的：
└───node_modules
├───.babelrc
├───index.js
├───package.json
└───package-lock.json
其中，index.js看起来像是这个样子：
看着很像React/React Native文件
就如同任何React或React Native项目一样，我们需要导入相应的库并创建类组件。
App的元素只是一个窗体和菜单的容器。其中窗体有三个属性：title（窗体标题）、size（包括对象窗体宽度和高度）以及menuBar（一般设置为false，我们不需要有菜单栏）。
接下来，我们就开始写代码。接下来使用npm命令来安装 crypto。
npm i crypto
我们使用cryto 的MD5算法去哈希一段文本。
index.js文件
import React, { Component } from "react";
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto";
class Example extends Component {
state = { text: "", md5: "" };
hash = text => {
this.setState({ text });
let md5 = crypto
.createHash("md5")
.update(text, "utf8")
.digest("hex");
this.setState({ md5 });
};
render() {
return (
title="Proton Native Rocks!"
size={{ w: 300, h: 300 }}
menuBar=
);
}
}
render();
我们首先导入了Text和TextInput组件，以便稍后引用它们。接下来，再将text和md5设置为空串给状态对象。为此，我们创建了一个有文本参数的哈希函数。
在哈希散列函数中，我们将状态设置为文本并声明md5的方式存储加密文本。如下列所示：
this.setState({ text });
let md5 = crypto.createHash("md5")
.update(text, "utf8").digest("hex");
接下来，去设置状态对象去更新md5.
this.setState();
该render方法会返回一些jsx元素。Box元素就像React中的div，或React Native中的View层，它包含了TextInput和Text，因为窗口元素不允许父级有多个子元素。
TextInput有一个onChange属性，每次文本被修改时都会调用这个方法。为此，我们将它设置成一个胖箭头函数，它接受一个文本参数并返回给我们先前声明的哈希函数。
因此，每次发生文本改变时，文本都会被MD5方式做加密。下面，我们来运行它：
cd my-app
npm run start
它将显示如下的窗体（如果没显示，检查一下自己）：
然后，如果我们输入一些文字，底部会显示被md5处理过的哈希字符串。
估计你会说，“这窗体长得可真丑，让我们再添加一些样式吧”。嗯，确实如此。在本篇文章正在写的时间，Proton Native还处于起步的阶段，现在它和我们一样在成长。从目前来看，Proton Native还不支持样式，但是它是一个有趣的项目值得我们来用。
想贡献这个项目，请到Repo库中检出，地址为https://github.com/kusti8/proton-native
作者：Mohammed Salman
翻译：洛逸
来源：https://medium.freecodecamp.org/build-native-desktop-apps-with-javascript-a49ede90d8e9
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180514G1G2EE00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
