APP混合模式开发方案

一:混合开发模式的背景

APP的三种开发模式:Native  App、 Web App、Hybrid App。

1. Native App

Native App,原生APP,使用原生(即Android或iOS)开发的APP。使用原生开发有其优势:应用的性能好,适配起来相对容易。但原生APP最头疼的有三个问题:

(1)无法跨平台:Android和iOS都需要开发各自平台的版本——开发成本高;

(2)升级麻烦:每次升级都要下载安装包,Android还好,反正不需要审核,下载就下载吧,但iOS就麻烦了,发布每个版本还得经过App

Store的审核,这导致第三个问题;

(3)Android和iOS很难同步发布。

2.Web App

所谓的Web App,就是把手机当做一个浏览器(Android使用WebView,iOS使用UIWebView),做几个页面挂在服务器端,类似于一个小网站。这样说虽然不太贴切,但实际上给人的感觉就是这样的。虽然开发成本大大降低,但页面访问速度慢、操作体验差。于是第三种模式诞生了。

3. Hybrid App

   乍一看和Web App没啥差别,但涉及到的技术成本、开发成本、学习成本比Web App高,它综合了Web App的开发速度和Native App的高性能体验。之所以说学习成本高,是因为开发高性能的Hybrid App有难度,网络资料少。我是两年半前开始接触混合模式开发的,当时如何做好屏幕适配、提高UI响应速度、如何最大化使用原生功能等内容,网络几乎没有资料。网上能搜索到的都是很粗略的东西,或者就是Hello World级别的东西,涉及到稍微细节一点的东西几乎没有。由于本系列文章都只讲Hybrid,故在此不再啰嗦了。

三种开发模式各自的特点如下面的表格所示:


   Hybrid

App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。它虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页,后来才推出真正的原生应用。再彻底一点的,如掌上百度和淘宝客户端Android版,走的也是Hybrid App的路线,不过掌上百度里面封装的不是WebView,而是自己的浏览内核,所以体验上更像客户端,更高效。

   Hybrid

App按网页语言与程序语言的混合,通常分为三种类型:多View混合型,单View混合型,Web主体型。

(1)多View混合型

   即Native View和Web View独立展示,交替出现。2012年常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候,将WebView当成一个独立的View(Activity)运行起来,在WebView内完成相关的展示操作。这种移动应用主体通常是Native App,Web技术只是起到补充作用。开发难度和Native App基本相当。

(2)单View混合型

   即在同一个View内,同时包括Native View和Web View。互相之间是覆盖(层叠)的关系。这种Hybrid App的开发成本较高,开发难度较大,但是体验较好。如百度搜索为代表的单View混合型移动应用,既可以实现充分的灵活性,又能实现较好的用户体验。

(3)Web主体型

   即移动应用的主体是Web View,主要以网页语言编写,穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷,但整体开发难度大幅降低,并且基本可以实现跨平台。

   从分析可见,Hybrid App中的Web主体型只要能够解决用户体验差的问题,就可以变成最佳Hybrid App解决方案类型,而这也是目前最难解决的问题。


二:线下主流混合模式

HybridApp开发,现阶段主流的平台包括PhoneGap,AppCan,appMobi,Titanium等,它们基于webkit开源内核,使用HTML5 标准开发,适配机型简单,支持开发者自定义插件,并能很好的应用于商业,教育,娱乐等行业,成为移动开发者的首选开发平台。


1. PhoneGap(cordova)

PhoneGap是一款Apache的开源移动开发平台。目前已经将核心代码贡献给Apache cordova,最新版本是5.4.0,它是基于HTML,CSS和JavaScript的,可以使用一些开源的框架比如jQuery Mobile,Dojo Mobile,Sencha Touch等等来提高用户体验,也提供了比较丰富的原生插件调用。

特性:

1.可以使用DreamWeaver 5.5编码,现在使用appMobi提供的xdk 进行模拟器开发。

2.代码开源,开发者可以放心使用。

3.兼容性,一次开发,多处运行。

4.使用JS+HTML5,成本低。

优点:

1. Native接口比较丰富,通过封装的API可以直接访问硬件,比如说加速,相机,指南针,GPS,文件访问等。

2.接口文档描述非常详细。

3.支持平台多,包括iOS,Android,Blackberry,Symbian,bada,Windows Phone 7,Windows Phone 8 等。

缺点:

1.需要针对相应的平台环境配置,进行编译,打包测试,发布等等。由于使用Hybrid开发的用户群,需要对各个平台的开发都要需要了解,对硬件等等都要配置,加大开发成本。

2.使用效果启动慢,页面切换响应慢,数据请求慢。

3.因为是国外的框架,技术支持不够到位,出现问题,无法排解,成为技术攻关的难点。

资料:

· http://cordova.axuer.com

· https://www.w3cschool.cn/cordova/

· https://tieba.baidu.com/f?kw=cordova

