H5 移动端 响应式布局开发 Hybrid 混合开发

3,356 阅读17分钟

前言

文章涉及的内容可能不全面,但量很多,需要慢慢看。我花了很长的时间整理,用心分享心得,希望对大家有所帮助。但是难免会有打字的错误或理解的错误点,希望发现的可以邮箱告诉我ghui_master@163.com,我会及时的进行修改,只希望对你有所帮助,谢谢。 H5 移动端 响应式布局开发 Hybrid 混合开发

H5 ---> HTML 5 那么什么是 html 5 就是 HTML 第 5 版本

HTML :超文本标记语言

XHTML: 更加严谨的 HTML

HTML5: 新一代 HTML规范(适配移动端设备) 文档声明--> <!DOCTYPE html>

首先推荐几个学习H5 的好的学习网站推荐 及 书籍

我们来看下 HTML 5 都带来哪些新增的方法特性和 API (概述)

  • HTML / XHTML / HTML5
  • 新增的语义化元素
    • 用于构建页面的语义元素
    • 用来标识文本的语义元素
  • 调整、删除的元素
    • 删除:big / center / font
    • 调整:small / hr
  • web表单及交互
    • 新增很多的类型
    • 表单验证的几种方式
    • 文本框内容提示
    • datalist
    • ......
  • audio / video 音视频
  • canvas
  • HTML5 API
    • Web Storage 和 本地数据库
    • Web Workers
    • File API
    • History API
    • ......

真正的学习 HTML5 并不是 学习那些标签,而是学习它的各种API,他提供了大量的关于操作 JS 的API , 包括 audio / video canvas 都是要基于 JS 来实现

HTML 5 不仅仅是 只是提供了一些标签,它里面还提供了大量的方法 PAI ,供我们来操作很多功能

我们首先来看一下第一部分 先增加的 调整、删除的 语义化标签 以及表单源元素 的 增容

何为 标签语义化 ?-> 合理的标签做合适的事情

为啥要标签语义化 ? -> 有利于SEO搜索引擎优化推广 SEO:搜索引擎关键词排名推广 SEM:百度竞价

seo

TDK:有利于 SEO

TDK是什么

TDK其实是英文单词title description keywords 的缩写,是三个定义标签,中文译为: 标题、 描述、 关键词。

很明显,标题(title)就是用来写一句和网站运营内容的标题,告知搜索引擎我们的网站是做什么的,叫什么名字。

描述(description)是用来写一段简短的话,简单概述一下网站是做什么的,让用来可以清晰明了的对网站运营内容有个大概的判断。

关键词(keywords)是用来定义网站主要优化的核心关键词,这个标签的关键词页面是不会显示的,它是隐藏在源代码当中,目的是告诉搜索引擎蜘蛛这个网站所有运营的内容都将会是和这些关键词相关。

那么,在哪里可以设置TDK标签呢?

TDK标签作为页面最重要的标签,自然是要出现在页面的头部的,而且也只能出现在头部,即代码...之间。大家都知道蜘蛛的爬行习惯是从上到下,从左到右的爬行抓取的,所以头部的位置也是一个页面当中最重要的位置,权重自然是也是最高的。说岔了,还是说说tdk怎么写吧。

下面附上一段代码,大家可以学习一下。以珠峰网站为例:

<title>珠峰培训-十年专注前端培训,有口皆碑的前端培训机构</title>

<meta name="keywords" content="IT学习,前端培训,前端开发培训,web前端培训,javascript培训,JS培训,HTML5培训,CSS3培训,移动端培训,Node培训,react培训,Vue培训,ReactNative培训,北京前端培训,北京JavaScript培训,北京Node培训,北京HTML5培训,北京react培训,北京Vue培训,珠峰培训 ">

<meta name="description" content="珠峰培训_中国前端开发培训知名品牌,十年专注web前端培训,以专注立身,学习考试通过后再交学费,四周内无条件退学费;70%学员来自口碑推荐,强大的师资团队,最深入的课程体系,以学生为信仰的教学理念。我们专注的特色web培训有:HTML5培训,node.JS培训,前端开发培训,前端培训,移动端培训,react培训,Vue培训,webpack培训,ReactNative培训,前端架构师培训" />


tdk

