React全家桶构建一款Web音乐App实战（二）：字体图标制做及页面路由搭建
上一节使用create-react-app脚手架搭建了基本项目骨架，这一节继续制做项目须要的字体图标和页面主路由的搭建css
字体图标制做
为何要使用字体图标？html
- 图标放大或缩小不会被拉伸，会保持足够的清晰度
- 颜色能够随意设置。若是使用普通图片，图片颜色已是设计好的，若是要换颜色须要借助工具来对图片进行修改
制做字体图片首先咱们须要svg图片。svg图片能够从iconfont阿里矢量图标库自行选择。笔者已经下载了项目须要的svg图片react
借助一个叫iconmoon的网站。浏览器地址上输入：icomoon.io/appgit
点击上方的Import Icons按钮弹出选择对话框，选择刚刚下载的svg图片github
点击打开web
而后选中全部的图标，点击Generate Fontcanvas
跳转到以下界面，点击download浏览器
该压缩包包含了字体图片使用的demo，和生成的字体图标文件及相关样式。在项目src目录下面新建一个assets目录而后再新建一个stylus目录用来放置styl文件，解压压缩包把里面的style.css和fonts文件夹复制出来放置到stylus目录下。ruby
对fonts目录下的文件和style.css稍作修改bash
将fonts下面的文件名都重命名为icomusic，将style.css重命名为font.styl。而后打开icomusic将里面的花括号和分号去掉变成标准的styl语法格式，把里面的iconmoon所有替换为icomusic
font.styl
@font-face
font-family: 'icomusic'
src: url('fonts/icomusic.eot?nnepb1')
src: url('fonts/icomusic.eot?nnepb1#iefix') format('embedded-opentype'),
url('fonts/icomusic.ttf?nnepb1') format('truetype'),
url('fonts/icomusic.woff?nnepb1') format('woff'),
url('fonts/icomusic.svg?nnepb1#icomusic') format('svg')
font-weight: normal
font-style: normal
[class^="icon-"], [class*=" icon-"]
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomusic' !important
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.icon-back:before
content: "\e900"
.icon-delete:before
content: "\e901"
.icon-fe-music:before
content: "\e902"
.icon-list-play:before
content: "\e903"
.icon-music:before
content: "\e904"
.icon-next:before
content: "\e905"
.icon-pause:before
content: "\e906"
.icon-play:before
content: "\e907"
.icon-play-list:before
content: "\e908"
.icon-previous:before
content: "\e909"
.icon-search:before
content: "\e90a"
.icon-shuffle-play:before
content: "\e90b"
.icon-single-play:before
content: "\e90c"
.icon-user:before
content: "\e90d"
复制代码
修改后的文件结构以下
页面路由搭建
准备
先对项目结构作一些修改
删除App.test.js、logo.svg。在src目录下面新建一个components目录，将App.js和App.styl放置在components目录下面，将App.styl中的内容所有删除，而后删除App.js中render函数中的div标签下面的内容
App.js
//import React, { Component } from 'react';
import React from 'react';
//import logo from './logo.svg'; 删除此行
import './App.styl';
class App extends React.Component {
render() {
return (
//<div className="App">
<div className="app">
//<header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <h1 className="App-title">Welcome to React</h1>
//</header>
//<p className="App-intro">
// To get started, edit <code>src/App.js</code> and save to reload.
//</p>
</div>
);
}
}
export default App;
复制代码
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
复制代码
修改index.css文件，将html、body、div#root宽高都设置为100%，在body上设置根字体和字体大小
index.css
html, body, #root {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
复制代码
最后在stylus目录下新增reset.styl文件
reset.styl
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
margin: 0
padding: 0
border: 0
vertical-align: baseline
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
display: block
body
line-height: 1
ol, ul
list-style: none
blockquote, q
quotes: none
blockquote:before, blockquote:after,
q:before, q:after
content: ''
content: none
table
border-collapse: collapse
border-spacing: 0
复制代码
修改后的目录结构以下
搭建路由
咱们先来看一下页面结构
推荐页
排行榜
搜索
这三个页面是一个Tab选项卡模式顶部是Logo，三个Tab按钮中间是Tab对应的视图，Logo和Tab按钮是不变的，因此这里中间就设计成一个路由的视图界面，三个Tab对应三个路由
编写Logo及Tab样式 在assets目录下面新建一个imgs文件夹用来存放图片，这里放了三张图片，其中一张就是头部Logo图片，其它两张后面会用到
App.js
import React from 'react';
import logo from "../assets/imgs/logo.png"
import '../assets/stylus/reset.styl'
import './App.styl';
class App extends React.Component {
render() {
return (
<div className="app">
<header className="app-header">
<img src={logo} className="app-logo" alt="logo" />
<h1 className="app-title">Mango Music</h1>
</header>
<div className="music-tab">
<div className="tab-item selected">
<span>推荐</span>
</div>
<div className="tab-item">
<span>排行榜</span>
</div>
<div className="tab-item">
<span>搜索</span>
</div>
</div>
</div>
);
}
}
export default App;
复制代码
App.styl
.app
width: 100%
height: 100%
color: #DDDDDD
background-color: #212121
.app-header
height: 55px
line-height: 55px
color: #FFD700
text-align: center
.app-logo
width: 30px
height: 25px
margin-top: -5px
vertical-align: middle
.app-title
display: inline-block
height: 55px
margin-left: 10px
font-size: 18px
font-weight: 300
.music-tab
display: flex
height: 30px
line-height: 30px
color: #DDDDDD
text-align: center
.tab-item
flex: 1
复制代码
三个Tab采用flex布局，自适应屏幕宽度
编写推荐页、排行旁页、搜索页三个组件。在components目录下面新建recommend、ranking和search三个目录用来存放推荐、排行、搜索页面相关组件
在recommend目录下建立Recommend.js和recommend.styl。React约定组件的名字首字母大写。对应的js文件名和组件同样大写（不强制），组件对应一个样式文件，命名和组件名同样方便寻找
Recommend.js
import React from "react"
import "./recommend.styl"
class Recommend extends React.Component {
render() {
return (
<div className="music-recommend">
Recommend
</div>
);
}
}
export default Recommend
复制代码
recommend.styl内容暂时为空
一样在ranking目录和search目录下新建Ranking.js、ranking.styl和Search.js、search.styl
Ranking.js
import React from "react"
import "./ranking.styl"
class Ranking extends React.Component {
render() {
return (
<div className="music-ranking">
Ranking
</div>
);
}
}
export default Ranking
复制代码
Search.js
import React from "react"
import "./search.styl"
class Search extends React.Component {
render() {
return (
<div className="music-search">
Search
</div>
);
}
}
export default Search
复制代码
编写路由
回到App.js中，import路由相关组件
import {BrowserRouter as Router, Route, Switch, Redirect, NavLink} from "react-router-dom"
复制代码
在App组件中导入Recommend、Ranking和Search组件，App的根使用Router包裹，加入一个div包裹Route组件
import Recommend from "./recommend/Recommend"
import Ranking from "./ranking/Ranking"
import Search from "./search/Search"
复制代码
<div className="music-view">
{/*
Switch组件用来选择最近的一个路由，不然最后一个没有指定path的路由也会显示
Redirect重定向到列表页
*/}
<Switch>
<Route path="/recommend" component={Recommend} />
<Route path="/ranking" component={Ranking} />
<Route path="/search" component={Search} />
<Redirect from="/" to="/recommend" />
<Route component={Recommend} />
</Switch>
</div>
复制代码
在app.styl中增长如下样式填充屏幕剩余高度
.music-view
position: fixed
top: 88px
left: 0
bottom: 52px
width: 100%
复制代码
使用NavLink组件包裹Tab，使其具备路由跳转功能
<div className="tab-item">
<NavLink to="/recommend" className="nav-link">
<span>推荐</span>
</NavLink>
</div>
<div className="tab-item">
<NavLink to="/ranking" className="nav-link">
<span>排行榜</span>
</NavLink>
</div>
<div className="tab-item">
<NavLink to="/search" className="nav-link">
<span>搜索</span>
</NavLink>
</div>
复制代码
设置NavLink组件样式
.nav-link, .link
display: block
color: inherit
text-decoration: none
&.active
color: #FFD700
border-bottom: 2px solid #FFD700
复制代码
NavList组件最后渲染的是一个a标签，使用以上样式对其进行美化，在当前NavLink组件被激活的时候会自动添加上active样式
App.js和app.styl完整代码以下
App.js
import React from 'react';
import {BrowserRouter as Router, Route, Switch, Redirect, NavLink} from "react-router-dom"
import Recommend from "./recommend/Recommend"
import Ranking from "./ranking/Ranking"
import Search from "./search/Search"
import logo from "../assets/imgs/logo.png"
import '../assets/stylus/reset.styl'
import './App.styl';
class App extends React.Component {
render() {
return (
<Router>
<div className="app">
<header className="app-header">
<img src={logo} className="app-logo" alt="logo" />
<h1 className="app-title">Mango Music</h1>
</header>
<div className="music-tab">
<div className="tab-item">
<NavLink to="/recommend" className="nav-link">
<span>推荐</span>
</NavLink>
</div>
<div className="tab-item">
<NavLink to="/ranking" className="nav-link">
<span>排行榜</span>
</NavLink>
</div>
<div className="tab-item">
<NavLink to="/search" className="nav-link">
<span>搜索</span>
</NavLink>
</div>
</div>
<div className="music-view">
{/*
Switch组件用来选择最近的一个路由，不然最后一个没有指定path的路由也会显示
Redirect重定向到列表页
*/}
<Switch>
<Route path="/recommend" component={Recommend} />
<Route path="/ranking" component={Ranking} />
<Route path="/search" component={Search} />
<Redirect from="/" to="/recommend" />
<Route component={Recommend} />
</Switch>
</div>
</div>
</Router>
);
}
}
export default App;
复制代码
app.styl
.app
width: 100%
height: 100%
color: #DDDDDD
background-color: #212121
.app-header
height: 55px
line-height: 55px
color: #FFD700
text-align: center
.app-logo
width: 30px
height: 25px
margin-top: -5px
vertical-align: middle
.app-title
display: inline-block
height: 55px
margin-left: 10px
font-size: 18px
font-weight: 300
.music-tab
display: flex
height: 30px
line-height: 30px
color: #DDDDDD
text-align: center
.tab-item
flex: 1
.music-view
position: fixed
top: 88px
left: 0
bottom: 52px
width: 100%
.nav-link, .link
display: block
color: inherit
text-decoration: none
&.active
color: #FFD700
border-bottom: 2px solid #FFD700
复制代码
总结
在本章节讲解了如何制做字体图标，根据页面设计基本路由结构
后续更新中...
完整项目地址：github.com/code-mcx/ma…
本章节代码在chapter2分支
相关文章
- 1. React全家桶构建一款Web音乐App实战（一）：项目准备
- 2. React全家桶构建一款Web音乐App实战（九）：皮肤切换
- 3. React全家桶构建一款Web音乐App实战（四）：专辑页开发及其动画实现
- 4. React全家桶构建一款Web音乐App实战（三）：推荐页开发及公用组件封装
- 5. React全家桶构建一款Web音乐App实战（五）：歌曲状态管理及播放功能实现
- 6. React全家桶构建一款Web音乐App实战（六）：排行榜及歌曲本地持久化
- 7. React全家桶构建一款Web音乐App实战（八）：搜索功能开发
- 8. Vue全家桶构建网易云音乐web app
- 9. react全家桶实战
- 10. React全家桶环境搭建过程
- 更多相关文章...
- • ASP.NET Web Pages - 全局页面 - ASP.NET 教程
- • ionic 创建 APP - ionic 教程
- • 适用于PHP初学者的学习线路和建议
- • Docker容器实战(六) - 容器的隔离与限制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
相关文章
- 1. React全家桶构建一款Web音乐App实战（一）：项目准备
- 2. React全家桶构建一款Web音乐App实战（九）：皮肤切换
- 3. React全家桶构建一款Web音乐App实战（四）：专辑页开发及其动画实现
- 4. React全家桶构建一款Web音乐App实战（三）：推荐页开发及公用组件封装
- 5. React全家桶构建一款Web音乐App实战（五）：歌曲状态管理及播放功能实现
- 6. React全家桶构建一款Web音乐App实战（六）：排行榜及歌曲本地持久化
- 7. React全家桶构建一款Web音乐App实战（八）：搜索功能开发
- 8. Vue全家桶构建网易云音乐web app
- 9. react全家桶实战
- 10. React全家桶环境搭建过程