.ux 与 manifest

这篇讲清楚一个页面文件怎么组织，以及 manifest.json 里你必须碰的字段。

学完能做什么： 新增一页并挂上路由；给要用的 API 声明 features。

前置： 这不是浏览器，也不是 Vue。

.ux 三块

APP、页面、自定义组件都是 .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 是应用入口。编译会把 manifest 打进去，不要删除 /**manifest**/ 注释。完整说明见 ux 文件。

新页面必须登记

src/pages/TodoDetail/index.ux 不会自动变成可跳转页面。要在 manifest.json 的 router.pages 里登记，key 是目录名：

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

component 目前只支持 index。字段全集见 manifest 文件。

API 要声明

绝大多数 @blueos.* 调用需要 features。没声明，运行时会失败。权限类能力还要写 permissions。

最小教学用片段（包名、图标路径按你的工程改）：

{
  "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 里声明，以 页面路由 为准。

和 Web 不一样

没有 react-router 那种约定式文件路由。少登记一页，router.push 就不会到你以为的文件。

本页要点

• 一页一个根节点；三块顺序不要换。
• 新页面 = 目录 + index.ux + router.pages。
• 用 API 先查官方页上的 features 名，再写进 manifest。

下一篇：布局与样式