Vueファミリーバケツベースのモバイル音楽WebApp

10065 ワード
vue
GitHub: https://github.com/bxm0927/vue-music-webapp
プロジェクトのプレゼンテーションアドレス:https://bxm0927.github.io/vue-music-webapp/dist/(GitHub Pagesではjsonpで要求されたデータは正常にレンダリングされますが、nodeサービスがないためaxiosで要求されたデータは正常にレンダリングされません)
Vueファミリーバケツ(2.x)に基づいて作成されたモバイル端末音楽WebAppは、オリジナルのモバイル端末音楽Appに匹敵し、プロジェクトが完備し、機能が完備し、UIが美しく、インタラクティブが一流である.
テクノロジースタック
【先端】
  • Vue:ユーザインタフェースを構築するためのMVVMフレームワーク.その核心は応答のデータバインディングとグループシステム部品
    • である.
  • vue-router:単一ページアプリケーションに提供されるルーティングシステムであり、プロジェクトがオンラインになる前にLazy Loading Routes技術を用いて非同期ロード最適化性能
    • を実現する.
  • vuex:Vue集中状態管理は、複数のコンポーネントが特定の状態を共有する場合に便利です.
  • vue-lazyload:サードパーティ製ピクチャリロードライブラリ、最適化ページロード速度
  • better-scroll:iscrollの最適化版により、モバイル端末のスライド体験がよりスムーズになります.
  • Sass(Scss):cssプリコンパイルプロセッサ
  • ES6:ECMAScriptの次世代文法、モジュール化、解構賦値、Promise、Classなどの方法は
    • で非常に良いです.
    【後端】
  • Node.js:Expressによるローカルテストサーバ
  • jsonp:サービス側通信.QQ音楽(モバイル端末)データ
    • をキャプチャする
  • axios:サービス側通信.結合ノードjsエージェントバックエンドリクエスト、QQ音楽(PC側)データ
    • をキャプチャ
    【自動構築およびその他のツール】
  • vue-cli:Vue足場ツール、クイック初期化プロジェクトコード
  • eslint:コードスタイルチェックツール、規範コード書写
  • vConsole:モバイル側デバッグツール、モバイル側出力ログ
    • 収穫する
  • は、他のプロジェクトで多重化可能な10+個の基礎コンポーネント、15+個のビジネスコンポーネント
    • のVue汎用コンポーネントのセットをまとめた.
  • 一般的なSCSS mixinライブラリ
    • をまとめた
  • 一般的なJSツールライブラリ
    • をまとめた
  • コンポーネント化、モジュール化開発がもたらす便利さを体得する
  • は、オブジェクトをクラス(ES 6 class)にカプセル化する利便性と、ファクトリ方式を利用してクラスインスタンス
    • を初期化することを体得する.
  • 学会jsによるトランジション効果およびアニメーション効果の作成良好なユーザインタラクティブ体験
    • TODO
  • 歌曲データはすべてQQ音楽から来て、インタフェースは変えてjsonpとaxiosコード
    • を修正するかもしれません
  • プロジェクトのアプリケーションレベルの状態は多くない(10個程度)ため、action、mutation、およびgettersを個別のファイルに分割していない.しかし、このようなアーキテクチャは
    • のメンテナンスに不便である.
    実装の詳細
    メインページ:プレーヤーカーネルページ、推奨ページ、歌謡リスト詳細ページ、歌手ページ、歌手詳細ページ、ランキングページ、検索ページ、追加曲ページ、パーソナルセンターページなど.
    コアページ:プレーヤーカーネルページ
    コンポーネントツリー
    <app> ...................    
  <my-player> ...........           
  <my-header> ...........     
  <my-tab> ..............      
  <router-view> .........   
    <recommend> .........    
    <singer> ............    
    <rank> ..............    
    <search> ............
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    推荐页

    上部分是一个轮播图组件，使用第三方库 better-scroll 辅助实现，使用 jsonp 抓取 QQ音乐(移动端)数据

    下部分是一个歌单推荐列表，使用 axios + Node.js 代理后端请求，绕过主机限制 (伪造 headers)，抓取 QQ音乐(PC端)数据

    歌单推荐列表图片，使用图片懒加载技术 vue-lazyload，优化页面加载速度

    为了更好的用户体验，当数据未请求到时，显示 loading 组件

    推荐页 -> 歌单详情页

    由于歌手的状态多且杂，这里使用 vuex 集中管理歌手状态

    这个组件更加注重 UX，做了很多类原生 APP 动画，如下拉图片放大、跟随推动、ios 渐进增强的高斯模糊效果 backdrop-filter 等

    歌手页

    左右联动是这个组件的难点

    左侧是一个歌手列表，使用 jsonp 抓取 QQ音乐(PC端)歌手数据并重组 JSON 数据结构

    列表图片使用懒加载技术 vue-lazyload，优化页面加载速度

    右侧是一个字母列表，与左侧歌手列表联动，滚动固定标题实现

    歌手页 -> 歌手详情页

    复用歌单详情页，只改变传入的参数，数据同样爬取自 QQ音乐

    播放器内核页

    核心组件。用 vuex 管理各种播放时状态，播放、暂停等功能调用 audio API

    播放器可以最大化和最小化

    中部唱片动画使用第三方 JS 动画库 create-keyframe-animation 实现

    底部操作区图标使用 iconfonts。

    抽象了一个横向进度条组件和一个圆形进度条组件，横向进度条可以拖动小球和点击进度条来改变播放进度，圆形进度条组件使用 SVG 元素

    播放模式有：顺序播放、单曲循环、随机播放，原理是调整歌单列表数组

    歌词的爬取利用 axios 代理后端请求，伪造 headers 来实现，先将歌词 jsonp 格式转换为 json 格式，再使用第三方库 js-base64 进行 Base64 解码操作，最后再使用第三方库 lyric-parser对歌词进行格式化

    实现了侧滑显示歌词、歌词跟随进度条高亮等交互效果

    增加了当前播放列表组件，可在其中加入/删除歌曲

    排行页

    普通组件，没什么好说的

    排行页 -> 歌单详情页

    复用歌单详情页，没什么好说的

    搜索页

    抓数据，写组件，另外，根据抓取的数据特征，做了上拉刷新的功能

    考虑到数据量大且频繁的问题，对请求做了节流处理

    考虑到移动端键盘占屏的问题，对滚动前的 input 做了 blur() 操作

    对搜索历史进行了 localstorage 缓存，清空搜索历史时使用了改装过的 confirm 组件

    支持将搜索的歌曲添加到播放列表

    个人中心

    将 localstorage 中 “我的收藏” 和 “最近播放” 反映到界面上

    其他

    此应用的全部数据来自 QQ音乐，推荐页的歌单列表及歌词是利用 axios 结合 node.js 代理后端请求抓取的。

    全局通用的应用级状态使用 vuex 集中管理

    全局引入 fastclick 库，消除 click 移动浏览器300ms延迟

    页面是响应式的，适配常见的移动端屏幕，采用 flex 布局

    Build Setup

    # clone the repo into your disk.
$ git clone https://github.com/bxm0927/music-app.git

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run dev

# build for production with minification
$ npm run build

    License
    The code is available under the MIT license.
    C++オブジェクト間の割り当てとコピー構築関数
    vue動的echartsキャンバスサイズの設定&グラフデータの更新