基于 OpenHarmony 开发的玻璃拟态的天气应用(1)项目介绍及项目的初始搭建

项目介绍

项目描述

本项目使用了 API9 作为开发版本,该版本是一个较新的版本,在这个项目中我会展示该项目的主要功能构成,主要是展示玻璃拟态的具体开发代码和开发思路,本项目偏向前端开发,后端使用的是和风天气的免费天气 API.

项目展示

项目设计思路

本项目的设计风格主要学习了 IOS 自带的天气软件,IOS 自带天气的风格就是这种玻璃拟态的风格,个人认为这种风格还是非常好看的,所以本项目大部分代码都是为了实现与其相近的效果

项目主要组件

当前天气组件 NowTemp

该组件显示的内容有以下几部分:当前城市,当前天气,天气描述,今日最高温和最低温

今日空气质量组件 AirQuality

该组件展示了今日的空气质量,主要以展示 AQI 的方式来展示空气质量

卡片组件

该组件包含了数个卡片,卡片中的信息是今日天气指数的一些相关信息,如钓鱼指数等,目的是直观的展示今日天气适合做什么.

搭建项目

使用 DevEco 创建新的项目

在创建工程的页面直接选择空项目(如图)

本项目使用的 SDK 如下

初始基本布局

创建项目后,会自动跳转到初始页

点击右侧的 Previewer 即可预览该页面的效果,方便调试代码,在此页面预览的话可以看到一个 Hello World

构建基本页面

当前的布局是居中布局,删除父布局 Row,为子布局添加.justifyContent(FlexAlign.Start)来使布局变为从上到下的布局

修改后的代码如下:

@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Column() {      Text('当前天气')        .fontSize(50)        .fontWeight(FontWeight.Bold)    }    .width('100%')    .justifyContent(FlexAlign.Start)  }}

修改后的页面为:

在当前页面先使用 Text 大概构筑一个页面以便后面替换

构筑后的代码如下

@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Column() {      Text('当前天气')        .fontSize(50)        .fontWeight(FontWeight.Bold)      Text('今日空气质量')        .fontSize(50)        .fontWeight(FontWeight.Bold)      Text('卡片组件')        .fontSize(50)        .fontWeight(FontWeight.Bold)    }    .width('100%')    .justifyContent(FlexAlign.Start)  }}

页面的效果如下

总结

当前已经大概构筑了一个页面,之后我会构建当前天气的组件,并编写对应的请求来完成天气的获取