2017-09-30 • 前端开发

Web PC项目快速适配移动端

昨天我们快速的将Vue的项目快速迁移到了React上来, 经过学习两个不同的框架发现, React更加适合复杂的需求以及更加适合我们这种移动端开发者的思维习惯.

参考链接:

以下内容在上述文章基础上进行, 请事先查阅.

在着手移动端之前, 我们先给之前的导航栏点击按钮加上平滑滚动的需求, 想之前这类需求都是通过jquery来实现的, 但是现在的前端开发趋势已经不需要再通过一个10年前的技术来支撑了.

平滑滚动

npm i react-scroll --save

首先我们需要引入一个库. react-scroll

import React, {Component} from 'react';
import CSSModules from 'react-css-modules';
import {animateScroll} from 'react-scroll';
import styles from './pc_navigation.css';

@CSSModules(styles)
export default class PCNavigation extends Component {

    scrollTo(y) {
        animateScroll.scrollTo(y);
    }

    render() {
        return (
            <div>
                <div styleName="nav">
                    <div styleName="content">
                        <div styleName="title">
                            Castie!
                        </div>
                        <div styleName="items">
                            <span onClick={this.scrollTo.bind(this, 0)}>
                                <a>Home</a>
                            </span>
                            <span onClick={this.scrollTo.bind(this, 600)}>
                                <a>Projects</a>
                            </span>
                            <span onClick={this.scrollTo.bind(this, 1200)}>
                                <a>GitHub</a>
                            </span>
                            <span onClick={this.scrollTo.bind(this, 1800)}>
                                <a>Articles</a>
                            </span>
                            <span onClick={this.scrollTo.bind(this, 2930)}>
                                <a>Experience</a>
                            </span>
                            <span onClick={this.scrollTo.bind(this, 3530)}>
                                <a>Contact</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div styleName="nav-offset"></div>
            </div>
        )
    }
}

然后绑定到对应的事件上即可, 这种需求完全不用重复造轮子.

Scroll Animations

Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below
scroller.scrollTo('myScrollToElement', {
  duration: 1500,
  delay: 100,
  smooth: "easeInOutQuint",
  containerId: 'ContainerElementID',
  ...
})
List of currently available animations:
linear
	- no easing, no acceleration.
easeInQuad
	- accelerating from zero velocity.
easeOutQuad
	- decelerating to zero velocity.
easeInOutQuad
	- acceleration until halfway, then deceleration.
easeInCubic
	- accelerating from zero velocity.
easeOutCubic
	- decelerating to zero velocity.
easeInOutCubic
	- acceleration until halfway, then deceleration.
easeInQuart
	- accelerating from zero velocity.
easeOutQuart
	- decelerating to zero velocity.
easeInOutQuart
	-  acceleration until halfway, then deceleration.
easeInQuint
	- accelerating from zero velocity.
easeOutQuint
	- decelerating to zero velocity.
easeInOutQuint
	- acceleration until halfway, then deceleration.

这个库也是非常好用, 里面有很多的缓冲函数可供挑选, 上面文字截取自文档.

适配移动端

PC的项目我们就先告一段落了, 我们来总结一下, 通过将Vue的代码迁移到React上我们学习了react-css-modules这个库用来做CSS模块化, 在配置模块化的过程中, 我们学习了css-loader的webpack配置, 在想使用ES7Decorator新特性的时候, 我们引入了babel-plugin-transform-decorators-legacy的babel插件, 并学习了配置, 最后通过react-scroll库实现了页面的平滑滚动.

接下来, 我们将要着手兼容移动端了, 对于兼容移动端的方案主要有响应式布局以及做两套, 由于PC和移动端的UI上相差较大, 所以响应式就不考虑, 做两套其实不就是要再开一个项目? 这个也不太好吧.

最终采用折中的方案, 做两套不同页面, 合用一套业务逻辑, 进行响应式的切换, 那要如何做到呢? 不急, 我们先来引入一个库.

npm i react-responsive --save

引入react-responsive库

Using CSS Media Queries

var MediaQuery = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>
        <MediaQuery query='(min-device-width: 1224px)'>
          <div>You are a desktop or laptop</div>
          <MediaQuery query='(min-device-width: 1824px)'>
            <div>You also have a huge screen</div>
          </MediaQuery>
          <MediaQuery query='(max-width: 1224px)'>
            <div>You are sized like a tablet or mobile phone though</div>
          </MediaQuery>
        </MediaQuery>
        <MediaQuery query='(max-device-width: 1224px)'>
          <div>You are a tablet or mobile phone</div>
        </MediaQuery>
        <MediaQuery query='(orientation: portrait)'>
          <div>You are portrait</div>
        </MediaQuery>
        <MediaQuery query='(orientation: landscape)'>
          <div>You are landscape</div>
        </MediaQuery>
        <MediaQuery query='(min-resolution: 2dppx)'>
          <div>You are retina</div>
        </MediaQuery>
      </div>
    );
  }
});

翻查文档, 我们就能够清晰的知道如何的使用啦.

import React, {Component} from 'react';
import MediaQuery from 'react-responsive';
import PCIndex from './components/pc_Index';
import MobileIndex from './components/mobile_Index';

import './App.css';

class App extends Component {
    render() {
        return (
            <div>
                <MediaQuery query='(min-device-width: 1224px)'>
                    <PCIndex/>
                </MediaQuery>
                <MediaQuery query='(max-device-width: 1224px)'>
                    <MobileIndex/>
                </MediaQuery>
            </div>
        );
    }
}

export default App;

文档上的是ES5的语法, 我们将其修改成ES6的语法并应用到项目上来.

通过不同的设备宽段来响应不同的组件, 这样我们就能再开发一套不影响之前PC端的UI啦.

移动端UI

import React, {Component} from 'react';
import MobileHome from './mobile_home';
import MobileProjects from './mobile_projects';
import MobileExperience from './mobile_experience';
import MobileContact from './mobile_contact';

export default class MobileIndex extends Component {

    render() {
        return (
            <div>
                <MobileHome/>
                <MobileProjects/>
                <MobileExperience/>
                <MobileContact/>
            </div>
        )
    }
}

由于移动端的页面空间比较有限, 我们就策略性的省却一些内容, 具体的页面不重要, 重要的是思维方式.

关于html和css的布局应用就不展开将了, 这都是很基础的东西, 我们直接来看移动端最后的效果吧.

由于我使用的项目是页面性的简历, 没有业务逻辑, 在实际的应用中, 可以将业务逻辑内容直接抽出来公用即可.

About:

点击下方链接跳转!!

🌟 项目源码请点这里🌟 »> 喜欢的朋友请点喜欢 »> 下载源码的同学请送下小星星 »> 有闲钱的壕们可以进行打赏 »> 小弟会尽快推出更好的文章和大家分享 »> 你的激励就是我的动力!!

Castie!