移动端H5开发

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28846087/article/details/79421902

移动端H5开发

移动端开发分为两个方向:
- native app 开发 (原生APP)
+ 安卓 (Java-Native)
+ IOS (Object-C / swift)
+ 所有在应用商店中下载安装的程序都是原生app(都是安卓和IOS开发的)
- web app 开发 (H5页面)
+ H5 / CSS3 / JS …
+ 我们开发的页面一般都是运行在手机端的浏览器中
- Hybrid混合app开发

native app
优势:直接安装在手机操作系统中的程序,所以可以操作手机内部的软件或者硬件,而且处理性能比较优秀(相对H5来说)

例如:
获取通讯录
读取短信
获取地理位置 (操作手机GPS)
操作摄像头
操作手机的重力感应器

当然需要用户的允许

弊端:版本升级更新需要用户自主,这样会导致新内容不能及时传达给用户

web app
优势:我们开发的H5是运行在手机端浏览器中的(原代码存放在服务器上,用户输入网址或者其它操作访问,从服务器端获取最新的原代码,然后在浏览器中呈现出来)

我们只要把服务器上的程序升级,用户重新访问,看到的就是最新版本(更新推广的及时性)

原生APP根据所在手机操作系统不一样,我们需要两个不同的技术团队,开发两款类似的应用(不能跨平台);但是H5开发不会,我们开发的页面可以适配任何操作系统(跨平台);

弊端:H5是运行在浏览器中的,不能直接操作手机系统中的软件和硬件(浏览器是原生app,H5想要操作手机软硬件,需要浏览器的支持);性能不是很好;

Hybrid混合开发模式
充分利用H5和native app的优势,把他们结合在一起,开发的一款app(安装在手机上的)
Alt text

HTML5

HTML5秘籍第二版

  • HTML5中新增加的语义化标签
    • header、footer、article、figure…
    • 以上标签不兼容IE6~8低版本浏览器,兼容处理:html5.min.js
    • 修改或者删除了一些标签:strong(重点强调)、small(附属细则)、hr(区域分割)…修改指的是改变了标签的语义化;font、center这些标签不建议大家使用了(删除);
    • 新增一些标记标签:mark(标记)、time(时间)、progress(进度)…
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动端开发</title>
    <!--条件注释:针对IE处理,大小写或者其它语法必须严格按照下面写法-->
    <!--[if lt IE 9]>
    <script src="html5.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navBox">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>
</body>
</html>
  • 针对于传统的表单元素进行升级
    • 传统表单元素:form、label、textarea、select、button…
    • input
      • text
      • password
      • radio
      • checkbox
      • file
      • submit
      • reset
      • button
    • 针对于传统的升级:给input新增加一些类型
      • search
      • email
      • number
      • tell
      • range
      • color
      • date
    • 升级:给表单元素新增属性placeholder(给表单元素设置提示信息)
    • 升级:提供了新的下拉框方式等

    • 给input设置新的类型作用:
      1、当用户输入的时候,可以根据设置的类型,调取出最符合用户输入的键盘(例如:类型设置为number,调取出来的就是数字键盘…)
      2、提供了CSS和JS新的验证方式(我们一般常用的还是正则验证)


表单验证:CSS验证
<style>
    input {
        border: 1px solid #CCC;
        outline: none;
    }

    #userEmail:valid {
        /*验证成功:浏览器内置验证机制验证结果是成功*/
        background: white;
    }

    #userEmail:invalid {
        /*验证失败*/
        background: lightpink;
    }
</style>
...
<input type="email" id="userEmail" placeholder="请输入邮箱!">
...
表单验证:JS内置验证
userEmail.onkeydown = userEmail.onkeyup = function () {
    //=>this.checkValidity():根据浏览器内置的验证机制,获取成功还是失败(TRUE/FALSE)
    if (!this.checkValidity()) {
        this.style.backgroundColor = 'lightpink';
        return;
    }
    this.style.backgroundColor = 'white';
};
表单验证:正则验证
/*
 * 移动端事件中一般都没有:keydown/keyup(移动端是虚拟键盘),我们使用input事件代替即可
 *
 * userEmail.oninput=function...
 */
//=>自己编写正则验证(项目中最常用)
userEmail.onkeydown = userEmail.onkeyup = function () {
    let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    let val = this.value;
    if (val.length === 0) {
        this.style.backgroundColor = 'white';
        return;
    }
    if (!reg.test(val)) {
        this.style.backgroundColor = 'lightpink';
        return;
    }
    this.style.backgroundColor = 'white';
};
  • 新增媒体解决方案:audio音频、video视频

  • 新增加canvas绘图:canvas是一个标签,我们可以基于js,把它作为一个画布,绘制出想要的图形或者动画

  • 新增加一些API(主要是供JS使用的)

    • webstorage:localStorage、seessionStorage 本地存储解决方案
    • web socket:新的客户端和服务器端通信方案
    • 获取地理位置或者重力感应等API

CSS3

图解CSS3(大漠)

  • 新增加一些选择器
    • nth-child
    • nth-of-type
  • 新增加 @font-face:基于它可以实现字体图标
  • 新增加一些常用的属性
    • border-radius
    • box-shadow
    • text-shadow
    • -webkit-filter
  • 针对于背景做了一些处理
    • background-size
    • background-origin
    • background-clip
  • 提供了变形属性:transform
    • 2D变形
      • scale
      • rotate
      • translate
      • skew
      • matrix
    • 3D变形
      • rotateX / rotateY / rotateZ
      • translate(X/Y/Z)
      • transform-style:preserve-3d
      • transform-origin
      • perspective视距
  • CSS3中的动画
    • transition过渡动画
      • property
      • duration
      • timing-function
      • delay
    • animation帧动画
      • name
      • duration
      • timing-function
      • delay
      • count:infinite
      • fill-mode:forwards、backwards、both
      • animate.css
      • @keyframes
  • CSS3中的盒子模型
    • box-sizing:border-box
    • flex
    • columns
  • CSS3中的媒体查询:@media
阅读更多
换一批

没有更多推荐了,返回首页