2019年12月10日H5的入门教程

菏泽炫佑科技

2019年12月10日H5的入门教程

手机现在是互联网*大的入口。 据《中国互联网报告》显示，移动互联网用户已突破8亿，人均](%/2/w/1240)

毫不奇怪，移动应用软件（App）开发工程师供不应求，一直是IT招聘的热点。

图像

如果你开始学习移动应用开发，你一定会听到H5这个词。 是当前主流的开发技术之一。 它使用方便、开发周期短、成本低、兼容传统Web开发。 然而，很少有文章详细描述H5是什么技术，它的原理是什么，以及它与其他技术有何不同。

本文是H5的入门教程。 今天是**篇，介绍基本概念。 内容尽量简单，但本来就不要太复杂。 希望这篇文章可以帮助新手入门，也可以供有经验的开发人员回顾和整理知识点。

图像

感谢中国*大的在线教育平台之一“腾讯课堂”对本系列教程的赞助。 他们现在推出了“腾讯课堂101计划”，推广优质课程资源。 想要提升前端技术能力的朋友可以关注文末的“一元”课程信息。

一、H5的含义

从表面上看，移动应用都是一样的，就是手机上点击图标就可以运行的应用程序，但它们的底层技术是不同的。 根据开发技术，App可以分为三大类。

这三类App的技术模式各有不同，各有优缺点。 企业通常选择其中之一作为主要技术堆栈来构建自己的移动应用程序。

图像

H5这个词可以理解为混合App模式，但它特指混合App的前端部分。 由于混合App的前端是HTML5网页，因此简称H5。 这个词是中国特有的，基本都是前端程序员使用的。 这个词在国外不使用，简单地称为混合应用程序。

要真正理解H5开发，首先需要了解什么是原生App，什么是Web App，因为混合App就是在它们的基础上诞生的。

2. 原生应用 2.1 概念

Apps是专门为特定移动平台开发的应用程序，不能在其他平台上运行。 如果一款手机软件想要同时支持苹果手机和安卓手机，就需要为每一款手机编写一个原生App。

从历史上看，原生应用程序*早出现，并与智能手机系统一起诞生。 它诞生于2007年6月，诞生于2008年9月，同时发布了自己平台的原生App开发方法。

本机应用程序使用与手机操作系统相同的语言。 iOS的原生App使用-C语言或Swift语言，则使用Java语言或语言。 由于与底层系统的语言和技术模型一致，因此原生App的性能和用户体验都非常好。

图像

2.2 优点

原生App的主要优点有两个：（1）更好的性能和体验； （2）系统所有软硬件API都可以使用，如GPS、摄像头、麦克风、加速度计、通知推送等2019年12月10日H5的入门教程，可以充分发挥系统潜力。

2.3 缺点

本机应用程序的主要缺点是成本。 每个手机平台必须建立独立的开发团队。 大公司一般有iOS和两个开发团队。 如果出现第三个平台（以前是Phone，也许未来是华为鸿蒙OS），就得组建第三个团队，成本会更高。

第二个缺点是本机应用程序使用底层操作系统的语言，这是一种重型编译语言。 开发和调试成本较高，时间周期长。

第三个缺点是必须下载并安装原生App才能使用。 只要版本升级了，就必须重新下载安装。 用户往往不愿意更新版本，厂商也被迫支持很久以前的旧版本。

3. Web 应用程序 3.1 概念

Web App是利用网页制作的应用程序，必须在浏览器中使用。 例如，当您在浏览器中发送和接收电子邮件时，您正在使用 Web 应用程序。

Web App主要使用Web技术，即HTML和CSS。 2008年，w3c组织发布了HTML版本5，简称HTML 5。这个版本大大增强了网页的功能，让网页可以作为应用程序使用，而不仅仅是显示文本和图片。 这就是Web App的由来。

图像

3.2 优点和缺点

Web App的优点是：（1）无需下载安装，打开浏览器即可使用，始终使用*新版本； (2)对于开发者来说，Web App编写速度更快，易于调试，并且不需要经过商店批准发布应用程序。

Web 应用程序有两个主要缺点。 首先，浏览器提供的API（即Web API）非常有限（目前只有相机、GPS、电池等少数几个）。 大多数系统硬件无法通过网页访问，也无法直接读取硬盘文件，因此Web App无法充分利用您平台的硬件。

第二个缺点是网页是通过浏览器渲染的，性能不如原生App，所以不适合性能要求高的页面。

3.3 Web应用程序的缺点

Web 应用程序需要打开浏览器才能使用，这意味着用户必须记住如何导航到它，可以直接键入 URL，也可以通过书签挖掘。 这使得进入Web App远不如原生App方便。 这是致命的。 事实证明，用户更喜欢原生应用。

谷歌曾调查了一千个原生应用和网页应用，发现网页应用可以覆盖更多用户（1100万 vs 400万），但原生应用的用户使用时间（188分钟）远远超过网页应用（9分钟）。

