前言

第50次《中国互联网络发展状况统计报告》展示了很多有意思的数据。

其中，截至2022年6月，我国网民规模为10.51亿，互联网普及率达74.4%。

网民人均每周上网时长为29.5个小时，较2021年12月提升1.0个小时。

得益于国产智能手机和移动互联网的发展，手机上网比例以绝对的优势领先，占比达到99.6%。

无到论作为产品经理还是开发人员都需要认识将来的电脑将会变成更适合办公和专业人士使用的工具，而手机才是普通大众的最终选择。

从游戏行业，英雄联盟-> 王者荣耀，绝地求生->刺激战场，到电商行业。可以看出未来移动端开发将会占据主导地位。

面向普通用户的移动端软件设计，需要考虑性能和UI美化、开发效率等多种因素，因此移动端发展至今也诞生了多种开发类型与技术。

移动端开发在5G时代的重要性

三种开发种类

Native APP

又称为原生APP 例如 Ios直接用 Object-C、Swift 语言进行开发。Android 使用 Java、kotlin进行开发。

Web App

就是 html 开发的网页，说是一种APP但实际上就是指的在浏览器上的页面

Hybrid App

又称为 混合APP、Html5套壳，是使用Web技术开发页面，然后打包成 APP，打开的是一个APP，实际上里面是嵌套了一个浏览器。

三种开发种类对应的架构模式

App开发种类的选择

对于开发者或管理人员而言而言，可以根据产品需求、性能要求和项目时间来进行技术选型，

跨平台开发

移动领域的开发，面临不同操作系统需不同开发语言，同一操作系统存在不同版本，同一版本存在不同机型等难题，给移动开发增加了很大难度。在移动开发领域，跨平台开发技术成为很多企业和开发者的首选，可以有效解决不同操作系统不同机型终端的开发难题，为企业节省时间成本和人员成本。

跨平台开发框架推荐

Hybrid：国产uni-app

uni-app 使用Vue 作为界面开发，内部框架提供了一套面向不同平台特性调用的封装，只需要在js中调用相应的函数就可以调用相应平台的功能，如原生应用：读写手机存储、顶部通知等功能。

开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：

Hybrid：React Native

前端使用 React 框架编写，React Native 提供了一套面对 Android和Ios 的封装，让你在JS中直接通过调用函数就可以调用手机的原生功能

Hybrid 又称为混合APP，基本上都是这种设计，界面采用Html，框架将底层功能封装为JS进行调用。

React Native 很适合有React开发经验的工程师去使用。

Native: Flutter

简介

Google推出，理念是：轻松、快速地构建漂亮的移动应用；使用C、C ++、Dart和Skia（2D渲染引擎）构建；旨在帮助开发人员轻松实现恒定的60fps Flutter的历史最早可以追溯到2014年10月，其前身是Google内部孵化的Sky项目

性能优势

Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件。

Andriod操作系统中，编写的原生控件中实际上也是依赖于Skia进行绘制，所以Flutter在某些Andriod操作系统上甚至还要高于原生-因为原生Andriod中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的

跨平台框架优缺点对比

框架	uniAPP	React Native	Flutter
学习成本	低	低	高
性能	低	中	高
优点	跨平台比较多，包括了各种小程序一套代码可到处运行	使用React+JS的方式，既保证了一定性能，也便于Web开发人员学习	性能高 android=原生 ios<原生
缺点	广而不精，平台太多而导致不能保证每套API的健壮性没有插件时需要自己开发		有一定学习成本，需要学习Dart语言
适用场景	需要做多套小程序在不同平台运行，或对APP的性能要求不高	只要求Android和Ios平台运行，并且拥有一定React经验	对性能要求较高的APP，如大型商城或游戏
支持平台	iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等	Ios、Android	Ios、Android

尽管目前 React、Flutter 也相继支持了Windows、Mac。但是毕竟不是主流，而且没有必要非要让移动应用跨平台到PC端，设计尺寸和布局即使有响应式也会非常奇怪。

PC 端跨平台框架推荐

Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

跨平台框架开发效率对比

参考资料

Flutter 相比 Native APP 开发有什么优势

iOS

Android

React Native中文网

Weex——关于移动端动态性的思考、实现和未来

Flutter中文网

移动跨平台框架Flutter介绍和学习线路

APP技术选型，原生APP、混合APP及跨平台应用介绍相关推荐

冲顶大会APP技术选型及架构设计
我在1月4日看到虎嗅推送"王思聪撒币"的消息,然后开始推敲背后技术.其中涉及直播流.实时弹幕.OAuth2.0开放授权.SMS api.Push网关.支付接口等业务,其技术实现并不 ...
最近进行的一次技术选型（工作流引擎）及相关知识介绍
前言最近有个新项目,需要实现类似工作流引擎的效果,如果不知道是啥,看完本文就懂了. 公司内其实也有些自研的,可能就是不像开源的这些那样,还支持这个那个规范,都是基于需求定制开发的,扩展性稍微差点. ...
App原生、混合、纯WEB开发模式的优劣分析
什么叫做原生App? 什么是混合app? 什么是Web App开发? Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统 ...
webApp,原生App，混合App的区别
什么是原生APP: 原生APP别名又叫Native App,该APP开发模式主要是针对 IOS.Android.Windows等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由&quo ...
混合app开发学习笔记
什么是混合移动App开发[重点] 苹果上的软件是如何开发出来的:使用的是 OC.或者使用Swift这门语言安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 ...
vue做混合式app_Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程（大地）...
Vue+Cordova打造跨平台可安装的混合APP视频教程必看说明: 目前购买此教程送Html5+Cordova+Ionic智能电视(TV)应用开发教程视频教程: 购买过Ionic的同学可以直接在( ...
关于短视频平台框架搭建与技术选型探讨
近年来,互联网高速发展,电视等传统媒体加速向媒体融合方向迈进,在三网融合等政策推动以及视频云技术.互动技术.大数据分析等新技术加速应用的背景下,无视频,不网络,短视频成为最重要的信息载体之一.构建高效 ...
开发App，如何更好的进行技术选型
目前很多的小公司和小团队在选择App的开发框架时,往往会受到成本.时间和预期效果的限定.如何在各种场景中更好的找到一个平衡,可以一起来讨论看看. 1. 介绍 Web APP(网页应用) 基于Web的系 ...
混合App 框架选型
为什么80%的码农都做不了架构师?>>> 个人一直想做个App,但是学习 IOS 的过程发现原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了混合式App 定义 ...

APP技术选型，原生APP、混合APP及跨平台应用介绍

前言