Hybrid APP 解决方案

APP开发的三种模式

  • Native APP
    即原生应用,相对于Web APP和Hybrid APP来说,应用的全部功能和界面都是用各平台操作系统(如Android,IOS,Windows Phone)提供的SDK开发,不使用Web相关技术来展示页面和实现功能。
    优点:体验最优,性能最好。
    缺点:开发成本高,无法跨平台,对应用商店依赖较高。
  • Web APP
    所有功能和界面都由web实现,然后以各平台SDK中的浏览器组件(如Android中的webView,IOS中的UIWebView,Windows Phone中的WebBrowser)为载体,加载页面,展示界面,提供功能(类似浏览器)。
    优点:开发成本低,维护更新简单,可跨平台
    缺点:体验和性能差,功能限制,对网络环境要求较高。
  • Hybrid APP
    混合应用,结合了上面两种模式,综合了综合了Web App的开发速度和Native App的高性能体验。复杂和易变的信息展示页面可由Web实现,追求性能和体验的功能模块可由原生实现。
    优点:开发成本较低,可跨平台,维护更新较容易。
    缺点:体验一般。

Hybrid APP所需的技术

  • Native技术
    各平台的相关开发技能。(借助第三方框架可不用掌握Native技术)
  • Web技术
    大部分为前端的开发技能,H5标签,CSS样式,JS脚本等等,以及其他一些性能优化和模块化编程的技术。
  • 交互实现
    natvie和web交互的方法比较常用的有两种,一是约定URL Schema然后通过监控浏览器组件的请求。二是通过JavaScriptCore将native方法注入给window对象。

流行的第三方框架

许多大公司以及组织,像Facebook和Apache都在极力的发展和推广这种跨平台框架,这些跨平台框架主要是将原生的功能封装好后通过规范的JS接口提供给前端,从而使团队或者前端开发人员无需具备各平台的开发技能就能开发出跨平台的混合应用。其中比较流行的框架有:

  • Cordova/PhoneGap
    Cordova是Apache的一个开源项目,基于PhoneGap。
    Cordova的体系架构从上往下分为,前端(html,js),html 渲染引擎(各平台的浏览器组件),cordova plugin。
    cordova plugin为cordova重最核心的部分,扩展了js访问手机硬件和原生API的接口。
    开发者可自定义cordova plugin扩展自己的原生接口,添加到cordova。
    总体来说cordova即可以简单的部署到多平台,也支持单平台的深层定制。
  • ReactNative
    Facebook推出的跨平台框架。 使用js和React就可以开发app,React是Facebook自己的js库。用reactnative开发的界面会完全转化为native界面。部署的时候不用重新编译,可以热加载。而且可以植入原生代码。
    reactnative是通过JavaScriptcore将native中的方法映射到js中,没有使用浏览器组件(除低版本IOS),严格意义上来说开发出来的并不是Hybrid app。所以,开发时比较依赖reactnative暴露出来的接口,除此之外,初次学习成本比较高,需要学习react的使用(一套前端不能复用到pc)。
  • WeX5
    国内开源免费的开发工具。
    WeX5的IDE基于Eclipse,提供可视化,组件化,拖拽式开发环境。
    前端采用H5+CSS3+JS标准,并且提供了大量面向APP开发的,可定制的前端组件。组件样式基于支持移动设备优先,响应式设计的Bootstrap。
    页面代码部分,使用RequireJS管理页面模块,模块间遵守AMD规范。
    APP开发部分,使用原生浏览器组件展示页面,使用Cordova插件访问手机硬件和访问原生API。
  • ionic
    ionic是一个用来开发混合手机应用的,开源的,免费的代码库。可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化。(待补充..)

这些框架在带来便利的同时也带来一些问题和缺点:

  1. 扩展、维护、定制成本,框架提供的界面和功能存在一定的局限性,有时候不能满足产品的定制和需求,导致设计围绕框架转,不符合产品的需求。
  2. 引入一个大而全的框架意味着带来许多的累赘,增加APP体积以及工程复杂度。
  3. 框架本身的缺陷以及潜在的bug。

交互设计

前端与native之间的交互大致可以分为以下几类

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

推荐阅读更多精彩内容