移动App的类别

app就是可以运行在移动设备(手机,平板电脑)上的应用。移动是相对于运行在台式电脑,笔记本电脑这种“固定”的设置而言。

移动app系统架构图 移动系软件_web app

常见的APP类别:

  1. 原生App(navtive app)
  2. 网页App (WebApp )
  3. 混合App (HybridApp)
  4. 其他类型(小程序/快应用等等) 微信 /支付宝 /百度/抖音/头条/qq/钉钉/高德…快应用

NativeApp(原生App)

原生App 是最纯真的开发方式,可以直接运行在手机操作系统中。

原生应用程序是某一个移动平台(比如iOS或安卓)所特有的,使用相应平台支持的开发工具和语言(比如iOS平台支持Xcode和Objective-C,安卓平台支持Eclipse和Java)开发。原生应用程序看起来(外观)和运行起来(性能)是最佳的。

  • 它针对不同的手机操作系统,开发不同的软件。历史上存在过的手机操作系统:
  • Symbian(中国大陆译名为“塞班”,其他地区则直接使用英文名称“Symbian”),一种移动操作系统,由诺基亚公司拥有,广泛使用于诺基亚手机上,2013年后停止发展。
  • Windows Phone。微软公司。
  • BlackBerry。2016年7月4日,黑莓宣布正式放弃BlackBerry 10系统。
  • IOS。2007年初苹果推出iPhone,搭载iOS操作系统 。
  • Android。2007年9月谷歌推出Android操作系统,并开放源代码。
  • 现在就只有iOS和Android两大系统,需要使用各自语言开发各自App。 (需要两拨人员各做的,但是各做各的功能,其代码完全不能复用)

原生App的现状

iOS:

  • 语言:Object-C、Swift
  • 开发工具:XCode
  • 操作系统:macOS

Android:

  • 语言:Java、Kotlin
  • 开发工具:Eclipse、Android Studio
  • 操作系统:Windows、macOS、Linux 都支持

原生App的优点

优点是速度快,性能高,用户体验效果好。 根据硬件操作系统不同,来开发不同的程序。

性能和体验都是最好的, 用的都是本系统的原生组件,没有网络渲染问题。

原生App的缺点

开发和发布成本高 ,需要专业的安卓 和 ios开发人员 ,ios 系统闭环 , 应用需要上传appStore。更新麻烦,无法跨平台,Android和iOS都需要单独开发,而且开发比较复杂,所以开发成本非常高、开发周期也比较长。升级比较麻烦,每次升级都需要下载安装包,而且iOS每个版本还得经过App Store的审核,Android和iOS很难同步发布。

webApp(网页App)

移动端的网站,常被称为H5应用,说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 SPA(Single Page Application)单页面应用模式开发出的网站,与MPA(Multi-page Application)对应。

M站演示

移动app系统架构图 移动系软件_移动app系统架构图_02

WebApp的优点

  1. 开发成本低,可以跨平台,调试方便,开发速度最快。
    webapp一般只需要一个前端人员开发出一套代码,然后即可应用于各大主流浏览器(特殊情况可以代码进行下兼容),没有新的学习成本,而且可以直接在浏览器中调试。
  2. 维护成本低:
    同上,如果代码合理,只需要一名前端就可以维护多个web app。
  3. 更新最为快速:
    由于web app资源是直接部署在服务器端的,所以只需要替换服务器端的文件,用户访问时就已经更新了(当然需要解决一些缓存问题)。
  4. 无需安装App,不会占用手机内存:
    通过浏览器即可访问,无需安装,用户就会比较愿意去用。

