学习目标

  • 了解混合移动App开发的相关背景
  • 了解项目开发流程
  • 了解三大框架

什么是混合移动App开发?

  • 苹果系统中的软件是如何被开发出来的:使用OC或者swift。
  • 安卓平台中的软件是如何被开发出来的:使用安卓相关的语言,例如Java,安卓控件等。
  • 苹果系统和安卓平台共有的软件是如何被开发的:例如,腾讯招2套开发人员【开发组】(一套负责苹果系统开发,一套负责安卓平台开发)
  • 前端移动App(Application)开发技术,开发手机端的应用程序。
  • 前端混合移动App开发技术:没有使用苹果、安卓官方推荐的开发平台、开发方式,而是抛弃了官方提供的方式。使用前端的独有的技术进行移动App开发。

  移动App技术:将Web网站技术(HTML+CSS+JS)通过某种方式移植到移动App开发上进行使用。这种利用web开发技术进行移动端开发体验的方式,叫做混合移动App开发。

 

移动App开发相关概念

  • 原生开发(NativeApp):使用IOS/Andriod(2013年左右)官方推荐的工具、开发平台、配套语言运行手机App开发的方式。
  • 混合开发(HybirdApp):使用已有的技术(HTML+CSS+JS),搭配一些相关的打包编译技术,就能够开发一个手机App,安装到手机中进行使用。
  • 什么是App:Application的缩写,指可安装的应用程序。
  • App的分类
  • 按平台划分
  • PC端:浏览器、代码编辑器、PC端游戏、听歌、视频等
  • 移动端:手机QQ、手机微信等
  • 按功能划分
  • 游戏:愤怒的小鸟、植物大战僵尸等
  • 应用:非游戏类的软件(支付宝、美团等)
  • App和Web的区别
  • App概念:Application的缩写,指可安装的应用程序。
  • 优点:流畅、稳定、某些App可以离线运行(用户体验好)
  • 缺点:不能跨平台
  • Web概念:基于浏览器的Web网站(本质:网页)
  • 优点:可以跨平台(浏览器天生可以跨平台)
  • 缺点:没有app流畅、不稳定。受限于网速


 

前端发展的历史


只能做页面 -> Ajax前后台数据交换 -> Jquery、BootStrap -> webApp -> 三大框架 -> 可以做手机混合app/桌面应用 -> 可以做原生App   前端APP开发2种方式


  • 第一种:首先开发一个网站,接着运行打包命令,最后得到APP。
  • 第二种:按照规定的语法编写框架代码,接着打包得到APP。

  常见App开发方式


  • WebApp: 基于浏览器实现,有特定功能的网站,称作WebApp。
  • 例如:百度脑图、https://m.jd.com
  • 优点:跨平台
  • 缺点:依赖网络、用户体验相对较差;不能调用硬件底层设备,比如摄像头(网页版JD不能扫一扫)。
  • NativeApp: Android/Object-C等原生语言开发的应用。
  • 优点:体验好、用户使用流畅、适合游戏(游戏开发)、可直接调用底层硬件API
  • 缺点:不能跨平台
  • HybirdApp: 利用前端技术开发移动端App,间兼具2者优势。
  • 优点:能够跨平台、用户体验好、能够调用硬件底层API
  • 缺点:相对于原生开发用户体验稍差、不适合做游戏开发、适合做非游戏类型的手机App

注:使用Java、IOS编写的代码/程序,在运行时会将普通文本编译为原生的机器码去执行,不同于JS(解析执行,不运行到出错行不知道有错),Java代码是编译执行(预编译阶段指出问题)。   React-混合移动App开发介绍_react native

  React-混合移动App开发介绍_移动app_02

 

企业如何选择合适自己的App开发方式

  • 如果企业曾今使用过原生技术开发过App,则在维护时必然选择使用原生技术来维护。
  • 如果企业需要开发游戏级别的应用,则推荐使用原生。因为原生运行效率高,对耗电处理效果好。
  • 如果企业做非游戏的应用软件,如淘宝、京东等,可以使用混合App。
  • 企业有一个好的项目方案,则需要立即将该项目做出来。使用混合App很合适,快速上线,抢先占市场。【裤衩开发】

企业项目开发流程

  • 需求调研:产品定位、受众群体、市场需求、开发价值;【产出物:需求文档】
  • 产品设计:功能模块、流程逻辑;【产出物:设计文档、交互稿】,确定项目的基本功能

    

React-混合移动App开发介绍_移动app_03


  • 项目开发:项目架构、美工、前端、后台、测试【产品的把控】 (前后端分离的概念)
  • 运营维护:上线测试、调bug、微调功能模块、产品迭代

  一言以蔽之:根据需求做设计、根据设计做开发。

 

三大框架介绍

  • Angular和Ionic(打包工具)
  • Vue.js和Weex(打包工具)
  • React.js和React-Native(打包工具)

Ionic/Weex/React-Native:运行命令将项目打包成手机App、三者提供一些组件以方便构建移动App的用户界面。