---
title: Feature Pages
---

# Feature Pages

A page is dedicated to a specific feature, such as login, registration, forgot password, and payment. This type of page has a standalone feature and a complete process that can be accessed independently, with clear entry and exit points.

The feature page is registered through the `Page()` function. The feature page can be opened in other miniapps after it is published. This allows a feature page to be shared and reused.

Use cases:

- Miniapp A requires registration, login, and forgot password pages.
- Miniapp B requires registration, login, and forgot password pages.

You can develop the registration, login, and forgot password pages as separate feature pages. These pages can then be applied to miniapp B and other miniapps.

**Environment requirements**

- Basic Library: 2.12.0 and later
- Container version: 3.5.0 and later
- App public version: 5.0.0 and later

## Term

### Host miniapp

A host miniapp can run the imported feature page miniapps. The source code is located in `miniprogramRoot`.

### Feature page miniapp

A feature page miniapp can be imported into a host miniapp. The source code is located in `funtionalRoot`.

## Develop feature page

Each feature page has its own directory for storing source code. When writing the source code, do not reference files in the `miniprogramRoot` and `widgetRoot` directories, including JS, TYML, TYSS, and images.

### Configure project

Declare the source code of a feature page in `project.tuya.json` using the `funtionalRoot` field.

```json5
{
  projectname: 'functional-demo',
  i18n: true,
  miniprogramRoot: 'app/', // Miniapp source code.
  functionalRoot: 'app-func/', // The directory of the feature page source code.
  projectId: 'your_project_id',
  baseversion: '2.12.0',
  dependencies: {
    // ...
  },
}
```

The project directory for a complete feature page looks like this:

```bash
app/ # The source code for the main miniapp.
app-func/ # The source code for the feature page miniapp.
├── functional.json  # The configuration file for the feature page.
├── functional.tyss # The global style for the feature page.
├── theme.json # The theme configuration (if any) for the feature page.
├── assets/
│   └── logo.png  # The resources within the feature page.
└── pages/         # The pages within the feature page.
    └── settings/
        ├── index.js
        ├── index.json
        ├── index.tyml
        └── index.tyss
```

**Things to note**

- Unlike the miniapp, the feature page does not contain the `app.js` logic. Calling `getApp()` only returns an object shared with the current runtime, not information about the host miniapp.
- The page queue returned by `getCurrentPages()` only allows you to access the feature page instance and the route information about the pages of the host miniapp.

### Configure `functional.json`

This file describes the information about the current feature page miniapp.

#### Configuration fields

| Field | Type | Required | Description |
| ------ | ------- | ---- | ------- |
| pages | Array | Yes | The page list on the feature page should match the `app.json` of the miniapp. Declare the page address included in the current feature page. There must be at least one address. |
| publicPages | Object | Yes | Only the published page can be accessed by the host miniapp, with the route being `functional://{name}/{pageName} `. Once a page is published, its name cannot be changed. Otherwise, the host miniapp will access an incorrect route. Be sure to determine the page name before publishing it. Meanwhile, publish the page in the respective documentation to make it easy for people to reference. |
| themeLocation | string | No | [See `app.json`.](/en/miniapp/develop/miniapp/framework/app/app-json#themelocation) |
| usingComponents | Object | No | [See `app.json`.](/en/miniapp/develop/miniapp/framework/app/app-json#usingcomponents) |
| dependencies | Object | No | [See `project.tuya.json`.](/en/miniapp/develop/miniapp/framework/app/config) |
| darkmode | boolean | No | Specify whether to support the dark mode, defaulting to `true`. |
| themeLocation | string | No | The relative path of the theme configuration file. |

Example:

```json5
{
  pages: [
    'pages/settings/index', // The feature settings page.
    'pages/detail/index', // The feature details page.
  ],
  publicPages: {
    settings: 'pages/settings/index', // Publish settings page.
  },
  dependencies: {
    // Prompt the environment requirements for the host miniapp.
    MiniKit: '3.0.0',
  },
  darkmode: true,
  themeLocation: '../app/theme.json',
}
```

### Develop and debug feature page

#### Declare dependent feature page in `app.json`

Import the feature page miniapp using the `functionalPages` field in the `app.json` of the host miniapp. Use a key-value pair, with the key being the plugin name of the feature page and the value containing configuration information for that page.

```json5
{
  pages: ['pages/index/index'],
  functionalPages: {
    my_func: {
      appid: 'ty-xxxxxx',
    },
  },
}
```

> `appid` is the MiniApp ID. When the `appid` matches the `projectId` (`project.tuya.jons`) of the current miniapp, it indicates that the miniapp references its own feature page.

#### Redirect to feature page

The routing API supports three methods: `ty.navigateTo`, `ty.redirectTo`, and `ty.reLaunch`.

The format is `functional://{plugin name of the feature page}/{page name exposed publicly}`, with support for the query parameter.

```html
<navigator url="functional://my_func/settings" open-type="navigate">
  Navigate to the feature page.
</navigator>
```

```js
ty.navigateTo({
  url: 'functional://my_func/settings',
});
```

#### Event communication across pages

Support `eventChannel` communication. See [getOpenerEventChannel](/en/miniapp/develop/miniapp/framework/api/page#pageprototypegetopenereventchannel).

When developing the feature page, reserve event names for the host miniapp to call.

## Things to note

- The `app.tyss` style does not work on the feature page.
- Light / dark development mode, follow host configuration.
- The returns of `getApp` and `getCurrentPages` can only access their own space data.
- The multiple languages of the feature page will be merged with the host mini-program languages. The language priority is: host language > feature page language.