# 高德天气 Weather

## 使用场景

大盘/屏的天气状况展示



## 预览

![高德天气 Weather](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580719377413-bec5b897-76f7-4a0a-ad6e-78609806a5fc.png) 



## 演示

<!--before-content-->

## 基础用法

```js
import { Text, config } from '@linkdesign/screen';

const { Weather } = Text;
const { _cssPrefix } = config;

const header = {
  backgroundColor: "#1f3b6d",
  display: "flex",
  alignItem: "center",
  height: 56,
  padding: "0 24px",
};

class App extends React.Component {
  render() {
    return (
      <div data-theme="dark" className={`${_cssPrefix}main-body`} style={header}>
        <Weather
          params={{
            key: '56a763fbaeb1992f6f00a7c4eed3cc82',
            city: '110101',
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />);
```

<!--after-content-->



### API

| 参数名            | 说明                     | 必填 | 类型   | 默认值                               | 备注                                                         |
| ----------------- | ------------------------ | ---- | ------ | ------------------------------------ | ------------------------------------------------------------ |
| className         | 类名                     | N    | String | -                                    |                                                              |
| textOptions       | 文本配置                 | N    | Array  | ```{textStyle: {fontWeight: 400}}``` |                                                              |
| [params](#params) | 高德天气服务请求参数配置 | Y    | Object | -                                    | [高德天气查询 api文档](https://lbs.amap.com/api/webservice/guide/api/weatherinfo) |

#### params

```typescript
// 高德天气服务请求参数配置
params: {
	key: string; // 请求服务权限标识 用户在高德地图官网申请web服务API类型KEY
  city: string; // 城市编码 输入城市的adcode，adcode信息可参考城市编码表
  extensions?: 'base' | 'all'; // 气象类型 可选值：base/all  base: 返回实况天气 all: 返回预报天气
  output?: 'JSON' | 'XML'; // 返回格式 可选值：JSON,XML
  interval?: number; // 请求频率 单位毫秒 默认20分钟
};
```



## TODO List

- [ ] ......