# 进阶部分

如果是有一定基础的同学，可以考虑采用一些辅助工具(React / Vue / jQuery 等)，样式方面也可以采用你喜欢的组件库(Antd / ElementUI /<strong> </strong>Bootstrap 等)实现。

## 🌥 天气组件

如果你曾经用过助手的小程序，你可能会在首页看到这样的天气卡片：

![](static/boxcnTNJhtqw6Km24fKgAnjZtBS.png)

当然了，平时大家也会用到各种天气 APP

![](static/boxcnUuqMoTjiOH9NSdYx4GCGme.png)

那么，让我们动手实现一个天气卡片吧~

### 基本要求

- 通过网络接口请求得到天气数据

  - 天气 api 可自行获取，各种服务商会提供注册免费使用的天气接口，如高德和彩云
  - 能够获取杭州当前天气和周边基本信息即可
- 制作一套简易的天气卡片，展示实时天气和天气预报

  - 实时天气

    - 显示当前的基本信息，如城市地区、时间
    - 显示当前的气温和天气现象状态
    - 制作一个相关信息卡片，显示当前风向、湿度等数据
    - 相关样式可以参考主流天气组件，要求美观即可，可以适当增加 icon 和图表增加美观度
  - 天气预报

    - 通过列表显示未来几天天气数据，如温度、风向等
    - 相关样式同时可以参考主流天气组件，如未来天气可以通过折线图直观表示

### 额外发挥

- 根据你的数据源，可以展示更多的天气数据，如穿衣建议、舒适度等
- 增加定位功能，可以使用原生 [Geolocation ](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API)API 或其他方式，可以通过简单的地图（借助各种地图库）展示当前位置
- 如有需要，不妨试试前沿的浏览器特性，只要是能够在最新版 Chrome Canary 通过 flags 开启的特性均可使用，如容器查询([Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries))、[CSS Layout API](https://drafts.css-houdini.org/css-layout-api)。

### 你可能需要的资料

- icon 相关

  - [icon 图标库](https://www.iconfont.cn/)
  - [优雅地使用 icon](https://juejin.cn/post/6844903517564436493)
  - [iconify](http://icon-sets.iconify.design/)
- 请求相关

  - [fetch 的使用](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
  - [高德地图天气 API](https://lbs.amap.com/api/javascript-api/guide/services/weather)
  - [彩云天气 API](https://docs.caiyunapp.com/docs/intro)
  - [MDN Geolocation API Docs](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API)
- 图表相关

  - [Chart.js](https://www.chartjs.org/)
  - [G2Plot 开箱即用的图表库](https://g2plot.antv.vision/zh)

## 🎶 音乐播放器

![](static/boxcnRaBolh8i2FkoIJW69a5g3e.png)

![](static/boxcnJ13CDzxp9lwEtGivTuJ4nh.png)

相信你平时或多或少都会听音乐，那么你是喜欢用网易云还是 QQ 音乐呢？或者是系统自带的音乐播放器？不过，其实你也可以自己做一个音乐播放器，来满足你对听音乐这件事的所有幻想，听起来是不是很酷呢 😎~那么，来试试看吧！

### 基本要求

- 通过网络接口请求得到音乐数据
- 支持播放至少两首音乐
- 可根据名字对音乐进行检索与选择
- 音乐播放器可以是小组件形式，也可以是整页形式。播放器拥有以下基本要素：

1. 播放、暂停、上一首、下一首
2. 音乐封面
3. 显示歌曲名称、歌手名称
4. 显示音乐播放进度

### 额外发挥

- 可调节播放器音量
- 为音乐添加滚动歌词
- 对音乐进行评论
- 支持音乐的收藏与分享
- 支持用户上传本地音乐

### 你可能需要的资料

- icon 相关

  - [icon 图标库](https://www.iconfont.cn/)
  - [优雅地使用 icon](https://juejin.cn/post/6844903517564436493)
  - [iconify](http://icon-sets.iconify.design/)
- 请求相关

  - [fetch 的使用](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
  - [音乐资源 api](https://www.free-api.com/doc/369)