Quick Apps

# Directory Structure

Although quick apps follow a flexible structure of directories and resources, there are two documents that must be located in the root directory of the package:

  • manifest.json to describe and configure the app (more info in the manifest section), and
  • app.ux to manage the lifecycle of the app and the global configuration (more info about the UX format).

Directories may include scripts, media resources, stylesheets, and other resources. Quick apps uses a specific UX document format to describe pages and components.

The recommended directory structure is as follows:

.
├── manifest.json
├── app.ux
├── Page1
|   └── page1.ux
├── Page2
|   └── page2.ux
├── Common
├── ComponentA.ux
└── ComponentB.ux

TIP

One common practice is storing all the global resources (i.e., images, data,...) in the Common directory in the root of the package. Pages should be organized in sub-directories, and the specific resources dedicated only to them should be also stored in these directories.

# File Storage and Partitions

Quick app resources may be stored in different partitions. For instance, the Huawei quick app platform distributes the files in the following storage partitions:

  • Cache: generally, this partition is used to store cache files (e.g., files downloaded through the fetch API). Files in this partition may be removed by the system due to lack of storage space.
  • Files: generally, this partition stores small permanent files that are managed directly by the quick apps.
  • Mass: although this partition is not always available, it is usually used to store large files. For instance, Huawei Quick App Center allocates a dedicated storage directory in the Mass partition. Other applications on the system may have permissions to read this directory.
  • Temp: this partition is used to store temporary files mapped from external systems. For security purposes, temporary files are read-only and can be obtained only by calling specified APIs (e.g., the media.pickVideo API). In addition, the temporary files in this partition cannot be accessed after the quick app restarts, so developers need to invoke specific APIs to access the temporary files again. Also, app resources can be placed in this partition also for temporal processing.

# References and URIs

Quick apps use specific URI schemes to identify and access resources and files from components and APIs. The following table summarizes the main types of resources and the URI schemas to access them.

Resource Type URI Access Example Description
App resource /<path> Read-only /Common/header.png The main resources of the quick app pages, including components, media, spreadsheets, scripts, and others.
Cache internal://cache/<path> Read/Write internal://cache/fetch-126.png Quick app engine directory to store cached files, which can be accessed by other apps.
Files internal://files/<path> Read/Write internal://files/image/demo.png Quick app engine directory to store files, which can be accessed by other apps.
Mass internal://mass/<path> Read/Write internal://mass/video/demo.mp4 External directory, which can be accessed by other apps.
Temp internal://tmp/<path> Read-only internal://tmp/3dss7/demo.png The directory is automatically generated by the system to store temporary files.

Requirements:

  • URIs must be compliant with the following regular expression: [^\\s\"':|*?<>\\\\]+
  • A URI supports the package directory structure following their structure of directories separated by the slash character (/).
  • A URI cannot contain the double period (..).
  • Every internal URI refers to a file dedicated to an app.
  • Different applications using the same internal URIs will use different physical files on the device.

# Access to Resources (Paths)

The paths of the app resources can be absolute and relative:

  • Absolute paths: those that start with a slash character (/) and refers to the file system structure from the root directory (e.g., /Common/a.png).
  • Relative paths: those that refer to resources relative to the current resource's directory (e.g., the parent ../Common/a.png or the current one and its children b.png).

We can consider two types of app resource files: code files with the basic elements of the components (i.e, JavaScript, CSS, and UX files), and asset files, including auxiliary resources such as multimedia.

  • To import a code file from any component you need to use its relative path (e.g., ../Component/component.ux).
  • To reference an auxiliary asset file (e.g., an image or a video file), you can use either its relative path (e.g., ./abc.png) or the absolute path.

← Manifest →