NativeScript 入门
5.00/5 (4投票s)
NativeScript 入门指南。
NativeScript 是一个框架，它允许 Web 开发人员利用他们的 Web 开发技能来构建 Android 和 iOS 的原生移动应用程序（NativeScript 团队承诺将来还会支持 Windows Phone）。因此，借助 NativeScript，如果您会使用 JavaScript 和 CSS，就可以构建原生移动应用程序。
与 Ionic 或任何基于 Cordova 的混合移动框架不同，NativeScript 不使用 Web 视图，而是使用目标原生平台的渲染引擎，这意味着您可以获得与任何其他原生应用程序相同的性能。
NativeScript 试图弥合混合移动应用和原生移动应用这两个世界之间的差距。它汲取了两全其美的优点并将其融合到一个平台中，但 NativeScript 是如何实现这一点的呢？
重用 Web 技能，主要是 JavaScript 和 CSS，并使用 Android 或 iOS 的渲染引擎（因此无需 Web 视图，也没有性能问题）。
因此，借助 NativeScript
- 您可以构建 100% 原生的移动应用程序
- 您可以直接从目标原生平台的 SDK 或任何第三方库调用原生 API，因此与使用原生平台语言（Java 或 Swift）构建的原生应用程序相比，没有限制。
- 您可以构建跨平台应用程序，代码库几乎相同/或有时完全相同。
- 您拥有强大的工具：JavaScript、TypeScript、Angular 2。
- 您可以在应用程序中使用 NPM/Node.js 模块，但只能使用那些不要求或不依赖于 DOM 等浏览器 API 的模块。
- 您可以使用 CSS 的一个子集来样式化您的应用 UI。
- 您没有 Web 视图，因此没有与 Web 视图相关的性能问题。
- 您可以重用 CocoaPods 和 Gradle 包。
- 您可以在移动应用程序和 Web 应用程序之间共享代码。
Angular 2 和 NativeScript？
Angular 2 是 Google 构建的最新 JavaScript 框架。它是 Angular.js（版本 1.x）的后继者，但从头开始完全重写。与 Angular.js 不同，Angular 2 可以在 Web 浏览器之外使用，并且不需要 DOM，因此可以利用它来构建桌面或移动设备等其他平台的应用程序，而不仅仅是 Web。
NativeScript 不需要 Angular 2，您可以使用它仅用纯 JavaScript 构建您的移动应用程序，但如果您了解 Angular 2，为什么不利用它来构建移动应用程序呢。
设置 NativeScript
因此，在获得一些关于 NativeScript 的基本信息后，让我们开始安装它。与如今的任何其他优秀工具一样，NativeScript 使用 Node.js，因此您需要在系统上安装它，否则，您可以按照本教程了解如何安装 Node.js。
接下来，您需要从 npm（nodejs 包管理器）安装 NativeScript CLI，只需在您的 Windows 命令提示符或 Linux/Mac 终端中输入以下命令即可。
npm install -g nativescript
如果一切安装顺利，您将可以使用两个等效的命令来处理 NativeScript，正如您所猜到的，这两个命令分别是 NativeScript 和 tns（Telerik NativeScript）。使用这些命令之一及其相关的子命令，您可以脚手架、构建和运行您的 NativeScript 移动应用程序。
请注意，原生开发需要根据您的目标平台进行特殊设置，例如，对于 Android，您需要安装 Java 和 Android SDK 以及可选的 Android 模拟器（如果您不打算在开发过程中使用移动设备进行测试）。对于 iOS，您需要 MAC OS 并需要安装 XCode。
安装所需的原生开发平台工具后，您可以使用以下命令验证您是否已准备好使用 NativeScript 进行开发
nativescript doctor
如果您看到“未检测到任何问题”，那么您就可以开始了。
使用 NativeScript 构建您的第一个移动应用程序
因此，请继续打开您的终端或命令提示符，然后使用 nativescript cli 脚手架您的第一个移动项目。
nativescript create myApp --appid "com.techiediaries.myapp"
appid 用于指定应用程序 ID
如果您想创建一个基于 Angular 2 的应用，请添加 –ng switch。
nativescript create myApp --appid "com.techiediaries.myapp" --ng
继续并 cd 进入您的应用目录
cd myApp
如果您执行 ls，您应该会看到一个类似于以下内容的目录结构
您的所有工作都应该在 app 目录中完成，您可以在其中放置应用程序的通用和平台特定代码和文件。添加代码后，您需要通过执行以下命令为目标平台（Android 或 iOS）准备您的项目
nativescript prepare android
nativescript prepare ios
prepare 命令不会神奇地做什么。它只是将特定于平台的内容复制到 platforms 目录中的每个特定于平台的子目录中，因此您可以确保每个平台仅获取其特定的资产。
接下来，您需要将目标平台添加到您的项目中，以便您可以构建您的移动应用程序，为此，只需执行以下命令
nativescript platform add android
nativescript platform add ios
现在您可以使用以下命令构建您的应用程序
nativescript build android
nativescript build ios
构建应用程序后，您应该在以下位置找到您的应用程序包
- platforms → android → bin（Android 的 APK）
- platforms → ios → build → emulator（iOS 的模拟器构建（APP））
- platforms → ios → build → device（iOS 的设备构建（IPA））
您还可以部署您的项目到设备进行开发测试，方法是
nativescript deploy android
nativescript deploy ios
如果您手边没有物理设备进行测试，您可以使用模拟器，并可以使用以下命令在模拟器中运行您的应用程序
nativescript emulate android
nativescript emulate ios
为了避免使用所有这些命令，您可以使用 run 命令，该命令会为您处理 prepare、build 和 deploy 这三个命令。
nativescript run android
nativescript run ios
或者在模拟器中运行
nativescript run android --emulator
nativescript run ios --emulator
开发时，您需要实时快速地看到您的更改，因此您需要使用以下命令进行 livesync
nativescript livesync android
nativescript livesync ios
无论您使用的是模拟器还是实际设备，这都可以正常工作。NativeScript 会负责将您的更改同步到您的应用程序。只需进行更改，然后就可以在模拟器或通过 USB 连接的物理设备上看到结果。
构建您的移动应用程序的用户界面
如前所述，NativeScript 使用目标平台（Android 或 iOS）的原生布局渲染器。这与混合移动框架不同，因此您的应用程序不在 Web 视图中运行，并且您没有 HTML 标签来构建您的应用程序 UI，取而代之的是，您使用一种特定于 NativeScript 的基于 XML 的语言，该语言会被转换为特定于 Android 或 iOS 的布局语言。
NativeScript 布局
NativeScript 有许多布局。布局是一种容器，允许您放置 ui 元素/组件。不同的布局有不同的元素放置算法，您可以根据您的需求使用任何您选择的布局
绝对布局
此布局使用绝对坐标（left, top）来放置元素。要使用它，您需要导入 AbsoluteLayout 模块。
import absoluteLayoutModule = require("ui/layouts/absolute-layout");
网格布局
此布局使用行和列来放置任何组件。您需要使用以下命令导入 GridLayout 模块
var layout = require("ui/layouts/grid-layout");
堆叠布局
此布局将元素水平或垂直堆叠。要使用它，您需要使用以下命令导入 StackLayout 模块
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
停靠布局
此布局将元素放置在边缘（左、上、右、下）。要使用它，您首先需要使用 require 导入 DockLayout 模块
import dockModule = require("ui/layouts/dock-layout");
换行布局
此布局将 ui 组件放置在旁边（水平或垂直），当有可用空间时。您可以根据需要设置方向为水平或垂直。要使用，您需要使用以下命令导入 WrapLayout 模块
import wrapLayoutModule = require("ui/layouts/wrap-layout");
您有两种选择：使用 NativeScript XML UI 语言或 JavaScript 代码创建布局。例如，让我们创建一个带有某些 Label 的简单网格布局。
使用 XML
<stacklayout orientation="vertical">
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
import enums = require("ui/enums");
var stackLayout = new StackLayout();
stackLayout.orientation = enums.Orientation.horizontal;
var btn = new Button();
btn.text ="Click Me"
stackLayout.addChild(btn);
我可以在我的 NativeScript 应用中使用现有的 NPM/Nodejs 模块吗？
简短的回答是：是的，可以。只要模块不依赖于 DOM 等特定于浏览器的 API 即可。
使用 lodash 或 moment.js 等流行包非常简单。您需要做的就是安装它们，然后要求它们，这个过程非常简单
首先，您需要进入您的项目目录并通过普通的 npm install 命令安装 npm 模块
npm install --save node-uuid
然后在您的应用代码中要求它并像往常一样开始使用它
npm install --save node-uuid
使用以下命令构建您的项目后
nativescript build <platform>
CLI 会将 node_modules 文件夹中的所有模块复制到 platforms/<platform>/assets/app/tns_modules。
MVVM 模式
MVVM 代表 Model-View-ViewModel，它是一种架构模式，类似于 MVC 或 Model-View-Controller。事实上，MVVM 只是 MVC 架构的一种变体，它用 ViewModel 组件替换了 Controller 组件，ViewModel 添加了诸如双向数据绑定之类的功能。ViewModel 是一个可观察对象，它观察模型并将模型的变化信号发送给视图，以便视图自行更新。
MVVM 有助于将用户界面和应用程序逻辑分开。使用 vanilla JavaScript 进行 NativeScript 开发需要您理解 MVVM 模式的工作原理以及如何使用它。
在 NativeScript 中使用现有的原生 Android/iOS 库
NativeScript 允许您在 NativeScript 应用程序代码中毫不费力地使用原生平台库，您所需要的只是一些调整和配置，然后就可以从 JavaScript 代码调用 API 了。
从 NPM 安装 NativeScript 插件
使用 CLI 从 NPM 安装插件
tns plugin add nativescript-physics-js
NativeScript 与 TypeScript
与 vanilla JavaScript 相比，您可以选择使用 TypeScript 来构建您的 NativeScript 移动应用程序，您只需要通过以下方式安装（确保您在项目目录中）
nativescript install typescript
然后，您就可以开始使用了。
如果您不知道 TypeScript 是什么，那么它只是一个由 Microsoft 创建的 JavaScript 的强类型超集，它为 JavaScript 添加了 OOP（面向对象编程）功能。TypeScript 的许多功能已添加到 JavaScript 2015/EcmaScript 6 中，并且还有其他功能计划添加到下一个版本 es6+ 中。
NativeScript 与 Angular 2
Angular 2 是 Angular 的最新版本，它是一个用于构建应用程序的 JavaScript 框架，与 angular.js（1.x）不同，Angular 2 可以用于构建 Web 浏览器之外的应用程序，因为它独立于 DOM。Angular 2 可用于构建具有原生速度和性能的移动和桌面应用程序。
参考文献
- NativeScript API 文档
- NativeScript API 参考
- NativeScript 项目路线图
- 这篇博文 Getting started with NativeScript 最初出现在 Techiediaries
历史
- 2016年11月14日：初始版本