NativeScript - 代码结构

NativeScript - 代码结构 首页 / NativeScript入门教程 / NativeScript - 代码结构

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

一起来了解本章中的NativeScript框架的体系结构。

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

NativeScript创建在本地插件的基础上,并提供了许多高级且易于使用的 JavaScript模块。每个模块都有特定的函数,例如访问摄像头,设计屏幕等。所有这些模块都可以通过多种方式组合在一起,以构建复杂的移动应用程序。

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

Framework

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应用程序由模块组成。每个模块都启用特定函数。引导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编码页面的实际函数。

Root模块

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

Page模块

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

应用程序的工作进程可以如下图所示:

Application

上图在以下步骤中进行了详细说明-

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

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

  • Root Module 是使用以下任意一种UI组件设计的-

    • Frame

    • TabView

    • SideDrawer

    • Any Layout View

  • Frame组件加载指定的页面(Page模块)并进行渲染。其他UI组件将按照“Root Modules”中的指定进行渲染。其他UI组件也可以选择加载页面模块作为其主要内容。

Angular应用程序

正如先前所了解的,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)。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

邱岳的产品手记 -〔邱岳〕

React实战进阶45讲 -〔王沛〕

大规模数据处理实战 -〔蔡元楠〕

研发效率破局之道 -〔葛俊〕

Node.js开发实战 -〔杨浩〕

容器实战高手课 -〔李程远〕

A/B测试从0到1 -〔张博伟〕

成为AI产品经理 -〔刘海丰〕

互联网人的数字化企业生存指南 -〔沈欣〕

好记忆不如烂笔头。留下您的足迹吧 :)