学习目标
- 了解混合移动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代码是编译执行(预编译阶段指出问题)。
企业如何选择合适自己的App开发方式
-
如果企业曾今使用过原生技术开发过App,则在维护时必然选择使用原生技术来维护。
-
如果企业需要开发游戏级别的应用,则推荐使用原生。因为原生运行效率高,对耗电处理效果好。
-
如果企业做非游戏的应用软件,如淘宝、京东等, 可以使用混合App。
-
企业有一个好的项目方案,则需要立即将该项目做出来。 使用混合App很合适,快速上线,抢先占市场。【裤衩开发】
企业项目开发流程
-
需求调研:产品定位、受众群体、市场需求、开发价值;【产出物:需求文档】
-
产品设计:功能模块、流程逻辑;【产出物:设计文档、交互稿】,确定项目的基本功能
-
项目开发:项目架构、美工、前端、后台、测试【产品的把控】 (前后端分离的概念)
-
运营维护:上线测试、调bug、微调功能模块、产品迭代
一言以蔽之:根据需求做设计、根据设计做开发。
三大框架介绍
-
Angular和Ionic(打包工具)
-
Vue.js和Weex(打包工具)
-
React.js和React-Native(打包工具)
-
[react.js英文网] { https://facebook.github.io/react}
-
[ReactNative中文网] { https://reactnative.cn}
-
[ReactNative英文网] { https://facebook.github.io/react-native}
-
Ionic/Weex/React-Native:运行命令将项目打包成手机App、三者提供一些组件以方便构建移动App的用户界面。