NativeScript 架構

NativeScript 是一個先進的框架，用於建立移動應用程式。它隱藏了建立移動應用程式的複雜性，並提供了一個相當簡單的 API 來建立高度最佳化和先進的移動應用程式。NativeScript 使即使是入門級開發者也能輕鬆地在 Android 和 iOS 上建立移動應用程式。

本章讓我們瞭解 NativeScript 框架的架構。

簡介

NativeScript 框架的核心概念是使開發者能夠建立混合風格的移動應用程式。混合應用程式使用平臺特定的瀏覽器 API 在普通的移動應用程式內託管一個 Web 應用程式，並透過 JavaScript API 為應用程式提供系統訪問。

NativeScript 大力投資於JavaScript 語言，為開發者提供了一個高效的框架。由於JavaScript是客戶端程式設計（Web 開發）的事實標準，並且每個開發者都非常瞭解 JavaScript 語言，因此它有助於開發者輕鬆上手 NativeScript 框架。在底層，NativeScript 透過一組稱為原生外掛的 JavaScript 外掛來公開原生 API。

NativeScript 建立在原生外掛的基礎之上，並提供了許多高階且易於使用的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。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() 載入。

應用程式的工作流程可以用下圖表示：

下文將詳細解釋上圖：

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)。

列印頁面