Project Structure

App Resources

An app contains: a manifest file describing project configuration, an app.ux file for project-level public resource scripts, and multiple ux files describing pages. All source code is placed under the src/ directory. A typical structure is as follows:

src/
├── manifest.json
├── app.ux
├── pages
│   ├── index
|   |   └── index.ux
│   └── detail
|       └── detail.ux
├── i18n
|   ├── defaults.json
|   ├── zh-CN.json
|   └── en-US.json
└── common
    ├── style.css
    ├── utils.js
    └── logo.png

TIP

For the complete project directory structure (including build, dist, sign, etc.), refer to Project Overview.

ux Template

A page typically consists of three parts: page structure, style, and logic interaction. These three parts can be placed in a single ux file or as separate files.

If placed in a single ux file, it needs to contain the template, style, and script tags:

<template>
  <div class="page">
    <text class="title">Welcome to {{title}}</text>
    <input class="btn" type="button" value="Jump to detail page" onclick="routeDetail">
  </div>
</template>

<style>
  .btn {
    width: 400px;
    height: 60px;
    background-color: #09ba07;
    color: #ffffff;
  }
</style>

<script>
  import router from '@system.router'

  export default {
    private: {
      title: 'Example Page'
    },
    routeDetail() {
      router.push({
        uri: '/pages/detail'
      })
    }
  }
</script>

If the page structure, style, and logic interaction are split into separate files, the directory structure is as follows:

├── pages
│   └── detail
|       ├── detail.ux
|       ├── detail.css
|       └── detail.js

Note

When split into separate files, the ux file cannot contain the template tag.

File Storage

Files are stored by partition in the app platform. The following partitions are currently supported:

1. Cache: Used for storing cached files, such as files downloaded through the fetch interface. Files in this partition may be deleted by the system due to insufficient storage space.
2. Files: Used for storing relatively small permanent files, managed by the app itself.
3. Mass: Used for storing relatively large files, but this partition does not guarantee continuous availability.
4. Temp: Temporary files mapped from external sources. Read-only, accessible only through specific APIs (e.g., file.readText). Cannot be accessed after app restart and must be re-acquired.

Additionally, app resources are treated as a special read-only partition.

URI

URIs are used to identify app resources and files. Components and interfaces access app resources and files through URIs.

Resource Type	URI	Read-only	Example	Description
App Resources	/path	Yes	/Common/header.png	-
Cache	internal://cache/path	No	internal://cache/fetch-123456.png	-
Files	internal://files/path	No	internal://files/image/demo.png	-
Mass	internal://mass/path	No	internal://mass/video/demo.mp4	-
Temp	internal://tmp/path	Yes	internal://tmp/xxxxx	Dynamically generated by the system

Allowed characters in a URI are 0-9a-zA-Z_-./%: (excluding quotes). URIs cannot contain .., and directories are separated by slashes /.

An internal URI represents private app files. When specifying an internal URI, there is no need to specify the app identifier. The same internal URI will point to different files for different apps.

Resource and File Access Rules

App resource paths are divided into absolute paths and relative paths: paths starting with / are absolute (e.g., /Common/a.png), otherwise they are relative (e.g., a.png, ../Common/a.png).

App resource files are divided into code files (.js/.css/.ux) and resource files (images, videos, etc.). The access rules are as follows:

1. When importing other code files, use relative paths, e.g., ../Common/component.ux;
2. When referencing resource files, generally use relative paths, e.g., ./abc.png;
3. When a code file is imported by another file and they are not in the same directory, resources referenced in the imported file must use absolute paths (because the imported file is copied to the importing file's directory during compilation, causing relative paths to break). For example, if a.css is imported by b.ux and they are not in the same directory, a.css must use /Common/abc.png;
4. In CSS, use url(PATH) to access resource files, e.g., url(/Common/abc.png).