移动端开发-布局+框架+案例篇

时间 2019-11-22

标签移动开发布局框架案例栏目无线繁體版

原文原文链接

###模板引擎javascript

1.ES6模板字符串

ES6中：${JS代码}css

//ES6中须要两个过程 :html

//1.定义模板
    var htmlStr=`<p>${1+2}</p>`;
    //2.手动将模板放到指定元素中
    $(".box").html(htmlStr);复制代码

2.EJS模板

//EJS 四步曲java

//1.在HTML结构中定义容器  例如：<div id="box"></div>
    //2.经过AJAX动态获取data数据
    data=[{a:"A",b:"B",c:'C'},{a:"aa",b:"bb",c:'cc'},{a:"aaa",b:"bbb",c:'ccc'}];
    //3.造模板 搭建HTML结构构导入数据
    //4.经过ejs.render 将html结构，模板数据，data数据渲染出来
    //ejs.render(模板的html结构,{模板数据:真实数据(通常都是经过AJAX获取出来的数据)})
    //4-1 获取HTML模板
    var boxHTML=$("#boxTemplate").html();
    //4-2 ejs.render()
    var result=ejs.render(boxHTML,{boxData:data});
    console.log(result);
    $("#box").html(result);复制代码

>git

3.造模板-->github

给script标签加上type="text/template"表示的是html模板  
    加个id="boxTemplate"是为了方便后面第四部获取这个html模板用的
    boxData：是你本身定义的数据的名字 他是模板数据  
    咱们还须要把他跟AJAX获取出来的数据相关联
    <script type="text/template" id="boxTemplate">
        <ul>
            <%$.each(boxData,function(index,item){%>
                <!--处理li-->
                <li>
                    <span><%=item.a%></span>
                    <span><%=item.b%></span>
                    <span><%=item.c%></span>
                </li>
            <%})%>
        </ul>
    </script>复制代码

viewporet

移动端适配

准备工做1：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width:宽度等于当前设备的宽度
initial-scale=1：初始缩放比例
minimum-scale=1：容许用户的缩放的最小比例(默认值是1)
maximum-scale=1: 容许用户的缩放的最大比例(默认值是1)
user-scalable=no：是否容许用户缩放（默认值是no，通常都是不但愿用户去缩小放大界面）复制代码

准备工做2：加在一些兼容文件

在IE9如下是不支持h5，也不支持CSS3中@media，因此咱们须要加载一些js文件来保证咱们的效果的兼容问题
<!--[if lt IE 9]>web

<![endif]-->chrome

准备工做3（选择性加上）：设置浏览器的渲染模式是最高的

如今不少人的电脑IE浏览器的浏览器模式是IE9，IE10，IE11，都是高版本浏览模式，可是有些IE9 文档模式倒是IE8，浏览器是按照文档模式去渲染的，因此会出现不兼容问题，那么咱们就手动打开控制台修改一下文档模式，可是不少人不会控制台，咱们就考虑这一部分人，为了他们咱们能够强制IE的渲染方式为最高，保证咱们的文档模式是最新的bootstrap

还有个canvas

chrome=1 他是谷歌内嵌的一个浏览器框架（GCF：Goole Chrome Frame）
若是电脑上装了这个框架，无论你用的什么版本的IE都会用webkit内核和V8引擎来排版运算，要是没装就和上一个没有chrome=1的那个同样加载

关于IE版本条件注意语句

一、只有IE才能识别
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
由于只有IE5以上的版本才开始支持IE条件注释，全部“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

二、只有特定版本才能识别
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
识别特定的IE版本，高了或者低了都不能够。上例只有IE8才能识别。