上面是引发的一个知识点 我们继续我们的主题

  1. 新增的语义化标签 -> 常用的

    在兼容的情况下 是【块级标签】

    1. header 头部区域
    2. main 主体
    3. footer 尾部
    4. article 文章
    5. nav 导航
    6. figure 配图
    7. figcaption 配图说明
    8. aside 与主体内容无关(一般应用于侧边栏)
    9. section 普通区域

    【行内标签】 mark 文本标记 time 日期标记 ......

    1. 调整、删除的元素

    ​ 删除:big / center / font -> 这些标签 你用不报错 但是不符合规范

    ​ 调整:small / hr

    ​ small --> 此标签 原意 为 缩小文本,但是在h5 中语义化为 附属 细则

    ​ strong --> 此标签 原意为 文本加粗 ,但是在h5 中语义化为 重点朗读 声明

    ​ hr --> 此标签 原意为 样式里有一条线 ,但是在h5 中语义化为 分割区域

    删除 ---> 删除不是说彻底删了,你用就报错,而是不推荐你使用

    调整 --> 调整在原有的基础上,修改为最新的意思

    HTML 5 存在兼容性问题

    处理兼容(IE6~8)只需要导入一个JS:html5.min.js

    3.web表单及交互

    • 传统的表单元素 form 前后端不分离项目中的表单提交
    <form action="/adduser. php">
    < input type="submit" value="提 交">
    </form>
    

    ​ input: text/radio/checkbox/button/submit/reset/hidden/file... ​ textarea ​ select 下拉框

    <select name=""id="">
    <option value=""> 北京 </option>
    <option value=""> 上海 </option>
    </select>
    
    
    • HTML5中新增表单元素或者input中新增的类型 input:

    • search -> 搜索框

    • email -> 邮件框

    • tel ->电话框

    • number->数字框

    • date->日历框

    • time->日期框

    • color->色板框

    • range->滑动杆

    • ...

      1)功能强大

      2)在移动端能调取出对应的键盘,方便用户输入

      3)内置表单输入内容格式的验证

    <div class="formBox">
    		<input type="email" id="emailInp" placeholder="请输入邮箱地址">
    		<p id="emailTip">输入的邮箱格式不正确~~</p>
    	</div>
    <script>  --js验证
    // HTML5新表单类型自带验证方式
      checkValidity() 
    
     emailInp.onkeydown = emailInp.onkeyup = function () {
       if (!this.checkValidity()) {
          emailTip.style.opacity = 1;
          return;
       }
       emailTip.style.opacity = 0;
    } 
    </script>
    
    -> css验证 
    <style>
    		.formBox input:invalid+p {
    			opacity: 1;
    		}
    
    		.formBox input:valid+p {
    			opacity: 0;
    		}
    </style>
    <div class="formBox">
    		<input type="email" id="emailInp" placeholder="请输入邮箱地址">
    		<p id="emailTip">输入的邮箱格式不正确~~</p>
    	</div>
    
    • CSS3中的重点知识

      推荐书籍:图解CSS3

      • @font-face

      • CSS3选择器

      • 常用样式属性:文字和边框的处理

    • 背景的处理

    • 渐变色背景

(1)从上到下渐变:

        ```background: linear-gradient(red, blue); 

(2)从左到右渐变:

       ```  background: linear-gradient(to right, red , blue); 