· http://wiki.jikexueyuan.com/project/apache-cordova-tutorial/creating-cordova-project.html


2. AppCan

AppCan是本土移动开发中使用最广的移动平台,网络舆论而言,AppCan是PhoneGap的中国化,但是从对AppCan实际使用,以及转向移动开发的朋友们互相交流反馈,他们是截然不同的两个移动平台,AppCan不仅封装了类似于PhoneGap的本地调用功能,而且封装了uexWindow多窗口机制,实现了移动端的iframe效果,虽然不是开源项目,但一直都有面向开发者的免费版,并且也有定位于企业用户的企业版套装。


特性:

1.提供的集成开发环境的IDE进行模拟器开发。

2.兼容性,一次开发,多处运行。

3.使用JS+HTML5,成本低。

4.在线打包。

5.代码加密保护机制。

优点:

1.支持在线上传证书打包,对于不了解苹果,以及Android 环境开发的人是福音。

2.支持更多的原生调用,比如UI控件的封装,通讯类(socket),地图,支付宝等更多的原生控件支持。

3.拥有统一数据统计平台,便于运营管理开发的应用。

4.完善的技术支持,官方论坛以及Q群建设较为完善,使开发者更好的进行交流沟通。

缺点:

1.虽然有中文的开发文档,但描述比较简单,希望他们丰富他们的API文档。

2.免费版本不支持自定义插件(据说企业版可以自定义插件)。

3.暂时只支持iOS,Android两大平台。

4.许多功能需要企业版才能实现,不过是收费的。

资料:

· http://www.appcan.cn

· http://2014appcan.csdn.net


3.APICloud

APICloud是一款“云端一体”的移动开发平台,信仰“云端一体”的理念,重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。


特性:

APICloud提供的原生模块,涵盖UI、系统、交互、影音、支付等类型。另外,APICloud还为开发者提供了APICloud ID集成开发环境,其一键真机调试、代码同步、编译本地测试包等功能也提高了开发效率。官方号称7天做出一个App。

优点:

1、方案完整,简化,上手快。

2、IDE整合做的不错,直接连接云端,SVN代码同步,直接连接手机App Loader真机调试,Log可以通过IDE输出,比模拟器真实,直观。

3、云编译很方便,跨平台打包,直接生成二维码。

4、手机底层硬件/组件调用API很实用,比如语音识别,都不错。

5、文档完备,相比开源项目往往缺乏文档,信息需要东拼西凑来说,APICloud的文档比较集中和全面。

缺点:

 1、缺乏常见模式App的完整框架Demo,比如:一个带头部信息,底部导航和侧边菜单的应用框架用APICloud的UI组件怎么写,页面间跳转和参数传递怎么写,这些都是动手开发之前最先要解决的问题。Demo

App里的组件示例有用,但是框架和基本流程要先跑起来。

2、UI组件不够丰富。

3、IDE联机调试的Log输出不稳定,经常断线。

4、文档层次和细致程度还不够。文档现在的层次有点混乱,不好定位信息,最好分一下类别,比如媒体类,通讯类,等等。另外还有一些API没有说明文字。

资料:

· https://docs.apicloud.com

· https://jingyan.baidu.com/article/9f7e7ec0ad3da06f2915544e.html


4. React Native

React Native 是一个 JavaScript 的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。其是基于React的,而 React 是 Facebook 的用于构建用户界面的 JavaScript 库。由 Facebook 开发并在2013年将其开源,React 已经得到了颇为广泛的使用。但是其使用的范围比较狭窄,它仅是用于渲染用户的应用程序的界面,而不是更大的 MVC 框架。

React Native 也只是 React,但是是针对移动设备的。也有一些少许的不一样的地方,比如开发者需要使用组件而不是

优点:

1.把cocoa里面的controller和view统一成了component,其实RN里只有component这个组件概念,既可以扮演页面级别的组件(controller),也可以扮演一个模块级别的组件(UIView)。入门门槛降低了很多。

2.动态绑定,这个React的基本功能,被带到了客户端开发中来,数据和视图是动态绑定的,数据发生变化,视图会跟着变化,很多操作视图的代码都可以省略了。

3.引入了类似于CSS(一个子集)的样式管理,可以内嵌到模块,也可以全局使用,定义样式变得非常简单通用。

4.引入了Flexbox布局,把ios本身复杂的AutoLayout简化,使用很方便,学习起来也更简单。

5.引入了方便的npm管理,有大量现成的nodejs包可以用(例如moment,underscore等常用模块),还可以把自己项目模块搞到内部npm上做通用组件,另外,npm上还有不少别人写的react native的插件。例如下面这个。

6.第三方组件里有一个可以把icon font引入项目的组件,可以在任何显示图标的地方直接用icon font显示,灰常方便。

7.调试很方便,一次编译后,每次改了js代码,只需要在模拟器里command+R即可重新加载代码。有问题会直接报错,里面有代码行数等详细信息。

