Native App vs Web App 以及 Hybrid App的实现原理
移动应用基本的三种类型
1) Native 应用程序
2) Web 应用程序
3) 混合应用程序(Hybrid: Native应用和web应用结合)
Native 应用
直接运行在电脑上或者智能手机上的本地应用
优点:
1) 能够访问手机上的所有功能(GPS,相机等)
2) 更好的运行速度,性能和用户体验
3) 支持离线工作(因为是在设备上运行而非web)
4) 在应用商店下载,并且在主屏幕上轻易的找到应用图标(符号人们的使用习惯)
缺点:
1) 开发成本较高
2) 范围限制较多(智能载特定的操作系统上运行设备)
3) 未知的部署时间(应用商店审批限制)
4) 用户必须手动下载最新版本
Web 应用程序
优点:
1) 适用范围广(覆盖所有的智能手机)
2) 开发成本低
3) 方便,快捷的部署(无需提交到应用商店)
4) 用户总能访问到最新版本(没有手动更新需求)
缺点:
1) 较慢的性能体验(大部分需要链接到互联网)
2) 用户体验较差
3) 限制用户使用功能(比如:相机,GPS等)
混合应用(Hybrid)
是本地应用和web应用混合开发的一款应用,一部分运行在设备上,一部分运行在web上。
优点:
1) 支持多平台访问
2) 手机功能都可以访问
3) 适用于应用商店
4) 部分支持离线功能
缺点:
1) 用户体验不如本地应用
2) 性能速度较慢
至于哪个应用好,需要根据以下情况,视情况而定。
App的体验和开发周期何者为先?APP的更新周期是否频繁?- 开发资源
- 应用平台
Hybrid App 实现原理:
(一) Native 调用JS

1) native通过string调用js
2) webview 调用js中的eval方法,将string转化为js方法
3) webview调用js方法
(二)Js 调用 Native

1) javascript改变url,通过url传递调用的方法和参数
2) webview监听到url的变化,并且探测到url中定义的方法和参数
3) 寻找对应的映射表,找到native对应接口api进行调用
4) 执行javascript调用方法时传入回调string并添加数据
5) Webview解析string转化为javascript进行调用
app自身可以自定义url schema,并且把自定义的url注册在调度中心, 例如
- ctrip://wireless 打开携程App
- weixin:// 打开微信
Native App vs Web App 以及 Hybrid App的实现原理的更多相关文章
- OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App
1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/ 2.核心代码 walk.html: <ons-page id=&q ...
- 移动开发 Native APP、Hybrid APP和Web APP介绍
高速区分定义: Native App 以基于智能手机本地操作系统如IOS.Android.WP并使用原生程式(SDK)编写执行的须要用户安装使用的第三方应用程序; Web APP 以HTML+JS+C ...
- Web App、Hybrid App与Native App
在这个App的时代,转战了前端,一直接触的都是pc, 离out不远了. 那么接下来,app是我接下来半年的重点,为什么是半年,因为时间不多了. 因为是前端,那么我的重心肯定是 Web App, Hyb ...
- 转转hybrid app web静态资源离线系统实践
一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...
- hybrid app
hybrid app Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台 ...
- Hybrid App是如何实现网页语言与程序语言的混合?谁占主体?
[编者按]本文作者@徐珂铭,一位看好Html5的移动互联网的从业人士.喜爱玩技术,会点JAVA.HTML及CSS,有自己的想法及姑且能表达想法的文字,因此有了自己的文章. 基于HTML5的Web Ap ...
- hybrid app 简介
Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”. Hyb ...
- 【Hybrid App】Hybrid App开发实战
[引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员, 技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越 ...
- 【Hybrid App】关于Hybrid App技术解决方案的选择
[引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...
- 【Hybrid App】Hybrid App开发 四大主流移平台分析
转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...
随机推荐
- LayoutInflater这个类还是非常有用的,它的作用类似于findViewById()。 但他是找XML文件并实例化
在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...
- openWRT自学---对官方的开发指导文档的解读和理解 记录1:编译一个package
针对的是:http://kamikaze.openwrt.org/docs/openwrt.html#x1-390002 1.If you want, you can also modify the ...
- homebrew可以管理众多开源软件的安装和卸载
通过homebrew可以管理众多开源软件的安装和卸载. 参考https://github.com/mxcl/homebrew/wiki 1. 安装: ruby -e "$(curl -fsS ...
- 关于ES6的let,const与var之间的三生三世
首先需要明确的是let.const.var都是用来定义变量的 在ES6之前,我们一般都用var来定义变量,例如 : function test(){ var i=1; console.log(i); ...
- cocoapods 错误处理
error: RPC failed; curl 56 SSLRead() return error -36 [!] /usr/bin/git clone https://github.com/Coco ...
- 【BZOJ3060】[Poi2012]Tour de Byteotia 并查集
[BZOJ3060][Poi2012]Tour de Byteotia Description 给定一个n个点m条边的无向图,问最少删掉多少条边能使得编号小于等于k的点都不在环上. Input ...
- An Ordinary Game(简单推导)
An Ordinary Game Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement There ...
- UITableView 右侧索引
1.设置右侧索引字体颜色 self.tabView.sectionIndexColor = [UIColor blackColor]; 2.设置右侧索引背景色 self.cityTabView.sec ...
- 【python】-- 队列(Queue)、生产者消费者模型
队列(Queue) 在多个线程之间安全的交换数据信息,队列在多线程编程中特别有用 队列的好处: 提高双方的效率,你只需要把数据放到队列中,中间去干别的事情. 完成了程序的解耦性,两者关系依赖性没有不大 ...
- JS表单提交
测试一: function submit(){var form1=document.getElementById("form1")form1.action="/manag ...