DocsICP FilingConsole
官方文档
首页

Weather

更新时间：
复制 MD 格式
我的收藏

The Weather component displays weather information for the current day and the next few days. This topic describes how to configure the component.

Step 1: Add the component

  1. Create a mobile application. For more information, see Create a mobile application.

  2. In the mobile application editor, click the Components icon 组件 on the far left.

  3. (Optional) Add a column component to set the page layout. For more information, see Horizontal columns and vertical columns.

  4. Above the component list to the left of the canvas, enter Weather in the search box and drag the component onto the canvas.

    For more information about adding components, see Add components.

    After you add the Weather component, you can configure its settings in the style configuration pane on the right. You can set the Number of Days (for example, 3), Display Direction (vertical or horizontal), and select the Show Today checkbox. In the location information section, you can use Location Settings to configure a data source and set the default province, city, and district, along with their display options.

Step 2: Configure a data source

  1. In the Style pane on the right of the mobile application editor, select Configure Data Source from the Location Settings list.

  2. Click Configure Data Source next to Data Source.

  3. In the Data Source Configuration pane, select a data source type and complete the configuration.

    Available data source types include API, app push, and static data.

  4. Click OK.

    The component updates its weather data in real time based on the linked data source.

Step 3: Configure styles

  1. In the Style pane on the right of the mobile application editor, configure the display styles of the Weather component.

    Parameter

    Description

    Basic settings

    Configures the number of days and the display direction for the weather forecast.

    Location information

    Configures the location information and its appearance.

    Current temperature

    Configures the visibility and appearance of the current temperature.

    Global style

    Configures the component's global styles, including background, font, and borders.

  2. Adjust the component's height, width, and position on the page. For more information, see Common styles.

Step 4: Configure interactive actions

  1. On the right side of the mobile application editor, click Interaction. Then, click Add Interaction to set the Event and Action.

    This component supports the Value Change event. For example, when the component's Value Change event occurs, you can execute the Set Device Property action. This sends an instruction to a device to modify one of its property values.

    For more information, see Interaction configuration.

  2. Preview and debug the component's data and effects. For more information, see Preview and debug.

Previous：Basic componentsNext：Rectangle