如何用JavaScript构建原生桌面应用程序

21CTO导读:JavaScript的世界越来越强大,使用Eletron类似的框架都可以轻松开发桌面级应用程序了。本文就讲解,如何使用JavaScript来开发一个本地原生程序。
 
 
FeaturedImage-v2.jpg



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


 

1_XyeRix8Z-yOcpRlpubtyuA.png


不要担心,这长得这个样子
 
我们今天讲的不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看起来像是这个样子:
 

1_BUgjpvWtCCZNPJ__qrQxig.png


看着很像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 (
      <App>
        <Window
          title="Proton Native Rocks!"
          size={{ w: 300, h: 300 }}
          menuBar={false}
        >
          <Box>
            <TextInput onChange={text => this.hash(text)} />
            <Text>{this.state.md5}</Text>
          </Box>
        </Window>
      </App>
    );
  }
}
 
render(<Example />);
 
我们首先导入了Text和TextInput组件,以便稍后引用它们。接下来,再将text和md5设置为空串给状态对象。为此,我们创建了一个有文本参数的哈希函数。
 
在哈希散列函数中,我们将状态设置为文本并声明md5的方式存储加密文本。如下列所示:
 
this.setState({ text });
let md5 = crypto.createHash("md5")
  .update(text, "utf8").digest("hex");
 
接下来,去设置状态对象去更新md5.
 
this.setState({md5});
 
该render方法会返回一些jsx元素。Box元素就像React中的div,或React Native中的View层,它包含了TextInput和Text,因为窗口元素不允许父级有多个子元素。
 
TextInput有一个onChange属性,每次文本被修改时都会调用这个方法。为此,我们将它设置成一个胖箭头函数,它接受一个文本参数并返回给我们先前声明的哈希函数。
 
因此,每次发生文本改变时,文本都会被MD5方式做加密。下面,我们来运行它:
 
cd my-app
npm run start
 
它将显示如下的窗体(如果没显示,检查一下自己):
 
1_D_fBTxyGSpUbIVPcyt3Kzw.png



 
然后,如果我们输入一些文字,底部会显示被md5处理过的哈希字符串。
 
估计你会说,“这窗体长得可真丑,让我们再添加一些样式吧”。嗯,确实如此。在本篇文章正在写的时间,Proton Native还处于起步的阶段,现在它和我们一样在成长。从目前来看,Proton Native还不支持样式,但是它是一个有趣的项目值得我们来用。
 
想贡献这个项目,请到Repo库中检出,地址为https://github.com/kusti8/proton-native
 
你有别的问题或建议,或者你也个是JavaScript前端高手,欢迎投稿/点评或通过网站来联系我们,也欢迎点赞哦!
 


作者:Mohammed Salman
翻译:洛逸
来源:https://medium.freecodecamp.or ... 0d8e9


0 个评论

要回复文章请先登录注册