WY音乐播放器制作（1）

• 完整代码地址
  https://github.com/Kevin5979/WYmusic.git

初始化项目

1. 初始化HTML中的代码

2. 利用rem+视口释放的方式来适配移动端

注意点: 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的，所以会报错，如果想解决这个问题，那么我们需要再借助一个loader, html-loader

3. 借助postcss-pxtorem实现自动将px转换成rem

4. 借助webpack实现CSS3/ES678语法的兼容

5. 借助fastclick解决移动端100~300ms的点击事件延迟问题

6. 初始化默认的全局样式

注意点: 在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化

​ 由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化

7. 注意初始化的文件需要存放导致的位置，和相关的安装和配置（html-loader，postcss-pxtorem，fastclick）

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import fastclick from 'fastclick'
import './assets/css/base.scss'

// 解决移动端100~300ms延迟的问题
fastclick.attach(document.body)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

首页制作

效果图

首页

首页2

---

1. 整体换肤效果的实现（localStorage）

1. 定义scss的mixin函数，根据头部的data-theme主题，设置背景颜色、文字颜色
2. 主题存入localStorage

@mixin bg_color(){
  background: $background-color-theme;
  // 属性选择器
  [data-theme=theme1] & {
    background: $background-color-theme1;
  }
  [data-theme=theme2] & {
    background: $background-color-theme2;
  }
}

  
  // 存入localStorage
  localStorage.setItem("theme", this.themes[this.index]);
  
  mounted() {
    // 获取设置主题
    document.documentElement.setAttribute(
      "data-theme",
      localStorage.getItem("theme")
    );
  }

2. 图标适应屏幕

1. 根据html标签的data-dpr属性来设置大图/中图/小图/字体适应大小不变

主题2

/*根据dpr计算font-size*/
@mixin font_dpr($font-size){
  font-size: $font-size;
  [data-dpr="2"] & { font-size: $font-size * 2;}
  [data-dpr="3"] & { font-size: $font-size * 3;}
}

3.顶栏的封装

顶栏

4.导航栏的路由切换（vue-router）+ 路由懒处理

导航

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 懒加载处理
const Recommend = () => import("../views/recommend/Recommend")
const Singer = () => import("../views/singer/Singer")
const Rank = () => import("../views/rank/Rank")
const Search = () => import("../views/search/Search")

const routes = [
  {
    path: '',
    // 默认路由
    redirect: '/recommend'
  },
  {
    path: '/recommend',
    component: Recommend
  },
  {
    path: '/singer',
    component: Singer
  },
  {
    path: '/rank',
    component: Rank
  }
  ,{
    path: '/search',
    component: Search
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

5.网络请求的封装（axios）

1. 封装get / post 请求
2. 管理请求请求地址

import axios from 'axios'

// 进行一些全局配置
axios.defaults.baseURL = 'http://localhost:3000/'
axios.defaults.timeout = 5000

// 封装自己的get/post方法

export default {
  get: (path = "", data = {}) => {
    return new Promise((resolve, reject) => {
      axios.get(path, {
        params: data
      }).then(response => {
        resolve(response.data);
      }).catch(error => {
        reject(error);
      })
    })
  },
  post: (path = "", data = {}) => {
    return new Promise((resolve, reject) => {
      axios.get(path, data).then(response => {
        resolve(response.data);
      }).catch(error => {
        reject(error);
      })
    })
  }
}

// 专门用于管理请求请求地址
import Network from './network'

// 轮播图
export const getBanner = () => Network.get('banner?type=2')

6.轮播图的展示（vue-awesome-swiper）

轮播图

1. 此处踩坑：swiper的bug, 如果数据时网络获取的，轮播图到最后一张后停止轮播

2. 解决：swiper标签加上v-if="数据.length > 0"条件解决

3. 再次踩坑：报组件未定义错误

4. 解决：导入Swiper,SwiperSlide 首字母必须大写,注册组件也需要大写

5. 再再大意：必须安装swiper,vue-awesome-swiper 两个库

7.个性化展示（组件复用，过滤器使用）

推荐歌单

最新专辑

1. 两个组件样式一样，可以封装成一个组件（personalized），传入不同的数据渲染

8.最新音乐展示

最新音乐

1. 数据处理（filters）

9.图片懒加载处理（vue-lazyload）

1. 解释：进入主页，系统默认会加载所有的图片，而用户只能看到一屏的图片，造成加载缓慢，用户体验不好
2. 安装：npm install vue-lazyload --save
3. 在main.js注册、使用

// 导入 vue-lazyload
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  // 设置占位图片
  loading: require('./assets/images/placeholder.png')
})

4. 将需要懒加载图片的 :src 修改为 v-lazy

10.滚动效果（IScroll）

1. 利用IScroll插件来滚动

2. 遇坑：拖拽没效果

   问题：区域高度和内容高度等高，没有滑动效果

   解决：设置区域内容与需要滚动的视口区域等高

3. 再遇坑：拖拽卡顿

   问题：元素原生的滚动事件有冲突

   解决：html,body标签选择器 加上 overflow: hidden; touch-action: none;

11.拖拽组件的封装（IScroll、slot 、MutationObserver）

1. 利用具名插槽来封装滚动组件

2. 踩坑：不能滚动

   原因：由于数据是网络加载过来的，在IScroll计算高度是，高度不正确

   处理1：利用计时器延时几秒，再计算高度。缺点：加载时间不能确定，用户需要等待，体验差，不推荐

   处理2：利用MutationObserver构造函数，监听元素的改变，重新计算高度

3. 踩坑：滚动卡顿

   解决：禁用其他事件

   scrollX: false,

   scrollY: true,

   disablePointer: true,

   disableTouch: false,

   disableMouse: true

END