前言

“一次构建，多处运行”，跨平台APP带着这股风潮把火烧到了前端，为开发者带来无尽的遐想。现有的流行跨平台框架有以下:

1.  基于单WebView的开发框架。开发者可以使用现有的最新web技术，开发出单页面web应用。同时利用JSBridge，又能获取原生的API，从而使web应用具有了原生应用的功能。Cordova+IONIC可以说是这个潮流的代表，也是跨平台APP的先锋。然而这类跨平台应用的缺点是不流畅，在安卓手机上体验较差。

2. Hybrid方向。也就是原生应用配合HTML5技术，让APP具有了部分跨平台的功能。Hybrid也是现在各大互联网企业采用较多的跨平台开发方式。这类APP在体验上优于单WebView的APP，并且能够极大提高开发效率。然而这种方式离“一次构建，多处运行”的设想还是有很大距离，毕竟依然需要针对不同的移动平台进行原生开发。

3. 使用Javascript开发纯原生应用。

和ReactNative相比，Nativescript最大的特点是可以获得100%的原生API。也就是说，开发者可以通过Javascript获取和原生开发语言同样多的原生接口。下面，我们通过实现一个简单的计算器，来体会一下Nativescript的开发思想。同时，我们能体会到“获取所有原生API”带来的巨大好处。

你可以先在这里看到最终的结果。

注意输入的数字的字体会随着文本长度逐渐变小，想想这个功能怎么实现。

Nativescript计算器

准备

首先需要搭建开发环境，请参考官方的文档。你可以使用下面的命令来检测Nativescript是否安转完成:

tns doctor

Nativescript支持纯Javascript，同时也支持Angular2。我们选择Angular2和Typescript进行开发，体会一下Angular2带来的开发便利。

创建我们的项目

tns create NSCalculator --ng

这个命令会在当前目录下新建NSCalculator文件夹，同时安装好所需的第三方依赖。其实这个命令还给你新建一个Demo，运行下面的命令，你就会看到你的第一个Nativescript应用

tns platform add ios

tns run ios --emulator

拆分

使用Visual Studio Code打开文件，有如下的文件夹结构

项目结构

我们的代码将会组织在app目录下，所以只需考虑这个文件夹。

main.ts是整个应用的启动文件，我们现在不需要更改它。我们看到main.ts里面引入了app.component模块，app.component将会被改造成我们的计算器组件。

在改造app.component.ts前，我们先考虑一下如何将计算器拆分成一个个组件。

Calculator拆分

首先从功能上对计算器进行拆分。计算器由Displayer和Keyboard两个部分，Keyboard由Button组成。基于此，我们在app目录下新增三个文件夹：Displayer，Keyboard，NSButton。

布局

组件化开发有两种常用方式，一种是由大到小开发，也就是Calculator -> Displayer -> Keyboard -> Button，一种是由小到大开发，也就是 Button -> Keyboard -> Displayer -> Calculator。当然你也可以混合开发。本例采用由大到小的开发方式。

删除app.component.ts里面的内容，用以下代替:

```

dd

```

运行以下命令，你就能看到效果

tns livesync ios --emulator --watch 

和 tns run ios 命令不同，这个命令会监视你的文件变化并自动构建部署新的应用。

Nativescript布局

Nativescript的布局方式和安卓原生的布局方式非常类似。对于计算器，我们的Displayer需要一个固定的高度，Keyboard需要占据全部剩余的空间。因此，Calculator的第一级布局使用了GridLayout。rows="auto,*" 表示Gridlayout为两行，第一行高度由内容(auto)决定，第二行高度占据全部剩余空间(*)。columns="*"表示Gridlayout分为一列布局，这一列的宽度占据全部空间。

我们为Displayer选择了StackLayout布局，这是因为我们需要把Label靠右下角对齐。我们为Keyboard选择了GridLayout布局，这很好理解，因为我们需要一个5x4的格子用来放置计算器的按钮。

组件

目前为止我们的APP只有一个组件AppComponent，这非常不利于项目的扩展。幸运的是Nativescript支持Angular2.0的全部功能，我们可以使用Angular来实现Displayer和Keyboard组件。

在app目录下新建Keyboard文件夹，在Keyboard文件里新增keyboard.component.ts，keyboard.html，以及keyboard.css文件。内容如下：

应用界面并没有任何变化，我们还需要在app.component.ts中引入Keyboard组件。修改后的文件如下

现在我们的计算器有点样子了：

Keyboard组件

但是现在的Keyboard还不能提供任何功能，Keyboard不能响应点击事件，也不能把数据传递给Displayer。接下来我们就要为Keyboard加上这些功能。

交互

要监听Keyboard的点击事件，最直观的答案就是为每个按钮设置touch事件监听器，在这个计算器应用中我们需要设置19次！而且我们的监听逻辑不能复用，虽然他们的功能很相似！这是不可接受的。所以，我们应该把按钮也做成一个Angular组件，因为组件是可以复用的。

那么这个按钮组件需要哪些功能呢？ 当点击按钮时，按钮的背景色需要改变，并且需要把这个点击事件告知其他组件。

在app目录下新建NSButton文件夹，同时在NSButton文件夹里新增一下文件: nsbutton.component.ts, nsbutton.css。

然后，需要在Keyboard组件里引入NSButton。修改keyboard.component.ts和keyboard.html文件如下：

现在，我们的按钮组件就有了一个漂亮的点击动画。

不过Keyboard的点击事件还不能通知给Displayer，我们接着来增加这个功能，修改nsbuttom.component.ts, keyboard.component.ts, app.component.ts如下：

这样我们的Keyboard点击就能实时显示在Disapler上面了。

按键交互

原生API

对比我们的计算器和ios原生计算器，我们发现原生计算器的Displayer会自动调整字体大小，以保证显示的数字完全展示。得益于Nativescript，我们也能通过Javascript调用这套API，实现相同的效果。修改app.comonent.ts如下:

总结

得益于Nativescript可以访问100%的原生API, 我们不需要写任何原生代码，就能获得和原生代码一样的能力。这可以说是Nativescript相比于其他平台，比如React Native, 最大的优势。在现阶段，Nativescript应该是最成熟的，性能最好的跨平台APP构建方案。