图像

图像

另一项调查发现，用户 87% 的时间花在本机应用程序上，13% 的时间花在网络应用程序上。 因此，企业很少开发Web Apps，而将原生App作为首选。

然而，Web App 并非没有竞争。 调查显示，普通用户每月平均使用 27 个原生应用，但访问 100 多个移动网站。 这意味着用户的App使用时间被排名靠前的App所占据。 小公司的App使用频率很低，获客成本极高，*终成为僵尸App。 因此，对于小公司来说，开发Web Apps更划算。 不仅成本低，还可以服务更多的用户，更好的宣传自己（可以通过搜索引擎付费）。

3.4 渐进式网页应用

为了推广Web App，的浏览器团队做出了很多努力。 他们认为Web App足以满足大多数App的需求，但三大缺点阻碍了其推广。

无法直接从手机**屏输入。 它缺乏在手机状态栏和屏幕锁定时推送通知的能力。 不支持离线访问（即使断网也可以使用）。

图像

为了解决这些问题，团队开发了一项新技术“渐进式Web应用程序”（Web App，缩写为PWA）。 它可以在手机中缓存网站以供离线使用。 它还可以在手机首屏生成图标，点击直接进入，并且具有推送通知的能力。 它没有浏览器的地址栏和状态栏，与原生App不同。 体验非常接近。

但PWA需要浏览器访问一次网站才能在首屏生成图标，而目前iOS系统的支持还不够理想，因此目前仍属于探索性技术，缺乏足够的成功案例。

4. 混合应用 4.1 概念

App（App），顾名思义，是原生App和Web App的结合体。 它的外壳是一个原生App，但是网页放在里面。 可以理解为混合App中隐藏着一个浏览器，用户看到的其实就是这个隐藏的浏览器渲染的网页。

图像

混合应用程序的本机 shell 称为“容器”。 隐藏在里面的浏览器通常使用系统提供的网页渲染控制（即控件），也可以有自己内置的浏览器内核。 从结构上来说，混合App从上到下分为三层：HTML5网页层、Web引擎层（本质上是一个孤立的浏览器实例）和容器层。

4.2 接口

混合应用中的网页与普通网页不同，可以调用底层系统的所有API。 秘密就在于外层容器提供了一个API，充当底层API的中介，让内部网页可以调用底层。

所谓API就是容器在底层接口和网页之间建立起一座桥梁，让双方进行通信。 容器一旦收到网页的请求，就会根据请求调用底层系统的API，然后将结果返回给网页。 语言中往往会提供API，以方便网页调用，也称为API。

图像

不同容器的API是不同的。 为某个容器编写的网页不能在另一个容器中使用，也不能在浏览器中使用，除非网页脚本兼容。

容器提供的API必须随平台更新。 例如，当iOS发布新版本并有新的硬件API时，容器也必须启动新版本的API。 如果容器跟不上，开发人员将不得不想办法自己编写缺失的 API，以便使用新硬件。

4.3 优点

混合App同时具有原生App和Web App的优点，同时避免了它们的一些缺点。 具体来说，可以概括为三点。

(1) 跨平台

Web技术是跨平台的，开发者只需编写一次页面即可支持多个平台。 换句话说，混合应用只需要一个团队，开发成本较低。

(2) 灵活性

混合应用程序高度灵活，可以轻松集成多种功能。 一方面，混合App可以轻松加载外部H5页面，实现App的插件化结构； 另一方面，Web页面可以方便地调用外部Web服务。

（三）开发便捷

调试和构建网页比本机控件更简单、更耗时。 页面更新也很容易。 只需在服务器上发布新版本并触发容器中的更新即可。 此外，Web开发人员更容易招募，传统的前端程序员可以承担开发任务。

4.4 缺点

混合应用程序的主要缺点是由于中间层的Web引擎，性能相对缺乏。 它不仅不如本机应用程序，而且由于它不是功能齐全的浏览器，因此可能比Web应用程序慢。

另一个缺点是，由于页面是跨平台的，所以无法使用仅特定平台提供的功能，导致体验不如纯原生App。 例如，早期的有一个物理后退按钮，但实际上没有，页面设计必须考虑到这一点。

图像

上图是iOS页面。

[图片上传中...(图片--24-1)]

上面是页面。 左上角的后退按钮与系统后退按钮相同。

4.5 小程序

*后说一下微信小程序。

图像

所谓小程序可以看作是针对特定容器的H5开发。 微信本身就是一个容器，有自己的接口（）。 外部开发者使用规定的语法编写页面，容器可以动态加载这些页面。

小程序对于微信官方的好处是拓展功能和应用场景，吸引外部开发者加入app开发，繁荣生态。 对于外部开发者的好处是有了流量入口，可以直接调用微信的各种功能（比如支付）。

今天H5相关概念的介绍到这里就结束了。 下一篇文章将介绍H5相关的开发工具和框架。

（正文结束）

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等