前端移动端主流分为以下三种：Native App ，Hybrid App ，Web App

1 移动端开发分类

1.1 Native App 原生App开发

优点：

（1）用户体验优秀 （2）出色的用户体验 （3）令人满意的用户体验 （4）卓越的用户体验

（2）稳定的性能

（3）操作迅捷

（4）可以轻松访问您的本地资源，如通讯录和相册。

（5）能够设计出色的动效，转场

（6）提供系统级别的贴心通知或提醒

（7）用户保留率较高

缺点：

（1）开发成本昂贵

（2）维护费用昂贵

（3）更新速度较慢，因为在不同平台上提交、审核和上线的流程相对复杂。

总的来说，native app开发从android、ios智能手机出现就有了开发技术，性能体验最优，API比较完善，但是学习起来难度比较高，开发成本比较高（跟开发周期相对来说比较长也是有关系的）。

1.2 Web App 网页App开发

优点：

（1）完全自主控制发版，可随时进行更新。 （2）拥有完全的发版自主权，能够随时进行更新。 （3）具备完全的发版自主能力，并且可以随时进行更新。 （4）实现了完全的发版自我掌控，可以随时进行更新。

2. 由于其本质是基于Web技术开发的，因此跨平台性是其独特之处，使得它能够在各种平台上无缝运行。

（3）成本低，使用Webview嵌入开发Web页面非常迅速，只需一个人即可轻松完成。

缺点：

1. 性能不佳 2. 性能表现欠佳 3. 性能较差 4. 性能不理想

在网络信号弱或无法连接的情况下，用户体验受到影响。

（3）适用于需要展示的项目，但如果要实现的功能较为复杂，则可能无法胜任。

总的来说，与Native App相比，Web App在体验方面受限于网络环境和渲染性能。Web APP对网络环境的依赖性较大，因为用户在使用时需要从服务器请求显示页面。如果用户遇到网速慢或者网络不稳定等其他环境问题时，请求页面的效率会大打折扣，导致用户使用中出现不流畅、断断续续的不良感受。同时，H5技术自身渲染性能较弱，在支持复杂图形样式、多样动效和自定义字体等方面有所欠缺。因此，在设计Web App时应注意以下几点：1.简化不重要的动画/动效；2.简化复杂的图形文字样式；3.减少页面渲染频率和次数。

1.3 Hybrid App 混合型App开发

优点：

（1）享受卓越的体验 （2）畅享绝佳的用户体验 （3）尽情感受无与伦比的体验

（2）具有出色的稳定性和动态性

（3）相对于其他选项，跨平台的成本较低。

不足之处：对团队技术栈要求较高，尤其是在性能优化方面。

Hybrid App是一种结合了Native和Web的混合开发方式。其中，以cordova（前身为phonegap）作为代表，现已移交给Apache，并引入核心技术JsBridge实现JS调用Java和Java调用JS的功能。由于采用混合开发方式，Hybrid App在用户体验上接近原生应用，具有较高的稳定性和快速发布版本的优势。

2 Viewport视口

2.1 视口

视口是移动设备上用于显示网页的区域。通常，视口的宽度会比移动设备的可视区域更大，可能是980px或者1024px。这样做的目的是为了能够完整地展示针对PC端设计的整个网页。然而，这也带来了一个问题，即在移动端会出现横向滚动条。为了避免这种情况发生，移动端会将视口缩放到与移动设备窗口大小相同。然而，这样做可能导致网页难以观看。为解决此问题，可以使用meta标签中的name属性设置viewport，并将其大小设置为与移动设备可视区域相同大小来优化浏览体验。

在移动设备上，用于展示网页内容的区域被称为视觉窗口（viewport）。视觉窗口可以根据需要设置高度和宽度，并且可以按比例进行放大或缩小。此外，还可以设置是否允许用户自行缩放。

2.2参数说明

以下是对该段话的改写： width: 宽度属性用于设置视口的宽度，可以使用device-width特殊值进行设置。 initial-scale: 初始缩放比是一个大于0的数字。 maximum-scale: 最大缩放比。 minimum-scale: 最小缩放比。 user-scalable: 用户是否可以进行缩放，可选值为yes或no（也可以使用1或0表示）。

2.3 设置方法

3 移动端适配布局

使用百分比自适应布局（流式布局）同时需要对移动端的viewport视口进行设置，就可以达到适配的目的。

3.1 流体布局+少量响应式

流体布局是一种使用百分比来设置元素宽度的布局方式，而元素的高度则可以根据实际需要设定固定值。在流体布局中，由于边线无法使用百分比进行设置，我们可以通过样式中的计算函数calc()来灵活地设置元素宽度，或者利用box-sizing属性将盒子设置为边线计算盒子尺寸。 响应式布局则是通过媒体查询的方式，在不同浏览器宽度下应用不同的样式块来实现。每个样式块对应着特定宽度下的布局方式，从而使页面能够适配多种终端屏幕（如PC、平板和手机等），实现了响应式设计效果。

3.2 基于rem的布局

rem是相对于根节点的字体大小单位，而根节点指的是HTML标签。通过设置HTML标签的大小，可以统一其他元素相关尺寸的设置使用rem单位。这样一来，所有元素都有了一个统一的参照标准。当改变HTML文字大小时，会同时改变所有使用rem单位设置尺寸的元素大小。

