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

时间  2021-08-12
标签 javascript php css html 前端 html5 java node react android 栏目 无线 繁體版
原文   原文链接

前言

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

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

HTML ：超文本标记语言css

XHTML： 更加严谨的 HTMLhtml

HTML5： 新一代 HTML规范（适配移动端设备） 文档声明--> <!DOCTYPE html>前端

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

咱们来看下 HTML 5 都带来哪些新增的方法特性和 API （概述）java

  • 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 来实现node

HTML 5 不只仅是 只是提供了一些标签，它里面还提供了大量的方法 PAI ，供咱们来操做不少功能

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

何为 标签语义化 ？-> 合理的标签作合适的事情android

为啥要标签语义化 ? -> 有利于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、37五、41四、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属性上
  })
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程