华为云首页用户手册

ASTRO轻应用 ASTROZERO-什么是高级页面:如何快速创建一个高级页面

时间：2024-10-24 17:30:50

ASTRO轻应用 ASTROZERO 高级页面

如何快速创建一个高级页面

以构建包含基本柱图组件的高级页面为例，向您介绍如何快速搭建高级页面。

新建高级页面。
1. 参考登录经典应用设计器中操作，登录经典版应用设计器。
2. 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。
3. 设置标签和名称，单击“添加”。
  图10 添加高级页面
  - 在应用中首次创建高级页面时，才会显示“视图”选项。
  - 高级页面支持在如下两种布局模式下，使用组件搭建页面（具体说明请参见高级页面布局）。
    
    绝对布局：在绝对布局中，每个组件可在页面下任意位置进行拖拽放置，组件的宽高可自定义设置。该布局模式常用于IOC大屏页面开发场景。
    
    流式布局：在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。
搭建高级页面。
1. 在高级页面开发界面，单击，打开组件列表。
2. 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。
  图11 搭建高级页面

进行组件属性配置。

以修改组件的图表数据为例，向您介绍如何进行组件属性配置。

选中基本柱图组件，在组件属性设置中，单击“数据”页签。

在桥接器实例中，选择“折线图数据桥接器”，数据类型选择“静态数据”，并在静态数据中拷贝如下示例。

图12 组件数据设置

{
    "resCode": "0",
    "resMsg": "成功",
    "result": [{
        "order": {
            "dataX": [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12",
                "13",
                "14",
                "15",
                "16",
                "17",
                "18",
                "19",
                "20",
                "21",
                "22",
                "23",
                "24"
            ],
            "dataValue": [{
                    "title": "入园人数",
                    "value": [
                        20,
                        30,
                        45,
                        20,
                        60,
                        80,
                        140,
                        200,
                        145,
                        40,
                        70,
                        60,
                        80,
                        16,
                        87,
                        77,
                        60,
                        20,
                        60,
                        80,
                        55,
                        68,
                        70,
                        24
                    ]
                },
                {
                    "title": null,
                    "value": [
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0
                    ]
                },
                {
                    "title": "出园人数",
                    "value": [
                        90,
                        60,
                        30,
                        20,
                        10,
                        110,
                        140,
                        87,
                        64,
                        45,
                        11,
                        24,
                        80,
                        14,
                        98,
                        35,
                        41,
                        14,
                        45,
                        80,
                        31,
                        22,
                        23,
                        24
                    ]
                }
            ]
        }
    }]
}