ceshi

技术资源汇总(杭电支持版)/7.网络应用开发/7.2.2进阶(小项目).md

@@ -0,0 +1,102 @@
+# 进阶(小项目)
+
+::: warning 📌
+
+如果是有一定基础的同学，可以考虑采用一些辅助工具(React / Vue / jQuery 等)，样式方面也可以采用你喜欢的组件库(Antd / ElementUI / Bootstrap 等)实现。
+
+:::
+
+## 🌥 天气组件
+
+如果你曾经用过助手的小程序，你可能会在首页看到这样的天气卡片：
+
+![](https://cdn.xyxsw.site/boxcnTNJhtqw6Km24fKgAnjZtBS.png)
+
+当然了，平时大家也会用到各种天气 APP
+
+![](https://cdn.xyxsw.site/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/weather-api/)
+  - [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)
+
+## 🎶 音乐播放器
+
+![](https://cdn.xyxsw.site/boxcnRaBolh8i2FkoIJW69a5g3e.png)
+
+![](https://cdn.xyxsw.site/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)