基于Js的ArkUI构建HarmonyOS鸿蒙Next天气数据展示应用

基于Js的ArkUI构建HarmonyOS鸿蒙Next天气数据展示应用 索引

1 ArkUI（JS）的数据展示组件

• chart组件可以展示柱状图、线形图、量规图等图标展示。
  • bar：柱状图。
  • line：线形图。
  • gauge：量规图。
  • progress：进度类圆形图表（API5以上）。
  • loading：加载类圆形图表（API5以上）。
  • rainbow：占比类圆形图表（API5以上）。

chat组件支持append方法实现数据动态更新。
switch组件是选择开关，可以通过开关选择某个功能展示或关闭。switch组件支持change事件，当选中状态改变时触发该事件。

2 ArkUI（JS）的工程框架

• 文件结构

  • 在工程目录文件结构如下：

  • 其中pages文件夹下存放多个页面，每个页面由hml、css和js文件组成。

  • app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见app.js说明。

  • pages目录用于存放所有组件页面。

  • common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。

  • resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件。

  • i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。

  • 应用资源可通过绝对路径或相对路径的方式进行访问，绝对路径以"/“开头，相对路径以”./“或”…/"。

• 布局

  • 布局通过hml文件完成。

• 样式

  • 样式通过css文件完成。

• 事件响应

  • 事件响应通过 js文件完成。

3 天气数据图表展示应用

3.1 数据来源

• 天气数据来源使用中央气象局的天气预报数据，api接口如下：http://www.nmc.cn/rest/weather?stationid=｛城市代码｝

3.2 效果图展示

布局文件如下：

<div class="container">
    <div class="switch-block">
        <switch class="switch" 
                showtext="{{ showText }}"
                texton="{{ textOn }}"
                textoff="{{ textOff }}"
                allow-scale="{{allowScale}}"
                onchange="change">
        </switch>
        <text>七天天气</text>
    </div>
    <div class="chart-block">
        <text class="text-weather">最高温</text>
        <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}">
        </chart>
        <text class="text-date">日期</text>
    </div>
    <div class="bar-block">
        <text class="text-weather">温度</text>
        <chart class="data-bar" type="bar" ref="barchart" options="{{barOps}}" datasets="{{barData}}">
        </chart>
        <text class="text-date">日期</text>
    </div>
    <div class="progress_block">
        <chart class="progress-data" type="progress" effects="true"  ref="progchart" segments="{{progressData}}">
        </chart>
    </div>
    <div class="chart-action">
        <text>城市选择:</text>
        <select @change="changeFruit">
            <option value="武汉" selected>
                武汉
            </option>
            <option value="郑州">
                郑州
            </option>
            <option value="长沙">
                长沙
            </option>
        </select>
        <input type="button" value="获取天气" onclick="getData" width="20%">
    </div>
</div>

样式文件如下：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.switch-block {
    width: 98%;
    height: 50px;
}
.switch {
    text-padding: 10px; /* texton/textoff中最长文本两侧距离滑块边界的距离 */
    font-size: 20px;
    texton-color: #5F5F5F; /* 选中字体颜色 */
    textoff-color: #707070; /* 未选中字体颜色 */
}
.chart-block,
.bar-block{
    position: relative;
    width: 98%;
    border-radius: 5px;
    background-color: #E3F8F9;
}
.chart-data {
    margin: 10px 5px 10px;
    width: 100%;
    height: 200px;
}
.text-weather{
    position: absolute;
    top: 10px;
    left: 20px;
    width: 10px;
    font-size: 10px;
}
.text-date{
    position: absolute;
    font-size: 10px;
    bottom: 2px;
    right: 10px;
}
.chart-action {
    display: flex;
    flex-direction: row;
    font-size:20px;
}
.bar-block {
    margin-top: 10px;
}
.data-bar {
    width: 100%;
    height: 200px;
    margin: 10px 5px 10px;
}
.progress_block{
    position: relative;
    width: 98%;
    border-radius: 5px;
    background-color: #E3F8F9;
}
.progress-data {
    margin: 10px 5px 10px;
    width: 100%;
    height: 200px;
}
.progress_block,
.chart-action,
.bar-block {
    margin-top: 10px;
}