NativeScript 架构



NativeScript 是一个先进的框架,用于创建移动应用程序。它隐藏了创建移动应用程序的复杂性,并提供了一个相当简单的 API 来创建高度优化和先进的移动应用程序。NativeScript 使即使是入门级开发者也能轻松地在 Android 和 iOS 上创建移动应用程序。

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

简介

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

NativeScript 大力投资于JavaScript 语言,为开发者提供了一个高效的框架。由于JavaScript是客户端编程(Web 开发)的事实标准,并且每个开发者都非常了解 JavaScript 语言,因此它有助于开发者轻松上手 NativeScript 框架。在底层,NativeScript 通过一组称为原生插件的 JavaScript 插件来公开原生 API。

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

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

Framework

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。NativeScript 应用程序有两种类型的 UI 容器:

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

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

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

页面模块

在 NativeScript 中,每个页面基本上都是一个页面模块。页面模块使用 NativeScript 提供的丰富的 UI 组件进行设计。页面模块通过Frame组件(使用其 defaultPage 属性或使用 navigate() 方法)加载到应用程序中,而Frame组件又通过根模块加载,根模块又在应用程序启动时使用 application.run() 加载。

应用程序的工作流程可以用下图表示:

Application

下文将详细解释上图:

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

  • application.run() 加载一个根模块

  • 根模块使用下面指定的任何一个 UI 组件进行设计:

    • Frame

    • TabView

    • SideDrawer

    • 任何布局视图

  • Frame 组件加载指定的页面(页面模块)并进行渲染。其他 UI 组件将根据根模块中的规定进行渲染。其他 UI 组件也可以选择将页面模块作为其主要内容进行加载。

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

正如我们前面了解到的,NativeScript 框架提供多种方法来满足不同类别的开发者。NativeScript 支持的方法如下:

  • NativeScript 核心 - 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) 如下所示:

app.component.ts

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

这里:

templateUrl 指的是组件的设计。

app.component.html

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

这里:

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

总而言之,Angular 框架由类似于 NativeScript 框架的模块组成,但略有不同。Angular 中的每个模块都将有一个 Angular 组件和一个路由设置文件 (page-routing.mocdule.ts)。路由是按模块设置的,它负责导航。Angular 组件类似于 NativeScript 核心中的页面。

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

广告