3.3 弹性盒模型

4 移动端端跨平台开发框架

移动端跨平台框架之争，其实主要是 谷歌/脸书/微软 三家争霸。
在移动端开发项目中。开发资源不够时，同时由两个团队维护安卓和IOS两套原生APP是成本很高的。此时，就需要选择一个同时支持多平台的客户端开发框架，能够使用一套代码，编译出多平台的APP。

通过这种方法，不仅可以减少开发人员数量，还能节省开发成本。此外，由于代码的统一性，避免了因不同平台版本分支而导致的用户体验差异。

如果你想使用非前端语言进行开发，有几个选择可供考虑。一种是使用Flutter或者MAUI等框架。Flutter需要学习一门新的Dart语言，但是这门语言的特性简单易懂，学习起来并不困难。另外，MAUI则是采用C#进行开发的，适合那些熟悉微软技术栈的团队。 目前在前端JS领域中，主要有几种工具可供选择：UNI-APP（基于VUE技术栈）、Taro（基于React技术栈）、React Native、Cordova以及HTML5。

4.1 React Native

官方网站链接：https://reactnative.dev/ 项目源代码链接：https://github.com/facebook/react-native

React Native这个名字一听就知道是谁的杰作了，不用多说了。
此外，还有一些框架支持将代码编译为React Native，以提供客户端开发支持。例如京东的小程序开发框架taro，以及Vue Native（已停止维护）。

4.2 UNI-APP / Taro

uni-app和taro都是专注于跨平台小程序开发的框架，它们分别基于Vue和React进行开发。uni-app由dcloud公司开发，可以说是国内最早推出小程序概念的公司之一，甚至早于微信小程序的发布。官方提供的框架支持直接将代码编译为安卓和iOS应用。而taro则由京东开发，同样可以通过编译为React Native来实现移动APP支持。

4.3 Cordova

Apache Cordova是一款移动开发框架，由Nitob1于2009年创立并推出。其官网地址为https://cordova.apache.org/。最初，该框架的主要目标是解决Android、iOS、BlackBerry和微软Phone等四个平台之间的跨平台问题。然而，如今只有Android和iOS仍在持续支持该框架。

这个框架的核心设计理念是为硬件设备提供API接口，使用简单且适用于Web端的JavaScript语言进行调用，以实现相应功能。

从架构的角度来看，我们在原生基础上引入了一个Cordova容器，通过简单易用的JavaScript语言实现了移动端UI界面的统一。这一举措可以被视为跨平台发展的重要里程碑。采用JavaScript语言作为UI界面的选择还有一个优势：与Web端保持一致。这样就能够实现iOS、安卓和Web三个平台的统一化。

然而，Cordova也存在一些缺点：

(1) Cordova在实现自定义绘制视图和布局等复杂界面方面存在相当大的挑战，目前尚未完全解决。因此，Cordova更适用于简单的界面设计。 (2) Cordova的更新速度与操作系统的更新速度之间存在明显差距。例如，最新版本的Cordova支持Android 10，而实际上Android已经发展到了12。 (3) 近年来，使用Cordova进行软件开发的人数逐渐减少。从2019年到2021年期间，使用Cordova进行开发的人数下降了16%。 基于以上原因，其他移动框架正在逐渐取代Cordova。 另外，在补充项目经验时：我之前有接触过Cordova，并且在使用过程中确实感受到了一些问题。首先是接口设计相对简单粗放，并且缺乏足够的异常保护机制。其次，在性能方面也存在一定问题。比如，在打开一个包含2000人企业组织架构数据的应用时会出现较长时间的白屏现象。

4.4 HTML5

H5是HTML5的简称，它是移动端最常用的跨平台框架之一。

从整体架构来看，H5框架是一种在移动端上使用UIWebView控件打开HTML5页面的解决方案。HTML5页面主要由前端开发人员负责编写，而移动端则负责处理用户交互和原生开发部分。当HTML5页面需要与原生应用进行事件响应或数据交换时（例如按钮点击），通常会通过JSBridge进行交互，并从原生应用获取工号、token等数据。

我认为在所有的跨平台框架中，这种方式应该是最简单的（前面的Cordova还需要学习）。只需要一个前端开发人员完成HTML5页面开发。当需要与原生进行交互时，可以通过WebViewJavascriptBridge或者JavaScriptCore库进行注册或回调。

就性能而言，H5和Cordova框架几乎没有明显差异。它们都采用接口进行交互，并使用JavaScript来渲染UI界面，因此在性能方面相当接近。

项目经验补充：在该项目中，我们成功实现了H5框架的应用，将前端和移动端的UI界面进行了有效分离。这样一来，前端开发人员可以专注于设计出精美的界面，而移动端开发人员则能够更好地完成各种功能需求。两者之间相互独立运作，在需要交互时才会采用JSBridge进行通讯。

它的缺点在于JSBridge的不稳定性，还有iOS端和安卓端接口不兼容的问题（这一直是项目中前端开发人员抱怨的事情）。面对这些问题，当时也没有找到很好的解决方案。

标签： 谷歌商店上架 框架 谷歌