js标签配置

About 6 min

js标签配置

js标签中包含了实例名称、页面路由和窗口样式信息。

标签

类型

默认值

必填

描述

name

string

default

标识JS实例的名字。

pages

Array

-

路由信息,详见“pages”。

window

Object

-

窗口信息,详见“window”。

说明: name、pages和window等标签配置需在配置文件(config.json)中的“js”标签中完成设置。

pages

定义每个页面的路由信息,每个页面由页面路径和页面名组成,页面的文件名就是页面名。比如:

{
    ...
    "pages": [
        "pages/index/index",
        "pages/detail/detail"
    ]
    ...
}
1
2
3
4
5
6
7
8

说明:

  • pages列表中第一个页面是应用的首页,即entry入口。
  • 页面文件名不能使用组件名称,比如:text.hml、button.hml等。

window

window用于定义与显示窗口相关的配置。对于屏幕适配问题,有2种配置方法:

  • 指定designWidth(屏幕逻辑宽度),所有与大小相关的样式(例如width、font-size)均以designWidth和实际屏幕宽度的比例进行缩放,例如在designWidth为720时,如果设置width为100px时,在实际宽度为1440物理像素的屏幕上,width实际渲染像素为200物理像素。

  • 设置autoDesignWidth为true,此时designWidth字段将会被忽略,渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出,在不同设备上可能不同,请使用相对布局来适配多种设备。例如:在466*466分辨率,320dpi的设备上,屏幕密度为2(以160dpi为基准),1px等于渲染出的2物理像素。

    说明:

    1. 组件样式中<length>类型的默认值,按屏幕密度进行计算和绘制,如:在屏幕密度为2(以160dpi为基准)的设备上,默认<length>为1px时,设备上实际渲染出2物理像素。
    2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。

属性

类型

必填

缺省值

描述

designWidth

number

720

页面显示设计时的参考值,实际显示效果基于设备宽度与参考值之间的比例进行缩放。

autoDesignWidth

boolean

false

页面设计基准宽度是否自动计算,当设为true时,designWidth将会被忽略,设计基准宽度由设备宽度与屏幕密度计算得出。

示例如下:

{
    ...
    "window": {
        "designWidth": 720,
        "autoDesignWidth": false
    }
    ...
}
1
2
3
4
5
6
7
8

示例

{
  "app": {
    "bundleName": "com.huawei.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": [
      {
          ...
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31