三、只有不是特定版本的才能识别
<!--[if !IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中特定IE7版本不能识别，其余版本都能识别，固然要在IE5以上。

四、只有高于特定版本才能识别
<!--[if gt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有高于IE7的版本才能识别。IE7没法识别。

五、等于或者高于特定版本才能识别
<!--[if gte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更高的版本都能识别。

六、只有低于特定版本的才能识别
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有低于IE7的版本才能识别，IE7没法识别。

七、等于或者低于特定版本的才能识别
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更低的版本能够识别。

关键词解释
上面那些代码好像很难记的样子，其实只要稍微解释一下关键字就很容易记住了。
lt ：就是Less than的简写，也就是小于的意思。
lte ：就是Less than or equal to的简写，也就是小于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判断符相同。


特别提示：
１、有人会试图使用<!--[if !IE]>来定义非IE浏览器下的情况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当作注释视而不见。
２、咱们一般用IE条件注释根据浏览器不一样载入不一样css，从而解决样式兼容性问题的。其实它能够作的更多。它能够保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。
<!--[if IE]>
<script type="text/javascript">
 alert("你使用的是IE浏览器！");
</script>
<![endif]-->复制代码

响应式布局

1.百分比+@media

width：浏览器的宽度
height：浏览器的高度
device-width:设备的屏幕宽
device-height:设备的屏幕高
orientation：检测屏幕是出于横向仍是纵向
aspect-ratio：检测浏览器可视宽度和高度的比例（9/16）
device-aspect-ratio:检测设备屏幕宽度和高度的比例
color：检测颜色位数（min-color:32检测颜色是否是32位的）
color-index:检测设备颜色索引表中的颜色值都是正数
grid：检测输出的设备是网格仍是位图设备
resolution:监测屏幕或者打印机的分辨率
min-resolution：300dpi
max-resolution：118dpcm

通常以前的布局都是百分比布局：或者流式布局
@media都是配合其余的方式去用

@media (max-width: 900px) and (min-width:500px ){
                .box{
                    display:block;
                    width: 100%;
                }
            }复制代码

2.DPR

iphnoe3分辨率是320*480，iPhone4分辨率是640*960
这两款手机实际上都是宽为320px，这就致使了屏幕大小没变。实际像素却多了一倍，
这时，一个css像素就等于两个物理像素，这就是像素密度比
window.devicePixelRatio来检测素密度比
为何设计师给你的设计稿通常都是640*960  750*1334复制代码

@media only screen and (device-pixel-ratio:1 ) {
        /*device-pixel-ratio:来检测素密度比*/
    }复制代码

3.REM布局

一个CSS单位
px是固定单位：咱们设置300px*200px的尺寸，无论设备怎么变，都会按照原有尺寸大小渲染，不受其它的影响
rem是相对单位：相对于当前页面根元素(html)的字体大小来设置的

REM响应式布局：

首先咱们严格按照设计稿的尺寸来写样式，只不过在写样式的时候，把全部的PX变为REM (假设设计稿是640的尺寸)
当咱们把页面放在320的手机上，以前写的样式须要总体缩小一倍，此时不必一个个的样式进行更改，咱们只须要把HTML的字体大小在原来的基础上缩小一倍便可（HTML字体缩小，以前以REM为单位的值也都会跟着缩小）
为了方便转换计算，咱们通常把HTML的初始字体大小设置为100（浏览器最小字体时10/12px，咱们缩减过小后，浏览器识别不了）

var dW = 640; //设计稿的宽
var win==document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize=win *100/dw+ "px";复制代码

移动端框架的掌握

bootstrap

zepto http://www.wenshuai.cn/Manual/Zepto/

swiper

iscroll

MUI.....

移动端事件的处理

实现单击事件
cdn.code.baidu.com/

珠峰培训:移动端事件


移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup keydown)...
      TOUCH事件模型(处理单手指操做)、GESTURE事件模型(处理多手指操做)
      TOUCH:touchstart、touchmove、touchend、touchcancle
      GESTURE:gesturestart、gesturechange、gestureend

一、click:在移动端click属于单击事件,不是点击事件；在移动端的项目中我么常常会区分单击作什么和双击作什么，因此移动端的浏览器在识别click的时候，只有肯定是单击后才会把它执行；
   在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后，还须要等到300ms看是否触发了第二次点击，若是触发了第二次点击就不属于click了，没有触发第二次点击才属于click；

二、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑...
   单击和双击(300MS)
   点击和长按(750MS)
   点击和滑动(X/Y轴偏移的距离是否在30PX之内,超过30PX就是滑动)
   左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑 相反就是上下滑)
   左滑和右滑(偏移的距离 > 0 = 右滑 相反就是左滑)

三、移动端事件库
  ->FastClick.js:解决CLICK事件300MS的延迟
  ->TOUCH.JS:百度云手势事件库 https://github.com/Clouda-team/touch.code.baidu.com
  ->HAMMER.JS复制代码

touch模拟单击事件

->使用TOUCH事件模型实现点击操做(单击&&双击)
        on(oBox, 'touchstart', function (ev) {
            //->ev:TouchEvent =>type、target、preventDefault(returnValue)、stopPropagation(cancelBubble)、changedTouches、touches
            //->changedTouches和touches都是手指信息的集合(TouchList)，touches获取到值的必备条件只有手指还在屏幕上才能够获取，因此在touchend事件中若是想获取离开的瞬间坐标只能使用changedTouches获取
            var point = ev.touches[0];
            this['strX'] = point.clientX;
            this['strY'] = point.clientY;
            this['isMove'] = false;
        });
        on(oBox, 'touchmove', function (ev) {
            var point = ev.touches[0];
            var newX = point.clientX,
                    newY = point.clientY;
            //->判断是否发生滑动,咱们须要判断偏移的值是否在30PX之内
            if (Math.abs(newX - this['strX']) > 30 || Math.abs(newY - this['strY']) > 30) {
                this['isMove'] = true;
            }
        });
        on(oBox, 'touchend', function (ev) {
            if (this['isMove'] === false) {
                //->点击
                this.style.webkitTransitionDuration = '1s';
                this.style.webkitTransform = 'rotate(360deg)';

                var delayTimer = window.setTimeout(function () {
                    this.style.webkitTransitionDuration = '0s';
                    this.style.webkitTransform = 'rotate(0deg)';
                }.bind(this), 1000);
            } else {
                //->滑动
                this.style.background = 'red';
            }
        });复制代码

案例

PC端案例：rem+bootstrap单页排版的应用

移动端案例QQ音乐播放器：rem+zepto+音频播放+歌词处理

H5场景应用交互简历：rem布局+H5音频处理+CSS3+animate.css+swiper+zepto

新浪新闻首页：rem布局+swiper+zepto+iscroll+less+EJS

其余框架的使用：MUI案例->酒店的预约app