使用UMI仿今日头条首页

最新推荐文章于 2023-03-29 13:42:51 发布

zerobaek

最新推荐文章于 2023-03-29 13:42:51 发布

阅读量316

点赞数

文章标签：今日头条

本文链接：https://blog.csdn.net/zerobaek/article/details/100154354

版权

创建UMI项目

全局安装umi

npm install umi -g

全局安装 create-umi

npm install create-umi -g

使用create-umi指令

create-umi

安装依赖

npm i

启动项目

npm start

修改配置文件

umi 允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，支持 ES6 语法。

默认的配置文件是根目录下面的 .umirc.js文件，如果想要用config.js，那么需要先在根目录下创建一个 config文件夹，然后将.umirc.js文件中的配置信息复制到config.js，修改了配置文件后要重启一下项目。

在配置文件中引入路由配置文件

当有了 routes 的配置之后 umi 就不会再执行约定式对应的路由逻辑了，而是通过配置声明的路由（优先使用配置式路由，且约定式路由会不生效）

import pageRoutes from './router.config';

开发

给一个元素设置多个style样式

安装classnames

npm i classnames --save-dev

在js文件引入

import moreClass from 'classnames';

render() {
    let downloadAppStyle = moreClass(styles.downloadApp,styles.headerBtn);
    let weatherStyle = moreClass(styles.weather,styles.headerBtn);
    let complainStyle = moreClass(styles.complain,styles.headerBtn);
    let productStyle = moreClass(styles.product,styles.headerBtn);
    return (
      <Fragment>
        <div className={styles.headerNav}>
            <div className={downloadAppStyle}>下载APP</div>
            <div className={weatherStyle}>
                &nbsp;北京&nbsp;&nbsp;晴&nbsp;&nbsp;18℃&nbsp;&nbsp;/&nbsp;&nbsp;31℃
                <img src={downArrow} className={styles.downArrow}></img>
            </div>
            <div className={productStyle}>头条产品</div>
            <div className={complainStyle}>侵权投诉</div>
        </div>
      </Fragment>
    )
  }

umi项目中图片资源的引入

import downArrow from '../../assets/header/downArrow.png';

<img src={downArrow} className={styles.downArrow}></img>

如果在/public目录下的静态图片，可以直接输入绝对路径，假设/public/yay.jpg,访问方式：<img src="/yay.jpg" />（注意：以上必须构建后在dist中才能看到。）

在/src/assets 和 /src/pages/ 目录下的图片，不能通过输入绝对路径访问，必须先import导入，才能访问。或者require导入。

原因：构建时，/public目录下的文件会原样复制到/dist/目录下，而/src/assets/ 和 /src/pages/目录下的文件会被改名（base64编码，webpack相关知识）并复制到/dist/下。

关于e.target

e.target获取到的是一个DOM元素。
DOM相关的操作分为两种：Property、Attribute
Attribute表示的是<tag attr1 attr2>中的attr1、attr2，需要通过getAttribute来获取。
而Property则是一些DOM特殊的属性值，可以直接.XXX来获取。
常用的Property：className、htmlFor、style、value
对应的Attribute：class、for、style、value

注意：使用getAttribute()获取属性值的时候，要注意得到的值类型为string类型，要获取数值的话，要记得使用Number()转换一下类型防止使用===时判断出错（比如在切换a标签时）

this.state = {
    listArray: [
        '西瓜视频', '热点', '直播','图片', 
        '科技', '娱乐', '游戏','体育', 
        '汽车', '财经', '搞笑','更多'
    ],
    actived: -1,
}

{
  this.state.listArray.map((item, index) => {
    console.log(this.state.actived,typeof this.state.actived,index,typeof index,this.state.actived==index,this.state.actived===index);
    return <a
      className={this.state.actived===index ? styles.active : styles.list}
      data-index={index}
      key={index}
      onMouseOver={this.handleListMouseOver}
      onMouseLeave={this.handleListMouseLeave}
      onClick={this.handleListClick}
    >{item}</a>
  })
}

不转换属性值类型（效果图如左）：

this.state.actived!==index(this.state.actived由number变成了string类型，因为获取到的e.target.getAttribute('data-index')值为string类型)

handleListMouseOver(e) {
    let index = e.target.getAttribute('data-index');//获取的属性值会将index变成string类型
    this.setState({
      actived : index
    },()=>{
      // console.log(this.state.actived);
    })
  }

转换属性值类型（效果图如右）：

handleListMouseOver(e) {
    let index = Number(e.target.getAttribute('data-index'));//获取的属性值会将index变成string类型
    this.setState({
      actived : index
    },()=>{
      // console.log(this.state.actived);
    })
  }