(3)对角(从左上角到右下角)渐变:

       ```   background: linear-gradient(to bottom right, red , blue);

www.jianshu.com/p/133d7609e…

    • 背景图片处理

    background-size 属性规定背景图片的尺寸

background-origin 属性规定背景图片的定位区背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    • filter (滤镜)

    drop-shadow 给图像设置一个阴影效果:

    Grayscale 将图像转换为灰度图像:

    Opacity 转化图像的透明程度

    www.runoob.com/cssref/css3…>

    • 变形和动画

      • transform

      • transition

      • animation

      • 3D变形动画

    • 盒子模型

      • box-sizing

      • column

      • flex box

    • 媒体适配和响应式布局开发

    • 兼容处理 和 prefixfree.min.js

    • 兼容处理 和 prefixfree.min.js

    我们重点看一下 媒体适配和响应式布局开发

    响应式布局开发设计

    • 响应式布局开发概述

    • Hybrid混合APP开发

    • 响应式布局开发技巧

      • viewport

      • dpi适配

      • @media

      • rem

      • ......

CSS预编译语言:less

lesscss.cn/

  • LESS概要
    • 什么是LESS
    • LESS的作用

less 是一门 CSS预编译语言 , 和其类似的预编译器还有:sass、stylus等;而所谓的预编译,其实是把css这种标记语言,按照面向对象(编程语言)的方式进行编写(有变量、函数、判断等操作),但是这种写法浏览器不能直接的识别,需要我们把其再编译为正常的css代码才可以; 与此同时,使 CSS 更易维护和扩展

Less 可以运行在 Node 或 浏览器端。

  • 编译LESS
LESS的编译常用的分为两种
1.开发环境下(开发项目的时候)
我们基于less-2.5.3.min.js进行编译:基于link把less文件导入,但是rel的值必须是stylesheet/less,这样导入的JS会找到这些less文件,把less编译为css即可
<link rel="stylesheet/less" href="css/index.less">
index.less 中文件格式
/* 我们基于@import最好导入的是LESS文件(只有这样最后才能编译到一起;设置reference是只导入进来调取使用,编译的时候不进行编译; */
@import './reset.less';
@import (reference) './common.less';

'./common.less' -> 我们调用此文件是为了使用其中方法,最终要的是方法执行后的 返回值给我们 


2.生产环境下(项目部署上线的时候)
我们需要把less编译为css,然后让页面中导入的都是编译后的css
需要基于node环境,并且基于less模块进行编译(命令操作方式)
  - 安装NODE(安装NPM)
  - $ npm install less -g  (MAC电脑上最好设置sudo安装)
  - 找到对应的less文件目录,在目录中:$ lessc xxx.less xxx.css / -x (设置-x是为了把代码进行压缩)
  • LESS中的变量

变量 就是存储值和代表值 和 js 中同作用

  • Mixin混合

    • 基本使用
    • extend继承

    继承

    1.基于继承也能实现样式的公用(原理:两个样式类公用同一套代码,但是后代样式不能被继承)

    .box1 {
    	@A1: lightgreen;
    	@W: 200;
    	@H: 200px;
    
    	.func_center(@W, unit(@H, px));
    
    	box-sizing: border-box;
    	width: unit(@W, px);
    	height: @H;
    	border: 5px solid @A1;
         
    //-> .box1 img
    	img {
    		//@W-20这样被理解为是一个变量名(变量名可以包含-)
    		width: unit((@W)-20, px);
    		height: unit(unit(@H, px)-20, px);
    	}
    
     .box2 {
     	&:extend(.box1); 
     }
    
    .box2:extend(.box1) {}  
    ->  后代IMG 样式不能被继承 ,只能继承到 box1 的   
    
    • 命名空间和作用域

    每一个大括号都是一个私有的作用域,在里面用到的变量,先看是否为私有的(是否在当前作用域中声明过和形参变量),不是私有的,找上级作用域中的 =>"类似于JS作用域链这套机制"

    • !important
    • Parametric Mixins 带参数的函数

    函数

1.每一个样式类都能被充当一个函数,直接在其它的作用域中调取执行(执行特点:不需要传参,可以不加小括号) =>这种函数的调用是把原有的代码都原封不动的拿过来一份一模一样的(包括其所有的后代样式)

2.带参数的函数(创建函数带着小括号),也是直接点的方式调用,但是编译成为css的时候,函数不会编译,但是函数执行出来的代码会放到每一个调取函数的选择器中

.func_center(@W: 100, @H: 100) {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: unit(-@H/2, px) 0 0 unit(-@W/2, px);
}

.func_transition(@property: all, @duration: .5s, @timing: linear, @delay: 0s) {
	// transition: @property @duration @timing @delay;
	transition: @arguments;
}

img {
	.func_transition;
	.func_transition(@duration: 1s);
	.func_transition(opacity, .3s, ease, 0s);
}

    • Mixin Guards 设置条件
  • Parent Selectors 当前选择器和父选择器连接符&

&嵌套中的连接符,让后面的选择器紧挨着父选择器 .box1>img

​ &>img { ​ transform: skew(45deg); ​ }

  • Loops 递归调用
.loop(@n) when (@n<=4) {
	.loop(@n+1);

	.column-@{n} {
		width: unit(@n*10, %);
	}
}

.loop(1);
  • less中的内置函数

    • unit 单位处理
    //-> unit:less中内置的函数,用来设置或者去除单位的
    .box1 {
    	@A1: lightgreen;
    	@W: 200;
    	@H: 200px;
    
    	.func_center(@W, unit(@H, px));
    
    	box-sizing: border-box;
    	width: unit(@W, px);
    	height: @H;
    	border: 5px solid @A1;
    
    	//.box1 img
    	img {
    		//@W-20这样被理解为是一个变量名(变量名可以包含-)
    		width: unit((@W)-20, px);
    		height: unit(unit(@H, px)-20, px);
    	}
    
    • darken - 降低 / lighten --> 增加

修改元素中颜色的亮度。 它有以下参数:

  • color :它代表颜色对象。
  • amount :它包含0 - 100%之间的百分比。
  • 方法:它是可选参数,通过将其设置为相对,用于相对于当前值进行调整。

响应式布局开发:让H5页面适配不同的设备

项目类型:
 1.PC端产品(一般用于大型项目,大型项目都是PC和移动端各做一套产品)
			  =>一般不需要做响应式开发,都是固定宽高的布局(100%还原设计稿)
			  =>有时候全屏的项目,需要我们把最外层容器的宽度设置为百分比布局

	2.移动端产品(不需要PC访问处理)
	=>webApp:把开发的H5页面放到手机端浏览器、微信、自己公司的APP中运行 “Hybrid混合APP开发” 
	=>小程序
	 =>APP:IOS、ANDROID、前端(react native、flutter、uni-app、ionic、phoneGap、cordova...)

	=>需要做响应式布局开发,但是只需要适配移动端设备即可
	  手机尺寸(px):320、375、414、360、480、540...
			  PAD尺寸:768*1024
			
	3.PC端和移动端用同一套项目
	=>需要响应式布局处理
	=>这种产品一般都是简单的企业展示站  例如:        https://www.huawei.com/cn/
	=>技术栈:@media

	响应式布局开发 “勇于探索,敢于尝试 =>多思考”
	   1. 媒体适配 @media
	   2. 群魔乱舞时代
		 =>固定布局
		 <meta name="viewport" content="width=320px...">
		 =>等比缩放布局
		 按照固定的样式写一版(例如:320),然后根据设备的宽度,让其除以320,计算出缩放的比例,最后让整个HTML基于 transform:scale(比例) 进行缩放
	  3. rem响应式布局开发(等比缩放)

响应式布局开发的基础

我们把HTML5页面放到手机上预览,默认情况下,不管手机设备有多宽,HTML都是按照980(或者1024)宽度渲染的,这样页面会整体缩小(内容也都会缩小)

解决:viewport视口(layout viewport 布局视口),设定页面渲染中的一些规则
width=device-width:让当前页面渲染的宽度和设备宽度保持一致
initial-scale=1.0:初始缩放比例1:1
maximum-scale=1.0:最大缩放比例1:1
minimum-scale=1.0:最小缩放比例1:1
user-scalable=no: 禁止用户手动缩放
       
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


vp

??? 什么是rem 它的布局原理是什么

rem(font size of the root element):是指相对于根元素的字体大小的单位,其布局的本质是等比缩放,一般是基于宽度。

将设计稿转化为手机屏幕上的内容,就类似于画地图,按照一定的比例进行缩小绘制

rem

REM响应式布局开发

第一步:拿到设计稿后(现在设计稿一般是750PX的),我们设定一个初始的REM和PX的换算比例(一般设置为1REM=100PX,为了方便后期换算)

第二步:测量出设计稿中元素的尺寸(PS测出来的是PX单位),在编写样式的时候全部转换为REM的单位(除以100即可) =>100%还原设计稿

第三步:编写一段JS,获取当前设备的宽度,让其除以设计稿的宽度750,再乘以初始的换算比例100,计算出当前设备下,1REM应该等于多少像素(只要改变HTML的FONT-SIZE就可以);这样HTML字体大小一改,之前所有以REM为单位的元素都会跟着自动缩放......

现在真实项目中,主体响应式布局以REM为主,部分效果实现可以基于FLEX来做,需要样式微调增还是要基于@media来完成的...


 DPR适配:屏幕像素密度比 

了解单位区别

CSS常用的单位:
   px 像素(固定单位)
   
   em 相对单位,相对于父元素的字体大小设定的单位
   
   rem (root em)相对于当前页面根元素(HTML)的字体大小设定的
   
   %
   
   deg
   
   s / ms
  .................

px

app 发展史 和 Hybrid 混合开发

原生 app

Native App : IOS和ANDROID ios:object-c / swift android:java-native

优点

直接运行在操作系统中(能够直接操作设备中的软件或者硬件,而且性能不错)

缺点

不能跨平台内容不能及时更新或者让用户及时的看到

webApp

webApp : H5页面 => H5 + CSS3 + JAVASCRIPT

优点

跨平台开发(手机端的浏览器般都是webkit内核的)、强制自动更新的,把内容及时传达给用户

缺点

H5运行在手机的浏览器中,而不是操作系统中(操作手机软硬件功能需要浏览器的支持,而且性能也不好)

Hybrid混合APP开发

Hybrid混合APP开发: =>把webApp嵌入到Native App的webview中

开发一款 珠峰课堂 APP 它的壳子是由原生来做的

把操作软硬件和一些需要高体验或者支付分享等功能交给native app开发

在 webview 中 嵌入 H5 页面

webview就是不叫浏览器的浏览器,它也是基于 webkit内核渲染页面的

前端开发者把网址给APP开发者,他们会把其嵌入到webview中

例如

webview中有一个自拍功能,

在使用此功能时,它会向app 发送请求

调取使用手机摄像头

当 App接收到请求会调取摄像头进行拍照,拍照后把保存在相册中的照片地址给H5返回

此时就涉及到了 Hybrid 的重点 H5 和 app 的通信

JSBridge

JSBridge原理:向webview中注入所有需要H5后 期调取APP的方法(类似于window的全局对象)

伪协议传输

===>只用于IOS ,因为安卓是开源系统,不安全

当拍照的touchstart 事件触发的时候

window.location.href= "sports://kbs.com/photo?callback= fn" -->

当我们在H5 页面发送一window.location.href 跳转页面的请求 ,而我们的 H5 在 APP上运行的当,我们所有请求 app 都可拦截到 ,当他拦截到 这个请求是 sports:// 这个伪协议时,然而此协议是我们提前商议好压根不存在伪协议, 他发现只要是 sports://协议不是要跳转页面,而是调用photo 方法 把我们的函数传给他 然后帮我们拍照,然后帮我们把函数执行,并且把照片给我们这个函数 那我们在此函数就可以拿到照片了

Hybrid

移动端常用的类库或者插件

移动端TOUCH事件处理

  • zepto.js 作为操作DOM的类库(PC端用JQ,移动端用ZP)
  • swiper.min.js 作为滑屏处理插件
  • makisu.min.js 作为下拉3D菜单的插件
  • jQuery上下滑动加载刷新插件iscroll.js 下面是效果图
  • www.jq22.com/yanshi6625 ....

移动端事件 ——差点忘了你

移动端手指事件

单手指事件模型 Touch

  1. touchstart 手指按下
  2. touchmove 手指移动
  3. touchend 手指松开
  4. touchcancel 操作取消(一般应用于非正常状态下操作结束)

多手指事件模型Gestrue

  1. gestruestart
  2. gesturechange / gestrueundate
  3. gestureend
  4. gesturecancel

移动端有单独的触摸事件,一般不使用click事件,因为在移动端有300ms的延迟;

let box = document.querySelector('#box');
  • touchstart 触摸元素时触发
box.addEventListener('touchstart', function (e) {
    console.log('toustart');
    console.log(e); // TouchEvent 触摸事件对象
    // 在触摸事件对象中,把触摸的信息存放在touches中;
    console.log(e.touches[0].clientX);
  });
  • touchmove 在元素上滑动时触发
box.addEventListener('touchmove', function (e) {
    console.log(e.touches);
  });
  • touchend 当手指离开元素时触发
box.addEventListener('touchend', function (e) {
    console.log('touchend');
    console.log(e.changedTouches); // touchend没有e.touches ,事件信息放到了e.changedTouches属性上
  })