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开发者来说要如何站在移动互联网的浪潮之 ...
随机推荐
- Mybatis-There is no getter for property named 'id' in 'class java.lang.String'
<mapper namespace="cn.telchina.standard.mapper.SysOrgnMapper"> <!-- <![CDATA[s ...
- 把flask部署到服务器
1.新建一个wsgi.py文件 # -*- coding:utf-8 -*- import sys from os.path import abspath from os.path import di ...
- 【Caffe】caffemodel的大小计算(转载)
看到一篇将如何计算caffemodel大小的blog,感觉对理解模型大小很有帮助. 原文地址:http://blog.csdn.net/u014696921/article/details/52413 ...
- Python3 多线程 学习 threading
#-*- coding:utf-8 --*- #多线程测试 import time import datetime import threading def worker(): print(" ...
- Android 更改项目包名的方法
修改APP包名,即APP的唯一标识. 1.在项目上右键,选择android tools->rename application package,输入需要改为的名称,然后选择需要改的包,有部分包可 ...
- phpstudy配置php7.1.11 + phpstudy nginx伪静态
切记要把新的php版本配到环境变量,cmd才会生效 php7.1.11下载地址 http://windows.php.net/download/ 下载之后,解压. 重名的为php-7.1.11-nts ...
- iPhone 和 iPad的ios 开发中 利用 WebViewJavascriptBridge组件,通过 UIWebView 对Html进行双向通讯
本文转载至 http://blog.csdn.net/remote_roamer/article/details/7261490 WebViewJavascriptBridge 项目的 官网 http ...
- 解决不同浏览器创建不同 XMLHTTP 对象的问题
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XML ...
- 1065. [Nescafe19] 绿豆蛙的归宿(概率)
1065. [Nescafe19] 绿豆蛙的归宿 ★ 输入文件:ldfrog.in 输出文件:ldfrog.out 简单对比时间限制:1 s 内存限制:128 MB [背景] 随着新版 ...
- elasticsearch从入门到出门-03-多种搜索
1.query string search 2.query DSL 3.query filter 4.full-text search 5.phrase search 6.highlight sear ...