NativeScript 项目教程

NativeScript 项目教程

awesome-nativescriptA curated list of awesome {N} resources, libraries, tools and applications项目地址:https://gitcode.com/gh_mirrors/awe/awesome-nativescript

1. 项目的目录结构及介绍

NativeScript 项目的目录结构通常包含以下几个主要部分：

awesome-nativescript/
├── apps/
│   ├── app1/
│   │   ├── app/
│   │   │   ├── app.css
│   │   │   ├── app.js
│   │   │   ├── main-page.js
│   │   │   ├── main-page.xml
│   │   │   └── package.json
│   │   ├── package.json
│   │   └── tsconfig.json
│   └── app2/
│       ├── app/
│       │   ├── app.css
│       │   ├── app.js
│       │   ├── main-page.js
│       │   ├── main-page.xml
│       │   └── package.json
│       ├── package.json
│       └── tsconfig.json
├── plugins/
│   ├── plugin1/
│   │   ├── index.js
│   │   └── package.json
│   └── plugin2/
│       ├── index.js
│       └── package.json
├── README.md
└── package.json

目录结构介绍

• apps/: 包含多个示例应用程序，每个应用程序都有自己的目录结构。
  • app/: 应用程序的主要代码文件，包括样式文件、脚本文件和布局文件。
  • package.json: 应用程序的依赖和配置文件。
  • tsconfig.json: TypeScript 配置文件（如果使用 TypeScript）。
• plugins/: 包含多个插件，每个插件都有自己的目录结构。
  • index.js: 插件的主要入口文件。
  • package.json: 插件的依赖和配置文件。
• README.md: 项目说明文档。
• package.json: 项目的根依赖和配置文件。

2. 项目的启动文件介绍

在 NativeScript 项目中，启动文件通常是 app/app.js 或 app/app.ts（如果使用 TypeScript）。这个文件是应用程序的入口点，负责初始化应用程序并加载主页面。

示例启动文件 (app/app.js)

const application = require("tns-core-modules/application");
application.run({ moduleName: "app-root" });

启动文件介绍

• app/app.js: 应用程序的入口文件，负责启动应用程序并加载主页面。
• moduleName: 指定主页面的模块名称，通常是 app-root 或 main-page。

3. 项目的配置文件介绍

NativeScript 项目的配置文件主要包括 package.json 和 tsconfig.json（如果使用 TypeScript）。

package.json

package.json 文件位于项目的根目录，包含项目的依赖、脚本和其他配置信息。

{
  "name": "awesome-nativescript",
  "version": "1.0.0",
  "description": "A curated list of awesome NativeScript resources",
  "main": "app/app.js",
  "scripts": {
    "start": "tns run android",
    "build": "tns build android",
    "test": "tns test android"
  },
  "dependencies": {
    "tns-core-modules": "^6.5.0",
    "nativescript-vue": "^2.4.0"
  },
  "devDependencies": {
    "typescript": "^3.9.0",
    "nativescript-dev-webpack": "^1.5.0"
  }
}

tsconfig.json

如果项目使用 TypeScript，tsconfig.json 文件位于每个应用程序的目录中，包含 TypeScript 编译配置。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "lib": ["es6", "dom"],
    "types": ["node"]
  },
  "exclude": ["node_modules", "platforms"]
}

awesome-nativescriptA curated list of awesome {N} resources, libraries, tools and applications项目地址:https://gitcode.com/gh_mirrors/awe/awesome-nativescript