NativeScript是用于创建移动应用程序的高级框架。它隐藏了创建移动应用程序的复杂性,并公开了一个相当简单的API来创建高度优化和高级的移动应用程序。 NativeScript使入门级开发人员也可以轻松地在Android和iOS中创建移动应用程序。
一起来了解本章中的NativeScript框架的体系结构。
NativeScript框架的核心概念是使开发人员能够创建混合样式的移动应用程序。混合应用程序使用特定于平台的浏览器API来在常规移动应用程序中托管Web应用程序,并通过JavaScript API提供对该应用程序的系统访问。
NativeScript创建在本地插件的基础上,并提供了许多高级且易于使用的 JavaScript模块。每个模块都有特定的函数,例如访问摄像头,设计屏幕等。所有这些模块都可以通过多种方式组合在一起,以构建复杂的移动应用程序。
下图显示了NativeScript框架的高级概述-
NativeScript Application - NativeScript框架允许开发人员使用Angular样式应用程序或Vue样式应用程序。
JavaScript Modules - NativeScript框架提供了一组丰富的JavaScript模块,这些模块明确分类为UI模块,应用程序模块,核心模块等。
JavaScript Plugin - NativeScript框架提供了大量JavaScript插件,以访问与平台相关的函数。
Native Plugin - 本地插件以平台特定的语言编写,以包装系统函数,JavaScript插件将进一步使用这些函数。
Platform API - 平台供应商提供的API。
简而言之,NativeScript应用程序是使用模块编写和组织的。模块使用纯JavaScript编写,并且模块通过插件访问与平台相关的函数(需要时),最后,插件将平台API和JavaScript API结合在一起。
正如先前所了解的,NativeScript应用程序由模块组成。每个模块都启用特定函数。引导NativeScript应用程序的模块的两个重要类别如下-
Root Modules
Page Modules
Root和Page模块可以归类为应用程序模块。应用程序模块是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来完成,JavaScript/TypeScript可以通过以下方式完全访问设计:以及平台函数。应用程序模块使用单独的文件page.js/page.component.ts编码页面的实际函数。
NativeScript通过UI集合管理用户界面和用户交互。每个UI集合都应具有一个 Root Module (根模块),并且UI集合可通过该模块管理UI。 NativeScript应用程序具有两种类型的UI集合-
Application Container - 每个NativeScript应用程序应具有一个应用程序集合,并将使用application.run()方法进行设置。
Model View Container - NativeScript使用模型视图集合管理"Model"对话框。
每个根模块都应仅包含一个UI组件作为其内容。UI组件又可以将其他UI组件作为其子级。NativeScript提供了很多带有子函数的UI组件,例如TabView,ScrollView等。
在NativeScript中,每个页面基本上都是一个页面模块。页面模块是使用NativeScript提供的丰富的UI组件集设计的。页面模块通过Frame组件(使用其defaultPage属性或Navigator()方法)加载到应用程序中,该组件又使用Root Modules加载,然后在启动应用程序时又使用application.run()加载。
应用程序的工作进程可以如下图所示:
上图在以下步骤中进行了详细说明-
NativeScript应用程序启动并调用application.run()方法。
application.run()加载 Root模块。
Root Module 是使用以下任意一种UI组件设计的-
Frame
TabView
SideDrawer
Any Layout View
Frame组件加载指定的页面(Page模块)并进行渲染。其他UI组件将按照“Root Modules”中的指定进行渲染。其他UI组件也可以选择加载页面模块作为其主要内容。
正如先前所了解的,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 是无涯教程的Root模块。
第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组件来启动应用程序。角组件类似于页面,并且用于设计和编程逻辑。
AppComponent(app.component.ts)及其表示逻辑(app.component.css)的简单实现如下-
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)。路由器是按模块设置的,它负责导航。
每个组件都会有一个UI设计(page.component.html),一个样式表(page.component.css)和一个JavaScript/TypeScript代码文件(page.component.ts)。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)