NativeScript - 架构

NativeScript 是创建移动应用程序的高级框架。它隐藏了创建移动应用程序的复杂性，并公开了一个相当简单的 API 来创建高度优化和高级的移动应用程序。NativeScript 即使是入门级开发人员也可以轻松地在 Android 和 iOS 中创建移动应用程序。

本章让我们了解一下NativeScript框架的架构。

介绍

NativeScript框架的核心概念是使开发人员能够创建混合风格的移动应用程序。混合应用程序使用特定于平台的浏览器 API 在普通移动应用程序中托管 Web 应用程序，并通过 JavaScript API 提供对应用程序的系统访问。

NativeScript 在JavaScript 语言上投入了大量资金，为开发人员提供高效的框架。由于JavaScript是客户端编程（Web 开发）事实上的标准，并且每个开发人员都非常了解 JavaScript 语言，因此它可以帮助开发人员轻松进入 NativeScript 框架。在底层，NativeScript 通过一组称为本机插件的 JavaScript 插件公开本机 API。

NativeScript 建立在Native 插件的基础上，并提供许多高级且易于使用的JavaScript 模块。每个模块都执行特定的功能，例如访问相机、设计屏幕等。所有这些模块都可以通过多种方式组合来构建复杂的移动应用程序。

下图显示了 NativeScript 框架的高级概述 -

框架

NativeScript 应用程序- NativeScript 框架允许开发人员使用 Angular 样式应用程序或 Vue 样式应用程序。

JavaScript 模块- NativeScript 框架提供了一组丰富的 JavaScript 模块，明确分类为 UI 模块、应用程序模块、核心模块等。应用程序可以随时访问所有模块，以编写任何级别的复杂应用程序。

JavaScript 插件- NativeScript 框架提供了大量 JavaScript 插件来访问平台相关功能。模块使用 JavaScript 插件来提供特定于平台的功能。

本机插件- 本机插件是用特定于平台的语言编写的，用于包装系统功能，JavaScript 插件将进一步使用该系统功能。

平台 API - 由平台供应商提供的 API。

简而言之，NativeScript 应用程序是使用模块编写和组织的。模块是用纯 JavaScript 编写的，模块通过插件访问平台相关功能（只要需要），最后，插件桥接平台 API 和 JavaScript API。

NativeScript 应用程序的工作流程

正如我们之前了解到的，NativeScript 应用程序是由模块组成的。每个模块都支持特定的功能。引导 NativeScript 应用程序的两个重要模块类别如下 -

  • 根模块

  • 页面模块

根模块和页面模块可以归类为应用程序模块。应用程序模块是 NativeScript 应用程序的入口点。它引导页面，使开发人员能够创建页面的用户界面，并最终允许执行页面的业务逻辑。应用程序模块由以下三项组成 -

  • 以 XML 编码的用户界面设计（例如 page.xml/page.component.html）

  • 用 CSS 编码的样式（例如 page.css/page.component.css）

  • JavaScript 中模块的实际业务逻辑（例如 page.js/page.component.ts）

NativeScript提供了很多UI组件（在UI模块下）来设计应用程序页面。UI 组件可以在基于 Angular 的应用程序中以 XML 格式或 HTML 格式表示。应用程序模块使用 UI 组件来设计页面并将设计存储在单独的 XML page.xml/page.component.html中。可以使用标准 CSS 设计设计样式。

应用程序模块将设计风格存储在单独的 CSS、page.css/page.component.css 中。页面的功能可以使用 JavaScript/TypeScript 来完成，它可以完全访问设计以及平台功能。应用程序模块使用单独的文件 page.js/page.component.ts 来编码页面的实际功能。

根模块

NativeScript 通过 UI 容器管理用户界面和用户交互。每个 UI 容器都应该有一个根模块，UI 容器通过它来管理 UI。NativeScript 应用程序有两种类型的 UI 容器 -

