移动App开发

移动 App 开发

Native App-原生开发

开发技术

• 原生的 Android 平台
• 原生的 iOS 平台

JavaScript bridge

用于原生应用中的 Web 和原生平台进行交互。

https://github.com/lzyzsd/JsBridge

• 博学谷 - 在职加薪课
  • 《和原生交互的 Web 开发》

原生应用中的 Web 怎么做?

Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强，需要用户下载安装使用。（简单来说，原生应用是特别为某种操作系统开发的，比如iOS、Android等等，它们是在各自的移动设备上运行的）

该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

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

iOS

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

Android：

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

优点

• 直接依托于操作系统,交互性最强,性能最好

  相比于其它模式的交互,原生APP体验是最优的

• 功能最为强大,特别是在与系统交互中,几乎所有功能都能实现

  得益于原生是直接依托于系统的,所以可以直接调用官方提供的api,功能最为全面(比如本地资源操作,通知,动画等)

缺点

• 开发成本高,无法跨平台,不同平台Android和iOS上都要各自独立开发

  Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必须要有各自的开发人员

• 更新缓慢,特别是发布应用商店后,需要等到审核周期

  原生应用更新是一个很大的问题,Android中还能直接下载整包APK进行更新,但是iOS中,如果是发布AppStore,必须通过AppStore地址更新,而每次更新都需要审核,所以无法达到及时更新

• 维护成本高

  同开发一样,项目上线后,维护起来也很为01-麻烦

Web App-网页开发

Web App 指采用Html5写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。（Web应用本质上是为移动浏览器设计的基于Web的应用，它们是用普通Web开发语言开发的，可以在各种智能手机浏览器上运行）

Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。虽然开发人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但仍然存在一些重大的局限性，具体包括

会话管理、安全离线存储以及访问原生设备功能

（摄像头、日历和地理位置等）。

优点

• 开发成本低,可以跨平台,调试方便，开发速度最快

  web app一般只需要一个前端人员开发出一套代码,然后即可应用于各大主流浏览器(特殊情况可以代码进行下兼容),没有新的学习成本,而且可以直接在浏览器中调试

• 维护成本低

  同上,如果代码合理,只需要一名前端就可以维护多个web app

• 更新最为快速

  由于web app资源是直接部署在服务器端的,所以只需要替换服务器端的文件,用户访问是就已经更新了(当然需要解决一些缓存问题)

• 无需安装App,不会占用手机内存

  通过浏览器即可访问,无需安装,用户就会比较愿意去用

缺点

• 性能低,用户体验差

  由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好

• 依赖于网络,页面访问速度慢,耗费流量

  Web App每次访问都需要去服务端加载资源访问,所以必须依赖于网络,而且网速慢时访问速度很不理想,特别是在移动端,如果网站优化不好会无故消耗大量流量

• 功能受限,大量功能无法实现

  只能使用Html5的一些02-特殊api,无法调用原生API,所以很多功能存在无法实现情况

• 临时性入口,用户留存率低

  这既是它的优点,也是缺点,优点是无需安装,缺点是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,导致用户很难再次使用

Hybrid App-混合开发

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。

混合应用程序让开发人员可以把HTML5应用程序嵌入到一个细薄的原生容器(WebView - 认为是一个浏览器)里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。

混合应用大家都知道是原生应用和Web应用的结合体，采用了原生应用的一部分、Web应用的一部分，所以必须在部分在设备上运行、部分在Web上运行。不过混合应用中比例很自由，比如Web 占90%，原生占10%；或者各占50%。

有些应用最开始就是包了个原生客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。比较知名的APP，比如手机百度和淘宝客户端 Android版，走的也是Hybrid App的路线，不过手机百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。

优点

• 开发成本较低,可以跨平台,调试方便

  Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑有Html和JS来完成,而由于最终是放在webview中显示的,所以只需要写一套代码即可,达到跨平台效果,另外也可以直接在浏览器中调试,很为方便

  最重要的是只需要一个前端人员稍微学习下JS api的调用即可,无需两个独立的原生人员

  一般Hybrid中的跨平台最少可以跨三个平台:Android App,iOS App,普通webkit浏览器

• 维护成本低,功能可复用

  同上,如果代码合理,只需要一名前端就可以维护多个app,而且很多功能还可以互相复用

• 更新较为自由

  虽然没有web app更新那么快速,但是Hybrid中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果

• 针对新手友好,学习成本较低

  这种开发模式下,只需要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发

• 功能更加完善,性能和体验要比起web app好太多

  因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了

• 部分性能要求的页面可用原生实现

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

缺点

• 相比原生,性能仍然有较大损耗

  这种模式受限于webview的性能桎梏,相比原生而言有不少损耗,体验无法和原生相比

• 不适用于交互性较强的app

  这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)

相关技术

共同点：

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

Cordova

Cordova是Apache软件基金会的一个产品。其前身是PhoneGap，由Nitobi开发，2011年10月，Adobe收够了Nitobi，并且PhoneGap项目也被贡献给Apache软件基金会。Apache在2012年12月，发布了Cordova，截止到2015年12月，最新版面是3.0。

该框架的目标用户群体是原生开发者，其设计