# OpenHarmany-Pretty-Weather

**Repository Path**: qiezisoftware/openharmany-pretty-weather

## Basic Information

- **Project Name**: OpenHarmany-Pretty-Weather
- **Description**: 一个基于 OpenHarmony 下的 JavaScript 天气组件。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-09-19
- **Last Updated**: 2021-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OpenHarmany-Pretty-Weather

一个基于 OpenHarmony 下的 JavaScript 天气组件。

本项目是基于 OpenHarmony 项目，为参加 [OpenHarmony 组件开发大赛](https://gitee.com/gitee-community/openharmony_components) 的作品，请注意本项目不是 HarmonyOS 项目。



## 项目介绍

* 项目名称：OpenHarmany-Pretty-Weather
* 项目源地址：[https://gitee.com/qiezisoftware/openharmany-pretty-weather](https://gitee.com/qiezisoftware/openharmany-pretty-weather)
* 开发环境：OpenHarmony-SDK-6，DevEco Studio 2.2.0.200
* 项目作者和维护人：宋泽琦@茄子引擎
* 邮箱：zekisong@163.com



## 项目预览

1. 下载 OpenHarmany-Pretty-Weather 项目，启动 DevEco Studio 并打开工程。

2. 进入 entry->src->main->js->default->pages->index，打开 index.hml，点击最右侧 previewer 按钮进行预览。




## 使用说明

### 下载组件

[点击直接下载组件](https://gitee.com/qiezisoftware/openharmany-pretty-weather/attach_files/835811/download/pretty-weather.zip)，解压后拷贝到项目的 /entry/src/main/js/default/components/pretty-weather 目录中。

### 引入组件

在 hml 页面引用天气组件，将 name 属性设置为 pretty-weather。

```html
<element name="pretty-weather" src="../../components/pretty-weather/pretty-weather.hml"></element>
```

### 组件用法

引入天气组件后即可通过 `pretty-weather` 标签并结合一些属性来定制使用。

```html
<pretty-weather></pretty-weather>
```


## 示例功能

### 基本使用

```html
<!-- xxx.hml -->
<element name="pretty-weather" src="../../components/pretty-weather.hml"></element>

<div class="container">

    <pretty-weather
        address="汕尾城区" 
        date="11月2号"
        weather-img-name="sunny"
        weather="晴天"
        temperature="20"
        @tap-weather="clickWeather"
    ></pretty-weather>

</div>
```

![preview.png](./doc/preview.png)



## API

### Props

| 属性名称 | 值类型 | 默认值 | 描述 |
| ------- | ------ | ------ | --- |
| temperature | String | 25 | 温度的文本显示 |
| weather | String | 多云 | 天气的文本显示 |
| address | String | 深圳宝安区 | 天气地址 |
| weatherImg | String | 空 | 天气的图片 |
| weatherImgName | String | 空 | 当weatherImg为空时，选择组件自带的图片 |
| date | String | 10月1日 | 天气日期 |


### weatherImgName的值与对应的图片
| 值 | 图片 |
| ------- | ------ |
|big-snow |![big-snow](./doc/big-snow.png) |
|blizzard |![blizzard](./doc/blizzard.png) |
|cloudy |![cloudy](./doc/cloudy.png) |
|floating-dust |![floating-dust](./doc/floating-dust.png) |
|fog |![fog](./doc/fog.png) |
|haze |![haze](./doc/haze.png) |
|heavy-rain |![heavy-rain](./doc/heavy-rain.png) |
|light-rain |![light-rain](./doc/light-rain.png) |
|medium-rain|![medium-rain](./doc/medium-rain.png) |
|overcast |![overcast](./doc/overcast.png) |
|rain-snow|![rain-snow](./doc/rain-snow.png) |
|rainstorm |![rainstorm](./doc/rainstorm.png) |
|sand |![sand](./doc/sand.png) |
|sandstorm |![sandstorm](./doc/sandstorm.png) |
|shower |![shower](./doc/shower.png) |
|small-snow |![small-snow](./doc/small-snow.png) |
|snow |![snow](./doc/snow.png) |
|sunny |![sunny](./doc/sunny.png) |
|thunderstorm |![thunderstorm](./doc/thunderstorm.png) |


### Events

| 事件名称 | 说明 | 回调参数 |
| ------- | ---- | ------- |
| tapWeather | 点击整个组件触发 | {} |



## 开发资料参考

1. [OpenHarmany 应用开发-UI](https://www.openharmony.cn/pages/a121c2/#%E5%9F%BA%E7%A1%80%E8%83%BD%E5%8A%9B)

2. [OpenHarmany 应用开发-JS参考规范](https://www.openharmony.cn/pages/186340/)



## 版权和许可信息

OpenHarmany-pretty-Weather 经过 MulanPSL-2.0 授权许可。