# 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>
```

![previewe.png](D:/Projects/HarmonyOS/pretty_weather/doc/base.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 授权许可。