"js" Tag

The "js" tag contains the instance name, window style, and page route information.

NOTE

The "name", "window", and "pages" tags are configured in the "js" tag of the config.json file.

"pages"

The "pages" defines the route information of each page. Each page consists of the page path and page name. The following is an example:

{
    ...
    "pages": [
        "pages/index/index",
        "pages/detail/detail"
    ]
    ...
}

NOTE

• The first page in the pages list is the home page, also referred to as the entry, of the application.

• The page name should not be a component name, for example, text.hml or button.hml.

window

The "window" defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods:

• Specify designWidth, which is the logical screen width. All size styles, such as width and font-size, are scaled at the ratio of designWidth to the physical screen width. For example, when designWidth is 720 px and if you set width to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px.

• Set autoDesignWidth to true, the designWidth field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI (a screen density of 2x, with 160 DPI as the base), 1 px is equivalent to 2 physical px.

  NOTE

  1. The default <length> value in the current style is calculated based on the screen density. For example, if the screen density is x2 (with 160 DPI as the baseline) and the default <length> value is 1 px, the actual length rendered on the device is 2 physical px.

  2. Values of autoDesignWidth and designWidth do not affect how the default <length> value is calculated and the final effect.

The following is a sample code snippet:

{
    ...
    "window": {
        "designWidth": 720,
        "autoDesignWidth": false
    }
    ...
}

Example

{
  "app": {
    "bundleName": "com.example.player",
    "version": {
        "code": 1,
        "name": "1.0"
    },
    "vendor": "example"
  }
  "module": {
      ...
      "js": [
      {
          "name": "default",
          "pages": [
              "pages/index/index",
              "pages/detail/detail"
          ],
          "window": {
              "designWidth": 720,
              "autoDesignWidth": false
          }
      }
      ],
      "abilities": [
      {
          ...
      }
    ]
  }
}