应用程序容器- 每个 NativeScript 应用程序都应该有一个应用程序容器，并将使用 application.run() 方法进行设置。它初始化应用程序的 UI。

模型视图容器- NativeScript 使用模型视图容器管理模态对话框。NativeScript 应用程序可以有任意数量的模型视图容器。

每个根模块应该只有一个 UI 组件作为其内容。UI 组件又可以将其他 UI 组件作为其子组件。NativeScript提供了很多带有子功能的UI组件，如TabView、ScrollView等。我们可以将它们用作根 UI 组件。一个例外是Frame，它没有子选项，但可以用作根组件。框架提供了加载页面模块的选项以及导航到其他页面模块的选项。

页面模块

在 NativeScript 中，每个页面基本上都是一个页面模块。页面模块是使用 NativeScript 提供的丰富的 UI 组件集设计的。页面模块通过Frame组件加载到应用程序中（使用其 defaultPage 属性或使用 navigator() 方法），然后使用Root Modules加载，而在应用程序启动时又使用 application.run() 加载。

应用程序的工作流程如下图所示 -

应用

上图按以下步骤详细解释 -

  • NativeScript 应用程序启动并调用 application.run() 方法。

  • application.run() 加载Root 模块。

  • 根模块是使用任何一个 UI 组件设计的，如下所示 -

    • 框架

    • 标签视图

    • 侧抽屉

    • 任何布局视图

  • 框架组件加载指定页面（页面模块）并进行渲染。其他 UI 组件将按照根模块中的指定进行渲染。其他 UI 组件也可以选择加载页面模块作为其主要内容。

基于 Angular 的 NativeScript 应用程序的工作流程

正如我们之前了解到的，NativeScript 框架提供了多种方法来满足不同类别的开发人员的需求。NativeScript 支持的方法如下：

  • NativeScript Core - NativeScript 框架的基本或核心概念

  • Angular + NativeScript - 基于 Angular 的方法

  • Vuejs + NativeScript - 基于 Vue.js 的方法

让我们了解 Angular 框架是如何融入到 NativeScript 框架中的。

步骤1

NativeScript 提供了一个对象（platformNativeScriptDynamic）来引导 Angular 应用程序。platformNativeScriptDynamic 有一个方法 bootstrapModule，用于启动应用程序。

使用 Angular 框架引导应用程序的语法如下 -

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

这里，

AppModule是我们的根模块。

第2步

应用程序模块的简单实现（在指定代码下方）。

import { NgModule } from "@angular/core"; 
import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 
import { AppRoutingModule } from "./app-routing.module"; 
import { AppComponent } from "./app.component"; 
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], imports: [
         NativeScriptModule,
         AppRoutingModule
      ], declarations: [
         AppComponent
      ]
   }
) export class AppModule { }

这里，

AppModule通过加载 AppComponent 组件来启动应用程序。Angular 组件与页面类似，用于设计和编程逻辑。

AppComponent (app.component.ts) 及其表示逻辑 (app.component.css) 的简单实现如下 -

应用程序组件.ts

import { Component } from "@angular/core"; 
@Component(
   {
      selector: "ns-app",
      templateUrl: "app.component.html"
   }
)
export class AppComponent { }

这里，

templateUrl指的是组件的设计。

应用程序组件.html

<page-router-outlet></page-router-outlet>

这里，

page-router-outlet是附加 Angular 应用程序的地方。

综上所述，Angular 框架由类似于 NativeScript 框架的模块组成，但略有不同。Angular 中的每个模块都会有一个 Angular 组件和一个路由器设置文件 (page-routing.mocdule.ts)。路由器是按模块设置的，它负责导航。Angular 组件类似于 NativeSctipt 核心中的页面。

每个组件都有一个 UI 设计 (page.component.html)、一个样式表 (page.component.css) 和一个 JavaScript/TypeScript 代码文件 (page.component.ts)。