项目结构
更新时间：
本文对项目的结构及相关进行了讲解，包括 vivo 手表应用文件结构讲解，配置增加页面，引入依赖等
通过本节，你将学会:
项目介绍
通过 IDE 新建一个项目，这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构如下：
├── sign rpk包签名模块
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── Common 公用的资源和组件文件
│ │ └── logo.png 应用图标
│ ├── Demo 页面目录
│ | └── index.ux 页面文件，可自定义页面名称
│ ├── app.ux app.ux文件。
│ └── manifest.json 项目配置文件，配置应用图标、页面路由等
| |--pages 目录用于存放所有组件页面。
| |--i18n 目录用于配置不同语言场景资源内容。
└── package.json 定义项目需要的各种模块及配置信息目录的简要说明如下：
文件访问规则
- 引用代码文件，推荐使用相对路径，比如：../common/utils.js。
- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。
- 公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。
- CSS 样式文件中通过 url()函数创建
数据类型，如：url(/common/xxx.png)。
配置信息
每个应用都要有专属的名称，图标等，这些信息都需要在manifest.json文件中配置。详见文档manifest 文件
应用包名（package）
应用包名，是区别于其他应用的唯一标识
推荐采用 com.company.module 的格式，示例如下：
{
"package": "com.example.demo"
}应用名称（name）
应用名称，6 个汉字以内，与应用商店保存的名称一致；框架提供保存到桌面的功能，桌面上显示的应用名即为此属性
示例如下：
{
"name": "发票小助手"
}应用图标（icon）
规则为正方形（不能是圆角），且务必无白边
{
"icon": "/Common/logo.png"
}应用版本名称、版本号（versionName、versionCode）
应用版本名称、版本号为开发者的应用包维护的版本信息
应用版本名称为主版本.次版本格式
应用版本号为整数，从1开始，每次更新上架请自增 1
示例如下：
{
"versionName": "1.0",
"versionCode": 1
}配置接口列表（features）
在使用接口时，需要先在 manifest 中声明接口。在每个接口文档的顶部，都附有声明接口的配置代码
以 fetch 网络请求为例，示例如下：
{
"features": [{ "name": "system.fetch" }]
}新增页面
新增及配置页面，需要依赖manifest.json中router配置
router
router，路由，用于定义页面的实际地址、跳转地址。如果 ux 页面没有配置路由，则不参与项目编译。一个目录下最多只能存在一个主页面文件（不包括组件文件）
首页 (router.entry)
首页，即应用平台启动时默认打开的页面。首页需配置为应用中某页面的名称，即在<ProjectName>/src目录下，页面目录的相对路径
假设工程根目录如下所示
└── src
└── Demo 页面目录，存放各自页面私有的资源文件和组件文件
└── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）假设首页为 Demo 目录下的 index.ux 文件，则首页对应的页面名称为Demo
{
"router": {
"entry": "Demo"
}
}页面路由对象（router.pages）
页面路由对象，key 为页面名称（<ProjectName>/src目录下，页面目录的相对路径），value 为页面具体路由配置，key 不要重复
页面具体路由配置（router.pages 的 value）包括以下属性：
- component：页面对应的 ux 文件名
- path：页面路径，不填则默认为页面名称（
<ProjectName>/src目录下，页面目录的相对路径）
示例如下：
假设工程根目录如下所示
└── src
|── Demo 页面目录，存放各自页面私有的资源文件和组件文件
| └── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）
└── Doc
└── Layout 页面目录，存放各自页面私有的资源文件和组件文件
└── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）当页面名称（router.pages 的 key）为Demo时，对应的页面配置（router.pages 的 value）包括：
- component：页面对应的 ux 文件名
index - path：页面路径，默认为页面名称
Demo
{
"router": {
"pages": {
"Demo": {
"component": "index"
},
"Doc/Layout": {
"component": "index"
}
}
}
}现在，开发者就可以通过/Demo访问到 Demo 目录下的 index.ux 页面了
引入依赖
在 vivo 手表应用开发过程中，经常需要引入依赖
引入 js
vivo 手表应用中支持ES6的module标准，使用import引入 js 依赖，同时支持 CommonJs 规范，使用require引入 js 依赖
// 首先在 `manifest.json` 中配置 `fetch` 接口
// require引入
const fetch = require('@system.fetch')
// import引入
import fetch from '@system.fetch'引入 css
vivo 手表应用支持 css 通过@import 方式引入
// 引入外部css文件
@import './style.css';
// 引入外部less文件
@import './style.less';引入自定义组件
框架引入自定义组件的方式是通过<import>标签完成的，如下面代码所示
<import name="comp-part1" src="./part1"></import><import>标签中的的src属性指定自定义组件的地址，name属性指定在<template>组件中引用该组件时使用的标签名称
最终页面定义与引入方式如下：
<import name="my-component" src="./myComponent"></import>
<template>
<div>
<my-component></my-component>
</div>
</template>