WebApp的缺点

  1. 性能低,用户体验差:
    由于是直接通过浏览器访问,所以无法使用原生的API,操作体验不好。
  2. 依赖于网络,页面访问速度慢,耗费流量:
    Web App每次访问都需要去服务端加载资源访问,所以必须依赖于网络,而且网速慢时访问速度很不理想,特别是在移动端,如果网站优化不好会无故消耗大量流量。
  3. 功能受限,大量功能无法实现:
    只能使用Html5的一些特殊api,无法调用原生API,所以很多功能存在无法实现情况。
  4. 临时性入口,用户留存率低
    这既是它的优点,也是缺点,优点是无需安装,缺点是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,导致用户很难再次使用。通过挂在微信公众号的链接中,可以定下来入口。

应用技术

  1. VueJS
  2. ReactJS
  3. AngularJS

HybridApp(混合App)

混合模式移动应用,介于Web App、Native App这两者之间的App开发技术,兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势” ,原生客户端的壳WebView,其实里面是HTML5的网页

移动app系统架构图 移动系软件_web app_03

WebView是什么

WebView 是原生浏览器的内置浏览器,里面是h5的网页,所有的业务都是h5网页,外面是一个安卓或者 ios的 只提供 API,提供SDK(调用原生能力的包) / 拍照/录像/录音/ ,不做具体业务。 h5网页 通过 js 调用 外面壳提供的原生能力。

  • 把网页打包成移动 App,使Web 程序可以访问手机原生能力。

HybridApp的优点

  1. 开发成本较低,可以跨平台,调试方便
    Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑由Html和JS来完成,而由于最终是放在webview中显示的,所以只需要写一套代码即可,达到跨平台效果,另外也可以直接在浏览器中调试,很为方便
    最重要的是只需要一个前端人员稍微学习下JS api的调用即可,无需两个独立的原生人员
    一般Hybrid中的跨平台最少可以跨三个平台:Android App,iOS App,普通webkit浏览器
  2. 维护成本低,功能可复用
    同上,如果代码合理,只需要一名前端就可以维护多个app,而且很多功能还可以互相复用
  3. 更新较为自由
    混合开发 实际上 就是 安卓的壳 /ios壳 + html/js/css
    更新的话 只需要 下载最新的 html+js+css(本地模式)
    安卓的壳 /ios壳 + webview(线上地址)(线上模式) => 更新只需要部署到服务器即可 (性能和效率是比较低)
    虽然没有web app更新那么快速,但是Hybrid中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果 (进入之后热更新)
  4. 针对新手友好,学习成本较低
    这种开发模式下,只需要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发。
  5. 功能更加完善,性能和体验要比起web app好太多
    因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了
  6. 部分性能要求的页面可用原生实现

一般来说 壳+html+js+css , 壳+ 部分原生 + html/js+css

  1. 这应该是Hybrid模式的最多一个好处了,因为这种模式是原生混合web,所以我们完全可以将交互强,性能要求高的页面用原生写,然后一些其它页面用JS写,嵌入webview中,达到最佳体验

HybridApp的缺点

  1. 相比原生,性能仍然有较大损耗
    这种模式受限于webview的性能桎梏,相比原生而言有不少损耗,体验无法和原生相比
  2. 不适用于交互性较强的app
    这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)

其他类型App

小程序

  • 微信小程序
  • mpvue:使用vue.js 开发小程序的前端框架
  • 百度小程序
  • 头条小程序
  • 支付宝小程序

微网页

  • 微信公众号
  • 百度直达号

快应用

  • 国内各大手机厂商联合制定推出的一种新型应用。无需安装,秒开,体验媲美原生,还提供了像原生应用一样的入口。
  • iphone不参与。
  • 使用web技术进行开发,而且提供了在web中访问手机硬件等底层交互的api。
  • 属于混合app的一种。
  • 支付宝小程序

微网页

  • 微信公众号
  • 百度直达号

快应用

  • 国内各大手机厂商联合制定推出的一种新型应用。无需安装,秒开,体验媲美原生,还提供了像原生应用一样的入口。
  • iphone不参与。
  • 使用web技术进行开发,而且提供了在web中访问手机硬件等底层交互的api。
  • 属于混合app的一种。
  • 开发工具:hap-toolkit。