WY音乐播放器制作（4）

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

本章主要填坑

IOS中无法进行歌曲预加载

Player组件

• IOS中系统不会自动加载歌曲,所以oncanplay永远不会执行

• 解决方案：如何监听IOS中歌曲已经准备好了,通过ondurationchange事件来监听

• ondurationchange 当歌曲加载完成后执行

手机预览项目没有控制台展示

main.js

• 解决方案：为了能在手机中调试项目，添加 vconsole 插件

import VConsole from 'vconsole'

const vconsole = new VConsole()
Vue.use(vconsole)

路径的简写

vue.config.js

module.exports = {
  /* 部署应用包的基本URL, 避免出现打包后项目找不到资源问题 */
  publicPath: './',
  configureWebpack: {
    //配置别名,默认src为@,修改后需要重新编译才能生效
    resolve: {
      alias: {
        'api': '@/api',
        'assets': '@/assets',
        'components': '@/components',
        'router': '@/router',
        'store': '@/store',
        'views': '@/views',
        'tools': '@/tools',
        'plugin': '@/plugin'
      }
    }
  }
}

保持页面状态，避免每次进入页面都需要加载一次，优化性能

App.vue

• 问题：每次进入页面，都需要请求数据，用户体验不好，而且切换页面之后，之前页面不能保持状态

• 解决方案：使用 keep-alive 组件，保持某些页面状态

处理空白页面，优化用户体验

main.js

• 问题：由于数据没有请求过来，出现页面空白现象，用户体验差

• 解决方案：添加一个加载的插件，每次请求数据，在数据没有回来之前，展示加载插件

// 导入自定义的插件
import Loading from 'plugin/loading/index'

// 使用
Vue.use(Loading, {
 title: '正在加载...'
})

api/network.js

• 在请求数据中添加响应和拦截器，然后使用加载的插件

let count = 0
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 count++
 Vue.showLoading()
 return config
}, function (error) {
 // 对请求错误做些什么
 Vue.hiddenLoading()
 return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
 // 对响应数据做点什么
 count--
 if (count === 0) {
   Vue.hiddenLoading()
 }
 return response
}, function (error) {
 // 对响应错误做点什么
 Vue.hiddenLoading()
 return Promise.reject(error)
})

打包上传到服务器，发现有些点击事件失效

ScrollView

• 问题：发现在ScrollView组件包裹的内容中，点击事件都失效了（在IScroll包裹中失效）

• 解决方案：移动端添加 click: true,tap: true,mouseWheel: true 使点击事件生效

    mounted() {
      // 这里能拿到页面元素
      this.iscroll = new IScroll(this.$refs.wrapper, {
        click: true,
        tap: true,
        mouseWheel: true,
        scrollbars: false, // 隐藏滚动条
        probeType: 3, // 监听滚动偏移位
        // 解决拖拽卡顿问题(禁用其他事件)
        scrollX: false,
        scrollY: true,
        disablePointer: true,
        disableTouch: false,
        disableMouse: true
      });
    }
  

打包后上传到服务器刷新报错

解决方案：

• 不在使用history路由模式，使用hash模式，但是，使用hash模式不利于SEO
• 依旧使用history路由模式，但是需要后端人员处理

SPA页面优缺点

SPA优点

• 有良好的交互体验，不会重新加载整个网页, 只是局部更新

• 前端负责页面呈现和交互, 后端负责数据

• 减轻服务器压力，只用处理数据不用处理界面

• 共用一套后端程序代码

SPA缺点

• SEO难度较高，只有一个界面, 无法针对不同的内容编写不同的SEO信息

• 初次加载耗时多，为实现单页Web应用功能及显示效果，需要在加载页面的时候将所有JavaScript、CSS统一加载，在Vue中可以使用按需加载解决

SPA页面预渲染

• 为了解决首次请求时间过长，SEO难的问题

• 安装插件：vue-cli-plugin-prerender-spa、prerender-spa-plugin

  vue.config.js

  module.exports = {
    pluginOptions: {
      prerenderSpa: {
        registry: undefined,
          /* 这里填入需要分离的路由 */
        renderRoutes: [
          '/',
          '/recommend',
          '/singer',
          '/rank',
          '/search',
          '/account',
          '/detail'
        ],
        useRenderEvent: true,
        headless: true,
        onlyProduction: true
      }
    }
  }
  

• 打包之后发现dist文件夹中有 7 个 html文件

SPA页面SEO优化

• 问题：我们已经用预渲染将组件分离成不同的html文件了，那么如何添加SEO信息呢?

• 解决方案：安装vue-meta-info插件，给每个打包的html文件的头部添加SEO信息

  main.js

  import MetaInfo from 'vue-meta-info'
  
  Vue.use(MetaInfo)
  

• 新建文件来存储管理SEO信息

  vue-meta-info.js

  export default {
    recommend: {
      title: '我是recommend',
      meta: [
        {
          name: 'keyWords',
          content: '关键字1,关键字1,关键字1'
        },
        {
          name: 'description',
          content: '这是一段网页的描述1'
        }
      ]
    },
      //...
  }
  

• 给每个路由组件添加信息

  import MetaInfo from "../../../vue-meta-info";
  export default {
    name: "xxx",
    MetaInfo: MetaInfo.recommend,
      // ...
  }
  

• 删除到public/index.html中头部的SEO

解决预渲染打包后标签重复问题

vue.config.js

• 问题：预渲染打包后出现两个标签

  由于node是模拟浏览器运行环境，计算的尺寸出现问题，打包后的重复标签的值不正确，刷新后，重复的标签发生作用，导致页面样式排版达不到预期

• 解决方案：查找到重复的标签，并替换掉

postProcess: route => {
   // 预渲染内容写入之前的额外操作
   let reg = //gi
   let res = route.html.match(reg)
   route.html = route.html.replace(res[1], '')
}

打包上架后加载插件出现重复

vue.config.js

• 问题：和标签重复是一个问题

• 解决方案：这里使用jsdom插件来处理

• 安装jsdom

  const jsdom = require('jsdom')
  const { JSDOM } = jsdom
  
  postProcess: route => {
    // 预渲染内容写入之前的额外操作
    // 1.根据字符串创建一个网页
    let html = new JSDOM(route.html)
    // 2.从创建好的网页中拿到document对象
    let dom = html.window.document
    // 3.找到对应的元素, 删除对应的元素
    let loadingEle = dom.querySelector('.container')
    dom.body.removeChild(loadingEle)
  
    route.html = html.serialize()
    return route
    }
  }
  

END