整整网站的页面都能引用,api获取服务器数据实战

天地会珠海分舵注:随着微信应用号的绘声绘色,相信新一轮的APP变革即将发生。作为行业爱妻士,大家很应该去拥抱这些主旋律。其中Reactjs相信是支付webapp的魁首,那段时光将会经过改造官方实例alt-tutorial来上学Reactjs相关的文化。

一、样式有两种引入格局? link 和 @import有哪些分别

1.外表体制
从外表引入一个css样式表,最常用的不二法门。
<link rel="stylesheet" type="text/css" href="xxx.css">
总体网站的页面都能引用。

2.内部样式
个中样式<style>放在<head>元素中。
<style> div{background-color:#f00 font-size:12px} </style>
唯其如此设置单个网页的样式。

3.行内样式
在HTML元素的里边,利用style属性直接定义样式。
<p style="color=blue;">西门</p>
只得设置单个html元素的体裁。

4.@import
通过@import导入样式表。
html中写法:
<style> @import url(样式表地址); </style>
css中的写法:
@omport url(样式表地址);

link和@import的区别:
 差别1:link是XHTML标签,除了加载CSS外,还足以定义RSS等其它工作;@import属于CSS范畴,只可以加载CSS。
 分歧2:link引用CSS时,在页面载入时同时加载;@import须要页面网页完全载入将来加载。
 分化3:link是XHTML标签,无包容难题;@import是在CSS2.1提议的,低版本的浏览器不辅助。
 不一致4:ink襄助选择Javascript控制DOM去改变样式;而@import不援助。

上一篇《小白学react之restful
api获取服务器数据实战
》我们学习了怎样通过superagent的五个模块提供的功力,调用远程Express服务器上通过restful
api提供的数据,并且求学了如何创立一个简易的Express api服务器。

二、文件路径../main.css 、./main.css、main.css有啥分别

../main.css在上一流目录下搜寻main.css
./main.css与main.css在当前目录下搜寻main.css
main.css./main.css相同

今天自家准备将大家的示范应用alt-tutorial加上css的协理,以便能更好的展现。以下是最后效果:

三、console.log是做怎么着用的

是javascript中调剂代码用的,意思是在控制台打印。

Locations_table_view.png

四、text-align有多少个值,分别有何样效率

  • text-align 文本对齐方式
  • left 左对齐
  • right 右对齐
  • center 居中
  • justify 两端对齐

本篇早先从前,即便看官跟自己同样对SASS没有怎么接触过的,敬请先去看下阮一峰的《SASS用法指南》,有个基本概念,大家再开展实战。

五、px、em、rem分别是怎样?有哪些不相同?怎么样选取

  • px像素(Pixel) 相对长度单位。像素px是相对于屏幕显示器分辨率而言的。
  • em 是相持长度单位,在html中是按照其父级元素为专业的。
  • rem
    是相对于HTML根元素的龃龉长度单位。那些单位可谓集相对大小和相对大小的独到之处于一身,通过它既可以完毕只修改根元素就成比例地调整具有字体大小,又足防止止字体大小逐层复合的相干反应。

1. SASS Loader 和 sourceMap特性

像我们层层的第二篇《小白学react之webpack实战》中所描述,为了能让大家的webpack在包装的时候可以正确解析到jsx格式的公文,大家必要参预bable那些loader的接济。同样,那里大家为了让webpack在包装时能正确分析到scss,我们也须要丰硕相应的loaders。

俺们开辟webpack.config.js,在loaders代码块里面参预以下代码:

{
  test: /\.scss$/,
  loaders: ["style", "css?sourceMap", "sass?sourceMap"]
}

那边style,css和sass那多少个loader的功效都相比直观,我们清楚”?sourceMap”那一个语法的情趣是敞开对应模块的sourceMap属性,那么这么些sourceMap又是干什么用的啊?

骨子里那里关键的目标就是有利于大家调试sass代码。因为sass代码最后仍旧要编译成css的,而我们在调试的时候,我们更乐于在Chrome的开发者工具中可以直接看看大家的sass代码来展开调剂。大家要精晓,sass的代码在编译成css后,变化或许会相比较大的。

譬如大家即将说到的Home页面的scss代码:

.home {
    &__li {

        list-style: none;
        height: rem(60px);
        vertical-align: middle;
        float:left;
        padding-right: rem(60px);

        &:hover { background: #31b0d5;
        }

    }
}

在编译之后就会化为:

.home__li {
  list-style: none;
  height: 1.5rem;
  vertical-align: middle;
  float: left;
  padding-right: 1.5rem; }
  .home__li:hover {
    background: #31b0d5; }

俺们可以看来双方肯定是有分其余了。那假如我们在相应的loader中绝非开启sourceMap的性状的话,大家在chrome的开发者工具中寓目的将会是其一样子的:

chrom_no_sourceMap.png

可以看来大家是平昔不艺术来看我们的sass源码的。

一经大家将相应的loaders的sourceMap特性启动起来,那么大家在通过chrome的开发者工具举办调试的时候将会合到的是如此的:

chome_style_with_sourceMap.png

可以看出在右侧的style中我们不光可以看到编译后的css代码,在该css代码的右上角,大家还是能看看有大家的sass源码的链接,点击该链接进去:

chrome_source_home__li.png

大家就足以看出我们的sass的源码了。所以说,sourceMap主要就是为了有利于我们进行调试用的。

六、对chrome 审查元素的机能做个大概的截图介绍

图片 1

审查元素.jpg

2. sass 贯彻像素到rem的转换

sass相对css,亮眼的职能之一就是永葆通过编程的措施操作css。

相信我们都清楚css3引入的rem的功用,它参照的是页面根元素html的字体大小,所以1rem的轻重就一律页面根元素的高低,2rem大大小就是页面根元素的2倍大小。

经过那种利用方法,我们可以升官大家的采纳的可扩充性及可移植性。因为大家一切应用使用的是绝对页面根元素的大小,所以不管运行浏览器怎么变,平台怎么变,代码都能很好的自适应。

只是css3没有出来从前,大家广大人应当习惯了一贯动用像一贯展开元素大小的安装。那么我们只要能容许我们持续拔取像平昔设置大小,可是背后自动将像素转换成rem,那该是很好的工作,拍手叫好了。

诸如大家得以提供一个名叫rem的sass方法,接收输入像素大小作为单位,然后自行将其更换为相对html字体大小的rem再次回到。然则这几个输入的像素大小应该相对于几倍的html根页面字体元素的大小呢?那里大家就要求设定好一个参考值了。

譬如我们可以设定参考值为40px,那么调用方法rem(60px)的话,我们预料重临来的就是1.5rem。

上边大家看下具体代码的落到实处:

$relative-font-size: 40px !default;

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function rem($value) {
  $v: strip-unit($value);
  $relative: strip-unit($relative-font-size);
  @return $v/$relative + rem
}

那里的relative-font-size就是大家地点说的参考值。注意这里的!default语法,意思是将40px作为那一个变量的默许值,用户可以在其余地点将其覆盖,比如借使在前方加上:

$relative-font-size: 60px;
$relative-font-size: 40px !default;
...

这就是说实际上该变量的值被改写成了60px,而不是默许值40px。

那里的strip-unit方法的情致是将输入像素的单位”px”给去掉。sass对那种单位运算的拍卖极度智能,比如以输入为”$num
= 60px”为例子,上边的“$num*0”的结果将会是0px,那么”0px +
1″,即使后前边没有px单位,但是结果会自行补上,变成“1px”。那么最后的”60px/1px”的结果就是60,px这一个单位就会去掉了。

兴许那里大家会说,那咱们一直写成上面不就完了?

@function strip-unit($num) {
  @return $num / 1px;
}

比方我们只是帮忙去掉像素的单位来说,这样是ok的,可是只要大家要接济去掉此外格式的单位,比如em转rem之类的,那样写就没有人和可增加性可言了。

清楚了strip-unit的功能,下边的rem的代码就很好掌握了:

  • 首先将输入的像素(如60px)的单位给去掉
  • 将相对字体大小的单位也脱离掉
  • 将脱离掉单位的输入的像素大小除以相对字体像素大小,获得的结果加上rem,就是大家的输入像素转换成rem后的结果

此时我们在scss就足以一直通过以下那种办法来行使这一个艺术:

height: rem(60px);

编译后的结果就是

height: 1.5rem;

七、如下代码,设置 p为几 rem,让h1和p的字体大小相等?

图片 2

Paste_Image.png

答案是6ren。html元素默许是是16px。16*0.625=10
所以html元素的尺寸是10px。而rem就是相对html元素的深浅,如果要使h1和p的轻重相当于,p应该为6rem。

3. Home页面sass实战

3.1 Home页面组件代码基本改造

Home 页面的多个链接原来没有应用任何css样式的时候是以此样子的:

home_link_org.png

那么我们期望将其改造成

home_link_scss.png

原本的代码是:

var Home = React.createClass({
  render() {
    return (
      <div>
          <nav>
            <Link to="/locations">名胜古迹</Link> |
            <Link to="/about">关于techgogogo</Link>
            {this.props.children}
          </nav>
      </div>
    )
  }
})

那么为了更好的应用我们的样式,大家在link上层封装多一层列表项目li。

 <li><Link to="/locations" >名胜古迹</Link></li>
<li><Link to="/about" >关于techgogogo</Link></li>

那儿的显得效果就是:

home_link_bare_li.png

那时候如若要求在li中参预scss样式的匡助,只需求在品质中加入”className=”xxx”就好了。

<li className="xxx"><Link to="/locations" >名胜古迹</Link></li>
<li className="xxx"><Link to="/about" >关于techgogogo</Link></li>

当然,此前我们须要在文书中引入scss文件,比如我们的Home页面的scss文件:

import  './Home.scss'

3.2 sass采纳器嵌套和指令空间污染

sass协助拔取器的嵌套。比如大家须求在Home页面下边的li元素上采用样式,大家得以直接写成:

.li {
  ...//样式定义
}

那么在Home页面我们直接引用”className=”li””就能动用上该样式。那么一旦大家Home页面的li除了有应用到导航栏的竹签之外,其它一些也有用到li的话,那么我们的li样式就乱了。

俺们原先常见的主意是因而修改css类的名字来解决那种争执,比如可以将名字改成home__tab__li:

.home__tab__li {
  ...//样式定义
}

其他在body中用到的li样式的类名就改成home__body__li:

.home__body__li {
  ...//样式定义
}

实际sass中有个更简短的办法来解决这么些题材,那就是类选拔器扶助嵌套,比如”.home_tab_li”其实大家得以在顶层概念一个名为home的命名空间,然后经过“&”来引用父元从来达到那一个目标:

.home {
    &__tab {
        &__li {
          ...
        }
    }
}

这么我们就足以在页面代码中直接引用li的体制了”className=”home__tab__li”,如若在body中有其余li须求分歧的样式的,我们也一如既往可以透过这种命名空间隔离的格局来唯一定义对应元素,而不需求担心命名空间污染带来的劳顿。

3.3 Home页面scss代码实战

有了上边那么些基础后,咱们的Home页面的scss代码的编排就很百步穿杨了。

大家在src/components页面上添加一个Home.scss文件,编写代码如下:

@import '../libs/_rem.scss';

.home {
    &__tab {
        &__li {

            list-style: none;
            height: rem(60px);
            vertical-align: middle;
            float:left;
            padding-right: rem(60px);

            &:hover { background: #31b0d5;}

        }
    }
}

此间首先行引进来的_rem.scss就是大家眼前说的对rem方法的一个封装。

li样式的配备越来越多的是css的基础知识,我那边对每一个安装描述一下:

  • list-style行: 将li列表前面的义气圆圈符号给去掉。
  • height行:
    设置列表的莫大,这么些中度需要比默许字符大小大点,不然字体在列表中就会显得不完整,不雅观。记得大家事先是将全局相对像素设置成40px的,所以那里的rem(60px)就是1.5rem,也就是li的莫大是数字大小的1.5倍。
  • vertical-align行:设置字体垂直靠中浮现
  • float行:
    设置li列表自动往左浮动。也就是说应用了这一个li样式的列表都会自行往左浮动排列,而不会像现在那样分成两行呈现。但是变化之后记得须要清浮动,否则下边的上空也会随之一并扭转上去。
  • padding-right行:
    每个列表左边的填充空间。其实就是为着不让三个列表紧靠在一起,那里是在七个列表之间填充1.5个字符大小的空中
  • hover行: 设置在鼠标移动到li标签下面时候的背景颜色

下一场大家必要对Home页面代码也修改下,加入对home__tab__li样式的引用,以及清浮动:

import React from 'react'
import { Link } from 'react-router'
import  './Home.scss'

var Home = React.createClass({
  render() {
    return (
      <div >
          <nav >
            <li className="home__tab__li"><Link to="/locations" >名胜古迹</Link></li>
            <li className="home__tab__li"><Link to="/about" >关于techgogogo</Link></li>
              <div style={{clear:"both"}}></div>
            {this.props.children}
          </nav>
      </div>
    )
  }
})

module.exports = Home;

最后效果如下:

home_link_scss.png

4. 表格呈现Locations和Favorites

改建此前,大家的Locations页面是那样子的:

Location_org.png

透过投入样式的支撑,我们最后将会将页面改造成:

Locations_table_view.png

里面所有套路跟刚刚给Home页面参预scss的支撑是一模一样的,只是具体有些css格式的底细的微调会稍微复杂一点而已。

那边自己就不一项项的论述了,我们可以下载相应的代码进行参考。

5. 源码

git clone
https://github.com/kzlathander/alt-tutorial-webpack.git
cd alt-tutorial-webpackgit
checkout 05
npm install
npm run dev

同时

本文由世界会宿迁分舵编写,转发需授权,喜欢点个赞,吐槽请评论,进一步互换请关切自我世界会包头分舵以及自身的《微信小程序支付》主题。

《未完待续》

相关文章