手撸手 完成网抑云音乐 开篇

小江和他自己
335 阅读1分钟
1 项目使用vue完成 此次的预编译器我使用的是scss
2 因为最近时间比较充足就打算写一写这个 也利于提升自己
3 开篇先从换肤功能开始 这个也是第一次做换肤功能的 所以 对于项目中有遇到或者正好私下想学的朋友 或许有帮助
4 换肤其实和国际化差不多 都是要将颜色提取成一个变量
项目搭建
  • 直接vuecli脚手架搭建即可 vue create wyymusic
1配置index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!--可以让部分国产浏览器默认采用高速模式渲染页面-->
  <meta name="renderer" content="webkit">
  <!--为了让 IE 浏览器运行最新的渲染模式下-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--SEO三大标签-->
  <title>网抑云音乐</title>
  <meta name="keywords"
    content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
  <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
  <!--
    apple-touch-icon: 是苹果私有的属性
    作用: 指定将网页保存到主屏幕上的时候的图标
    -->
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
  <link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png">
  <!--网页快捷图标-->
  <link rel="icon" href="./favicon.ico">
  <script>
    /*
      注意点:
      预渲染的本质就是在打包时就"模拟浏览器"提前访问路由对应的网页, 然后将访问的结果写入到.html文件中
      但是由于在打包时访问并不是通过"真实的浏览器"来访问, 所以拿不到正是的像素比
      所以预渲染时写入到.html文件中的meta就是错误的
      也正是因为预渲染的时候已经写入过meta标签了, 而运行的时候又会执行一次JS代码再写入一次
      就导致了网页中有两个meta标签
      * */
    let scale = 1.0 / window.devicePixelRatio;
    let text =
      `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
    document.write(text);
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    document.documentElement.setAttribute('data-dpr', window.devicePixelRatio + '');
    // 直接配置默认颜色
    document.documentElement.setAttribute('data-theme', 'theme');
  </script>
</head>

<body>
  <div id="app"></div>
</body>

</html>
<!--
1.初始化HTML中的代码
2.利用rem+视口释放的方式来适配移动端
注意点: 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
        如果想解决这个问题, 那么我们需要再借助一个loader, html-loader
3.借助postcss-pxtorem实现自动将px转换成rem
4.借助webpack实现CSS3/ES678语法的兼容
5.借助fastclick解决移动端100~300ms的点击事件延迟问题
6.初始化默认的全局样式
注意点: 在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化
        由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化
-->
2 运行报错 安装 html-loader
  • 注意这html-loader直接安装之后会出现一个 this.getOptions is not a function错误
  • 我原本以为是less过高 特意降级成5.0 并没有解决这个问题
  • 出现这个问题的原因实际上是：html-loader 的版本过高，不兼容 getOptions 方法，所以需要对 html-loader 进行降级处理；
  • npm install html-loader@0.5.5 --save-dev
3 配置vue.config.js
module.exports = {
  /* 部署应用包的基本URL, 不设置可能会出现打包后项目找不到资源问题 */
  // publicPath: "./",
  configureWebpack: {
    module: {
      rules: [
        {
          // 遇到html文件就用html-loader解析 并进行压缩
          test: /\.(html)$/,
          exclude: /node_modules/,
          use: {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        }
      ]
    }
  }
};
4 添加postcss-pxtorem插件 用来将px转成rem 或者使用flexib.js也可以
  • 之后不想转换的像素 就用Px 转化就px
npm i -D postcss-pxtorem
5 .browserslistrc文件修改浏览器的兼容
ie >= 8
Firefox >= 3.5
chrome  >= 35
opera >= 11.5
6 借助fastclick解决移动端100~300ms的点击事件延迟问题
npm i fastclick
7 在main.js中配置这个fastclick
import fastclick from 'fastclick'

fastclick.attach(document.body)
这就是搭建了一个常见的h5的一些配置 下篇开始换肤之旅
avatar
文章
阅读
粉丝