1.1　移动互联网Web开发技术介绍

什么是移动Web，Web网页和原生App有何区别，移动Web开发有什么特点，移动Web App是如何工作的，本节将对这些问题逐一进行介绍。

1.1.1　移动Web是什么

互联网的发展总是伴随着人们上网设备的更新。在2008年之前，大多数的上网设备还是以台式计算机为主，网上资源也相对较少。那些年比较流行的论坛网站有天涯社区、猫扑社区等，搜索引擎则有百度搜索和搜狗搜索等，新闻资讯类的网站则有四大门户网站——新浪、网易、搜狐和腾讯。这些网站大多数都是以文字加图片的方式展示信息，构成了早期PC（Personal Computer，个人计算机）端网页的内容，并采用提交各类表单进行页面跳转来作为与用户的交互方式。

当时的手机虽然已经很普遍了，但是大多数的功能还是用来接打电话和收发短信，受2G移动网络的限制，使用手机上网或者进行娱乐的应用相对较少，并且其他可供使用的移动互联网软硬件产品和相关业务也较少，大部分的上网应用还是集中在PC端。

在2012年左右，随着移动端Android和iOS操作系统的出现，智能手机如雨后春笋般进入我们的生活中，并且出现了微信这种重量级的移动互联网产品业务，伴随着3G和4G移动网络的普及，中国的互联网才真正进入高速移动互联网时代。

简单总结一下，移动Web就是利用移动端浏览器承载的Web网页所呈现出来的程序App，移动Web技术就是将传统的Web开发技术（JavaScript，CSS，HTML）应用在移动端，需要注意的是，移动Web技术与Android、iOS这种原生的技术是不一样的。

1.1.2　Web网页和原生App的区别

随着移动互联网的高速发展，源自用户界面的前端工程师逐渐从软件工程师中独立出来，前端开发技术也逐渐衍生出以下几种分支：

·　原生应用（Native App）开发：这类开发技术是完全使用移动端系统语言编写客户端应用，iOS系统采用Object-C或者Swift语言，Android采用Java语言。采用原生应用（或称为原生App）开发的项目得益于功能强大且丰富的原生接口，可实现较为复杂的交互需求，用户体验好，但灵活性不强，开发成本高。

·　Web应用（Web App）开发：这类开发技术也称为移动Web开发或者HTML 5页面开发，是采用HTML+CSS+JavaScript语言开发的。采用Web应用开发的项目由多个前端页面组成，这些页面多采用更新的HTML 5技术，与传统的PC网页不同的是，这些前端页面有更强的适配性和性能要求，并且利用原生应用的WebView组件或者系统自带的浏览器提供应用的壳子，最终形成一个看似是App的应用程序，所以称作Web应用。Web应用中的每个页面都可以单独在移动浏览器里打开，跨平台和可移植性较强，但性能体验和功能性不如原生应用。

·　HyBrid App（混合类应用）开发：这类开发技术介于原生应用开发技术和移动Web开发技术之间，是上面两种开发技术的混合版。这类应用整体上看是一个原生应用，功能性和交互性强的部分采用原生的语言开发，另外部分内容会采用WebView组件构成页面容器，采用HTML+CSS+JavaScript语言开发前端页面，同时会提供可定制化的原生应用组件和接口来让前端页面调用，拓宽前端技术的能力，最终组成一个含有原生应用开发技术和移动Web开发技术的混合类应用。

这三类App之间的关系如图1-1所示。当前比较流行的移动互联网产品，例如微信、手机淘宝、豆瓣等都是比较典型的HyBrid App。为了满足更多的动态化需求，挣脱每次发布都需要受到应用市场上架的限制，混合模式也衍生出越来越多的客户端动态化方案，其中包括以前端技术为主的微信小程序、React Native等方案。总之，无论是哪种方案和应用，移动Web开发都是非常重要且必不可少的技术，并且随着5G时代的到来，越来越丰富的移动互联网应用会进入人们的生活，这些应用的技术实现都会用到移动Web开发中。

1.1.3　移动Web开发的特点

相信大部分读者或多或少都掌握了一些PC端开发技术或具有开发PC端页面的经验，实际上传统的PC端开发和移动Web开发所使用的技术栈基本上是一致的，都是采用HTML+CSS+JavaScript语言来开发的，但是从产品形态、网络环境以及性能要求上来看，它们还是有不少区别的：

·　由于移动设备屏幕较小，而要将原本在PC端的信息内容呈现在移动端，就需要进行优化和精简，因此App界面设计的复杂度比传统PC端要小，这其实降低了一定的开发难度，但是移动端的页面所运行的环境是非常多变的，不同的智能手机或移动设备的屏幕各不相同，有的屏幕大，有的屏幕小，有的采用高清屏，有的采用标清屏，所以在屏幕适配上，移动Web页面有着更高的适配性要求。

·　传统的PC端页面开发始终逃脱不了浏览器兼容性问题，从最开始的IE系列浏览器到当下流行的谷歌Chrome、火狐（Firefox）以及360浏览器等，由于各浏览器厂商的标准不同，导致前端工程师始终要和这些“不标准”斗争，浏览器兼容性问题一直是一个比较令人头疼的问题。好在目前大多数智能手机或移动设备自带的移动端浏览器都采用WebKit(1)内核，统一的标准使得移动Web开发需要处理的浏览器兼容性问题变少了一些。

·　移动设备虽然可以使用WiFi上网，但是不排除在一些关键时刻需要使用3G或4G移动网络上网，这些情况下的网络速度与固网宽带的网络速度相比还是要慢一些，更重要的是这些网络的资费要贵很多，并且当网络信号差时，会有很糟糕的用户体验，所以如何优化移动端在弱网络下的页面性能，提升用户在弱网络下的使用体验，是移动Web开发的一项非常重要的技术。

·　移动设备本身的CPU、内存以及存储设备与PC端相比，差距还是很大的。同样的一个页面在PC端上处理假如需要10毫秒，换到移动设备上可能需要几倍的处理时间，而互联网上的应用响应时间太长会导致大量用户的丢失，所以编写健壮性更强、性能更高效的代码不仅是PC端需要关注的，在移动端更需要关注。

在过去，当一个公司或者企业需要开发一个互联网产品时，首先都会想到PC端，并且以PC端的用户体验为主，如果刚好有移动端的需求，也大多是移植PC端的设计。而现在，这类现象已经悄然发生变化，PC端的业务热度已经降低，以移动端为主的业务理念逐渐成为互联网产品的研发方向，这种新的理念被称为“Mobile First”（移动优先），并延续至今。因此，移动Web开发也就变得更加重要了。

1.1.4　移动Web App是如何工作的

移动Web App在本质上就是利用WebView组件（本质是浏览器）提供应用的壳子，最终形成一个看似是App的应用程序。具体来说就是每个原生应用（无论iOS还是Android）都会提供WebView组件，而WebView只需要一个页面的地址就可以进行加载和渲染，同时把导航栏、菜单栏和一些不需要的按钮进行隐藏，这样就构成了一个App，具体工作流程如图1-2所示。

正如图1-2所示，掌握好HTML、CSS、JavaScript技术是开发移动Web App的关键，同时结合Vue.js框架可以高效地开发出移动Web App。