8.完整封装了各种js内置的方法,例如:setTimeout,setInterval,XMLHttpRequest,localstorage,console.log等,都是用oc原生方法封装的。

9.引入ES6的支持,可以使用各种新特性,例如最常用的箭头函数,解决this作用域乱套的问题。

缺点:

1.组件不全,第三方组件也不全,遇到某些特殊功能,需要捣鼓很久,例如摄像相关的,文件读写,文件上传之类的组件。

    2.性能并非媲美原生,还是有一些损耗的,特别是交换大数据的时候,例如读取相册。

    3.ios和android代码并非通用,有可能会需要维护两套,或者在代码内做一些判断。

    4.并非网上大家说的,写一次代码,多端通用,网页版和客户端版完全不是一个概念,只有部分代码可重用。

    5.把代码都打包到bundle里面,不知道苹果对这种开发方式是否会不太喜欢,甚至拒绝上线。

   6.实际开发的时候,还是需要了解底层原理,自己开发跟原生桥接的组件,这个对普通前端来说是一个很大的挑战。

资料:

·  http://facebook.github.io/react-native

·  http://www.reactnative.com/

·  github搜索 react native 了解第三方开源组件

·  http://wiki.ecmascript.org/doku.php?id=harmony:proposals


5. Titanium

Titanium移动平台是所有移动开发平台中比较另类的,它将JavaScript和本地库链接在一起,编译成字节码,针对iOS以及Android两个平台分别构建一个软件包。应用程序使用HTML,JavaScript和CSS进行开发,并支持PHP,Ruby和Python。应用程序可以使用 Appcelerator API访问本地特性。并提供Appcelerator

Studio开发环境,由于编译成本地代码,所以用户体验是最好的。

特性:

1.针对不同平台生成对应的原生包。

2.供Appcelerator Studio开发。

优点:

1.针对JS解析生成原生控件,基本达到纯原生的用户体验。

2.支持自定义插件。

缺点:

1. API文档为英文,并且比较简单,对国内用户使用有一定挑战。

2.跟PhoneGap同样,国外框架,技术支持困难。

3.支持Android,iOS,黑莓平台。

4.环境需要用户自己搭建比较复杂。

资料:

· https://www.cnblogs.com/sipher/articles/2697368.html

· http://tidev.in/forums/kai-fa-zhi-shi

· http://www.titaniumstudios.com


6.AppMobi

appMobi推出了全新开发工具XDK,这个工具使得开发者可以使用HTML5构建网络和移动平台的应用程序,可以进行屏幕仿真调试、设备实际调试和遥控调试等。

特性:

1.使用XDK 进行开发。

2. HTML5+CSS+JS。

3.一次开发,多处运行。

优点:

1.本地接口较为丰富,并且推出有游加速引擎,主要包括物理引擎、离线和动态缓存、媒体播放器、验证和加密、增强现实、二维码和QR扫描、更好的显示支持。

缺点:

1.国外框架,技术支持差。

 资料:

· https://appmobi.com/?q=node%2F153


7.WeX5

WeX5遵循Apache开源协议,完全开源免费,上百个组件框架,全部开放,可视化的组件框架,开发者可自定义组件,集成第三方组件,采用MVC设计模式,数据和视图分离,页面描述和代码逻辑分离,支持浏览器调试、真机调试、原生调试,等多种调试模式,开发者可掌握每一行代码。

WeX5一直坚持采用H5+CSS3+JS标准技术,一次开发,多端任意部署,确保开发者成果始终通用、不受限制。WeX5的混合应用开发模式能轻松调用手机设备,如相机、地图、通讯录等,让开发者轻松应对各类复杂数据应用,代码量减少80%。

优点:

1.由于遵循Apache开源协议,所以可以使用Apache的插件

缺点:

1.教程不敢恭维,不详细,没针对性,做教程应该针对某功能详细介绍。

2.使用操作式布局,不是代码的,其实这点好处没有弊端大,因为开发者或多或少对HTML5,代码还是会的,反而搞个布局工具,让我们相当于重新学习开发工具了。老手变新手。

3.部署方式在线更新,不是很理想。

4.是从cordova工具基础上开发的,使用的也是它的插件,个人感觉插件首先不太会用,教程不详细,并且插件反馈不也友好,比如我试过下载插件,下载xx。ZIP,如果ZIP的url找不到,也不提示错误,没提示要我下部怎么做了,下载进度没不知道是有还是没有。所以WEx5,就开发功能而言有很大的局限性。

资料:

· http://docs.wex5.com/wex5-introduction/

· https://www.w3cschool.cn/wex5/k8u91tes.html

· https://www.cnblogs.com/mehjb/p/6127018.html



另还有Ionic框架、Moblile Angular UI框架、Intel XDK框架、Sencha Touch框架、Kendo UI框架、AppsGeyser框架、AppsBuilder框架、AppMachine、Kinvey框架等混合框架。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容