页面结构与应用配置

本教程介绍 .ux 页面的基本结构，以及 manifest.json 中的页面路由和系统能力配置。完成后，可以创建包含两个页面并使用存储和网络请求能力的应用配置。

前提条件

• 已完成安装与首个应用。
• 已阅读与 Vue2 的差异。

认识 .ux 文件

BlueOS 应用入口、页面和自定义组件都使用 .ux 文件。文件内容按照 <script>、<template>、<style> 的顺序排列，且 <template> 只能包含一个根节点。

<script>
  export default {
    data: {
      title: '示例页面',
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center">
    <text>{{ title }}</text>
  </div>
</template>

<style>
@tailwind utilities;
</style>

app.ux 是应用入口。各部分的完整规则参见UX 文件参考。

配置页面路由

BlueOS 不会根据页面目录自动生成路由。按照以下步骤登记列表页和详情页：

1. 在 src/pages/ 下创建 Todos/index.ux。
2. 在 src/pages/ 下创建 TodoDetail/index.ux。
3. 打开 src/manifest.json。
4. 将两个页面添加到 router.pages，并将 Todos 设为入口页面：

{
  "router": {
    "entry": "Todos",
    "pages": {
      "Todos": { "component": "index" },
      "TodoDetail": { "component": "index" }
    }
  }
}

router.pages 的键与页面目录名一致，component 当前仅支持 index。全部配置字段参见manifest 文件参考。

声明系统能力

绝大多数 @blueos.* API 必须在 features 中声明对应能力，否则调用会在运行时失败。涉及权限的能力还需要配置 permissions。

1. 打开 src/manifest.json。
2. 根据工程信息修改 package、name 和 icon。
3. 在 features 中添加本地存储和网络请求能力：

{
  "package": "com.example.todos",
  "name": "待办",
  "icon": "/assets/images/logo.png",
  "versionName": "1.0",
  "versionCode": 1,
  "appCategory": ["utilities"],
  "config": { "designWidth": 466 },
  "features": [
    { "name": "blueos.storage.storage" },
    { "name": "blueos.network.fetch" }
  ],
  "router": {
    "entry": "Todos",
    "pages": {
      "Todos": { "component": "index" },
      "TodoDetail": { "component": "index" }
    }
  }
}

路由模块 @blueos.app.appmanager.router 无需在 features 中声明。具体规则参见页面路由 API。

和 Web 不一样

BlueOS 不支持约定式文件路由。未在 router.pages 中登记的页面无法通过 router.push 打开。

验证配置

1. 保存 manifest.json。
2. 在 BlueOS Studio 中选择 重新启动编译。

编译成功表示 JSON 结构有效。页面跳转和系统能力仍需在添加对应业务代码后验证。

后续步骤

继续完成布局与样式，使用 BlueOS 支持的 CSS 能力构建页面。