# Project Structure

# App Resources

An app contains: a manifest file describing project configuration information, an app.ux file for placing public resource scripts of the project, multiple ux files describing pages. A typical example is as follows:

App root directory:

├── 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

# ux Template

A page usually consists of three parts: page structure, style, and logical interaction. These three parts can be placed in one ux file or as separate files.

If placed in one ux file, the ux file needs to contain three tags: template, style, and script.

Example:

<template>
  <div class="page">
    <text class="title">Welcome to open {{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 {
    // Page data object
    private: {
      title: 'Example Page'
    },
    // Callback after button click
    routeDetail() {
      router.push({
        uri: '/pages/detail'
      })
    }
  }
</script>

If the page structure, style, and logical interaction are separated into independent files, the following directory structure can be used:

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

Note

If separated into independent files, after splitting the ux/css/js 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:

Cache, generally used for storing cached files, such as files downloaded through the fetch interface, which may be deleted by the system due to insufficient storage space;
Files, generally used for storing relatively small permanent files, which are managed by the app itself;
Mass, generally used for storing relatively large files, but this partition does not guarantee continuous availability;
Temp, represents temporary files mapped from external sources. For security reasons, temporary files are read-only and can only be accessed by calling specific APIs, such as the file.readText method. Additionally, access to temporary files is temporary, and they cannot be accessed after the app restarts. They need to be re-acquired using specific APIs.

Additionally, app resources are also 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

The allowed characters in a URI are 0-9a-zA-Z_-./%: (excluding quotes). The URI cannot contain .. and supports directory structures, with directories 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. A path starting with "/" indicates an absolute path, such as /Common/a.png. A path not starting with "/" is a relative path, such as a.png and ../Common/a.png.

App resource files are divided into code files and resource files. Code files refer to files containing code, such as .js/.css/.ux files, while other files are resource files, which are generally used only as data, such as images and videos.

In code files, when importing other code files, use relative paths, such as: ../Common/component.ux;
In code files, when referencing resource files (e.g., images, videos), generally use relative paths, such as: ./abc.png;
When a code file needs to be imported, if the importing file and the imported file are in the same directory, the imported file can use relative paths when referencing resource files. However, if they are not in the same directory, absolute paths must be used because the imported file will be copied to the importing file during compilation, and the directory will change after compilation. For example, if the a.css file is imported by b.ux, and a.css and b.ux are in the same directory, a.css can use a relative path when referencing resource files: abc.png. If they are not in the same directory, an absolute path must be used: /Common/abc.png. Similarly, when the a.ux file is imported by the b.ux file, if a.ux and b.ux are in the same directory, a.ux can use a relative path when referencing resource files: a.png. If they are not in the same directory, a.ux must use an absolute path when referencing resources: /Common/abc.png;
In CSS, consistent with front-end development, resource files are accessed using the url(PATH) method, such as: url(/Common/abc.png).

← Build Parameters Project Configuration →