music-app项目总结

2018-01-03 本文已影响378人以手画圆心

1.关于项目依赖配置

babel-runtime   //对es6语法做一些转义,(供编译模块复用工具函数)
fastclick       //解决移动端点击300毫秒延迟问题
babel-polyfill  //对es6的一些api做一些转义，比如promise

2.问题总结

1.当出现让你一直安装插件，没有尽头的时候：
        删除node_modules,删除package.json里刚安装的插件
        npm i 
        npm run dev
       查看你的错误
2.sublime3 stylus高亮的方法
   安装插件stylus

3.$refs坑：轮播图刷新出错问题

问题描述：推荐页面轮播图一刷新，变成竖直排列，在代码中随意操作保存后，才正常显示
解决：https://www.jianshu.com/p/bd39302f2492

4.后端代理cannot get /api/getDiscList 404错误

这个主要是由于旧版本dev-server.js和新版本webpack.dev.conf.js导致得，现在配置dev-server直接转移到了webpack.dev.conf中，下面看代码：

在webpack.dev.conf.js编辑
// 后端代理
const express = require('express')
const axios = require('axios')
const app = express()
const apiRoutes = express.Router()
app.use('/api', apiRoutes)

在devserver对象中添加
before(app){
  app.get('/api/getDiscList', function (req, res) {
    let url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  })
},

//截图

image.png

5.（不同浏览器）设置样式封装

let elementStyle = document.createElement('div').style
// 运营商
let vendor = (() => {
  let transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }
// 遍历运营商
  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()

export function prefixStyle(style) {
  if (vendor === false) {
    return false
  }
  if (vendor === 'standard') {
    return style
  }
  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

这样在使用的时候调用（调用之前需要进入组件）：

import {prefixStyle} from 'common/js/dom'
const transform = prefixStyle('transform')

this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`

这一句即可省略
// this.$refs.layer.style['webkitTransform'] = `translate3d(0,${translateY}px,0)`

6.做音乐内核出现如下错误

Uncaught (in promise) DOMException: 
The play() request was interrupted by a new load request.

原因：
当触发mutation 的SET_PLAYING_STATE的时候，同时触发了watch(),watch()中的audio.play()也被触发了，所以，此时应用this.$nextTick包装一层

7.报错 [Do not mutate vuex store state outside mutation handlers]

(意思是提醒：不要在mutaton函数之外修改，一般是因为在action中修改了state的原因)

解决方案1：改为非严格模式
原因：
开启严格模式，仅需在创建 store 的时候传入 strict: true：
const store = new Vuex.Store({
// ...
strict: true
})
在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
解决：改为非严格模式：strict: false

解决方案2：利用slice()