vivo手表开发文档

您所在的位置：网站首页 › vivo手表可以用qq吗 › vivo手表开发文档

vivo手表开发文档

2024-06-30 14:39| 来源: 网络整理| 查看: 265

项目结构

更新时间：2023-09-07 15:06:20

本文对项目的结构及相关进行了讲解，包括 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 定义项目需要的各种模块及配置信息复制代码目录的简要说明如下： src：项目源文件夹 sign：签名模块，签名生成方法详见文档生成证书 app.ux 文件用于全局 JavaScript 逻辑和应用生命周期管理，详见文件访问规则引用代码文件，推荐使用相对路径，比如：../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)

首页，即应用平台启动时默认打开的页面。首页需配置为应用中某页面的名称，即在/src目录下，页面目录的相对路径

假设工程根目录如下所示

└── src └── Demo 页面目录，存放各自页面私有的资源文件和组件文件 └── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）复制代码

假设首页为 Demo 目录下的 index.ux 文件，则首页对应的页面名称为Demo

{ "router": { "entry": "Demo" } }复制代码页面路由对象（router.pages）

页面路由对象，key 为页面名称（/src目录下，页面目录的相对路径），value 为页面具体路由配置，key 不要重复

页面具体路由配置（router.pages 的 value）包括以下属性：

component：页面对应的 ux 文件名 path：页面路径，不填则默认为页面名称（/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';复制代码引入自定义组件

框架引入自定义组件的方式是通过标签完成的，如下面代码所示

复制代码

标签中的的src属性指定自定义组件的地址，name属性指定在组件中引用该组件时使用的标签名称

最终页面定义与引入方式如下：

复制代码

【本文地址】

vivo手表开发文档

vivo手表开发文档

今日新闻

推荐新闻