2 lines
7.3 KiB
JavaScript
2 lines
7.3 KiB
JavaScript
import{_ as e,c as l,o as a,a4 as r}from"./chunks/framework.DtvhUNIn.js";const _=JSON.parse('{"title":"进阶(小项目)","description":"","frontmatter":{},"headers":[],"relativePath":"技术资源汇总(杭电支持版)/7.网络应用开发/7.2.2进阶(小项目).md","filePath":"技术资源汇总(杭电支持版)/7.网络应用开发/7.2.2进阶(小项目).md"}'),i={name:"技术资源汇总(杭电支持版)/7.网络应用开发/7.2.2进阶(小项目).md"},t=r('<h1 id="进阶-小项目" tabindex="-1">进阶(小项目) <a class="header-anchor" href="#进阶-小项目" aria-label="Permalink to "进阶(小项目)""></a></h1><div class="warning custom-block"><p class="custom-block-title">📌</p><p>如果是有一定基础的同学，可以考虑采用一些辅助工具(React / Vue / jQuery 等)，样式方面也可以采用你喜欢的组件库(Antd / ElementUI / Bootstrap 等)实现。</p></div><h2 id="🌥-天气组件" tabindex="-1">🌥 天气组件 <a class="header-anchor" href="#🌥-天气组件" aria-label="Permalink to "🌥 天气组件""></a></h2><p>如果你曾经用过助手的小程序，你可能会在首页看到这样的天气卡片：</p><p><img src="https://cdn.xyxsw.site/boxcnTNJhtqw6Km24fKgAnjZtBS.png" alt=""></p><p>当然了，平时大家也会用到各种天气 APP</p><p><img src="https://cdn.xyxsw.site/boxcnUuqMoTjiOH9NSdYx4GCGme.png" alt=""></p><p>那么，让我们动手实现一个天气卡片吧~</p><h3 id="基本要求" tabindex="-1">基本要求 <a class="header-anchor" href="#基本要求" aria-label="Permalink to "基本要求""></a></h3><ul><li><p>通过网络接口请求得到天气数据</p><ul><li>天气 api 可自行获取，各种服务商会提供注册免费使用的天气接口，如高德和彩云</li><li>能够获取杭州当前天气和周边基本信息即可</li></ul></li><li><p>制作一套简易的天气卡片，展示实时天气和天气预报</p><ul><li><p>实时天气</p><ul><li>显示当前的基本信息，如城市地区、时间</li><li>显示当前的气温和天气现象状态</li><li>制作一个相关信息卡片，显示当前风向、湿度等数据</li><li>相关样式可以参考主流天气组件，要求美观即可，可以适当增加 icon 和图表增加美观度</li></ul></li><li><p>天气预报</p><ul><li>通过列表显示未来几天天气数据，如温度、风向等</li><li>相关样式同时可以参考主流天气组件，如未来天气可以通过折线图直观表示</li></ul></li></ul></li></ul><h3 id="额外发挥" tabindex="-1">额外发挥 <a class="header-anchor" href="#额外发挥" aria-label="Permalink to "额外发挥""></a></h3><ul><li>根据你的数据源，可以展示更多的天气数据，如穿衣建议、舒适度等</li><li>增加定位功能，可以使用原生 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API" target="_blank" rel="noreferrer">Geolocation </a>API 或其他方式，可以通过简单的地图（借助各种地图库）展示当前位置</li><li>如有需要，不妨试试前沿的浏览器特性，只要是能够在最新版 Chrome Canary 通过 flags 开启的特性均可使用，如容器查询(<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries" target="_blank" rel="noreferrer">Container Queries</a>)、<a href="https://drafts.css-houdini.org/css-layout-api" target="_blank" rel="noreferrer">CSS Layout API</a>。</li></ul><h3 id="你可能需要的资料" tabindex="-1">你可能需要的资料 <a class="header-anchor" href="#你可能需要的资料" aria-label="Permalink to "你可能需要的资料""></a></h3><ul><li><p>icon 相关</p><ul><li><a href="https://www.iconfont.cn/" target="_blank" rel="noreferrer">icon 图标库</a></li><li><a href="https://juejin.cn/post/6844903517564436493" target="_blank" rel="noreferrer">优雅地使用 icon</a></li><li><a href="http://icon-sets.iconify.design/" target="_blank" rel="noreferrer">iconify</a></li></ul></li><li><p>请求相关</p><ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch" target="_blank" rel="noreferrer">fetch 的使用</a></li><li><a href="https://lbs.amap.com/api/javascript-api/guide/services/weather" target="_blank" rel="noreferrer">高德地图天气 API</a></li><li><a href="https://docs.caiyunapp.com/weather-api/" target="_blank" rel="noreferrer">彩云天气 API</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API" target="_blank" rel="noreferrer">MDN Geolocation API Docs</a></li></ul></li><li><p>图表相关</p><ul><li><a href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></li><li><a href="https://g2plot.antv.vision/zh" target="_blank" rel="noreferrer">G2Plot 开箱即用的图表库</a></li></ul></li></ul><h2 id="🎶-音乐播放器" tabindex="-1">🎶 音乐播放器 <a class="header-anchor" href="#🎶-音乐播放器" aria-label="Permalink to "🎶 音乐播放器""></a></h2><p><img src="https://cdn.xyxsw.site/boxcnRaBolh8i2FkoIJW69a5g3e.png" alt=""></p><p><img src="https://cdn.xyxsw.site/boxcnJ13CDzxp9lwEtGivTuJ4nh.png" alt=""></p><p>相信你平时或多或少都会听音乐，那么你是喜欢用网易云还是 QQ 音乐呢？或者是系统自带的音乐播放器？不过，其实你也可以自己做一个音乐播放器，来满足你对听音乐这件事的所有幻想，听起来是不是很酷呢 😎~那么，来试试看吧！</p><h3 id="基本要求-1" tabindex="-1">基本要求 <a class="header-anchor" href="#基本要求-1" aria-label="Permalink to "基本要求""></a></h3><ul><li>通过网络接口请求得到音乐数据</li><li>支持播放至少两首音乐</li><li>可根据名字对音乐进行检索与选择</li><li>音乐播放器可以是小组件形式，也可以是整页形式。播放器拥有以下基本要素：</li></ul><ol><li>播放、暂停、上一首、下一首</li><li>音乐封面</li><li>显示歌曲名称、歌手名称</li><li>显示音乐播放进度</li></ol><h3 id="额外发挥-1" tabindex="-1">额外发挥 <a class="header-anchor" href="#额外发挥-1" aria-label="Permalink to "额外发挥""></a></h3><ul><li>可调节播放器音量</li><li>为音乐添加滚动歌词</li><li>对音乐进行评论</li><li>支持音乐的收藏与分享</li><li>支持用户上传本地音乐</li></ul><h3 id="你可能需要的资料-1" tabindex="-1">你可能需要的资料 <a class="header-anchor" href="#你可能需要的资料-1" aria-label="Permalink to "你可能需要的资料""></a></h3><ul><li><p>icon 相关</p><ul><li><a href="https://www.iconfont.cn/" target="_blank" rel="noreferrer">icon 图标库</a></li><li><a href="https://juejin.cn/post/6844903517564436493" target="_blank" rel="noreferrer">优雅地使用 icon</a></li><li><a href="http://icon-sets.iconify.design/" target="_blank" rel="noreferrer">iconify</a></li></ul></li><li><p>请求相关</p><ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch" target="_blank" rel="noreferrer">fetch 的使用</a></li><li><a href="https://www.free-api.com/doc/369" target="_blank" rel="noreferrer">音乐资源 api</a></li></ul></li></ul>',25),o=[t];function n(h,s,c,p,u,d){return a(),l("div",null,o)}const b=e(i,[["render",n]]);export{_ as __pageData,b as default};
|