移动应用基本的三种类型

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)       性能速度较慢

至于哪个应用好,需要根据以下情况,视情况而定。

  1. App的体验和开发周期何者为先?
  2. APP的更新周期是否频繁?
  3. 开发资源
  4. 应用平台

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的实现原理的更多相关文章

  1. OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/ 2.核心代码 walk.html: <ons-page id=&q ...

  2. 移动开发 Native APP、Hybrid APP和Web APP介绍

    高速区分定义: Native App 以基于智能手机本地操作系统如IOS.Android.WP并使用原生程式(SDK)编写执行的须要用户安装使用的第三方应用程序; Web APP 以HTML+JS+C ...

  3. Web App、Hybrid App与Native App

    在这个App的时代,转战了前端,一直接触的都是pc, 离out不远了. 那么接下来,app是我接下来半年的重点,为什么是半年,因为时间不多了. 因为是前端,那么我的重心肯定是 Web App, Hyb ...

  4. 转转hybrid app web静态资源离线系统实践

    一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...

  5. hybrid app

    hybrid app Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台 ...

  6. Hybrid App是如何实现网页语言与程序语言的混合?谁占主体?

    [编者按]本文作者@徐珂铭,一位看好Html5的移动互联网的从业人士.喜爱玩技术,会点JAVA.HTML及CSS,有自己的想法及姑且能表达想法的文字,因此有了自己的文章. 基于HTML5的Web Ap ...

  7. hybrid app 简介

    Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”. Hyb ...

  8. 【Hybrid App】Hybrid App开发实战

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员, 技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越 ...

  9. 【Hybrid App】关于Hybrid App技术解决方案的选择

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...

  10. 【Hybrid App】Hybrid App开发 四大主流移平台分析

    转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...

随机推荐

  1. LayoutInflater这个类还是非常有用的,它的作用类似于findViewById()。 但他是找XML文件并实例化

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  2. openWRT自学---对官方的开发指导文档的解读和理解 记录1:编译一个package

    针对的是:http://kamikaze.openwrt.org/docs/openwrt.html#x1-390002 1.If you want, you can also modify the ...

  3. homebrew可以管理众多开源软件的安装和卸载

    通过homebrew可以管理众多开源软件的安装和卸载. 参考https://github.com/mxcl/homebrew/wiki 1. 安装: ruby -e "$(curl -fsS ...

  4. 关于ES6的let,const与var之间的三生三世

    首先需要明确的是let.const.var都是用来定义变量的 在ES6之前,我们一般都用var来定义变量,例如 : function test(){ var i=1; console.log(i); ...

  5. cocoapods 错误处理

    error: RPC failed; curl 56 SSLRead() return error -36 [!] /usr/bin/git clone https://github.com/Coco ...

  6. 【BZOJ3060】[Poi2012]Tour de Byteotia 并查集

    [BZOJ3060][Poi2012]Tour de Byteotia Description 给定一个n个点m条边的无向图,问最少删掉多少条边能使得编号小于等于k的点都不在环上. Input     ...

  7. An Ordinary Game(简单推导)

    An Ordinary Game Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement There ...

  8. UITableView 右侧索引

    1.设置右侧索引字体颜色 self.tabView.sectionIndexColor = [UIColor blackColor]; 2.设置右侧索引背景色 self.cityTabView.sec ...

  9. 【python】-- 队列(Queue)、生产者消费者模型

    队列(Queue) 在多个线程之间安全的交换数据信息,队列在多线程编程中特别有用 队列的好处: 提高双方的效率,你只需要把数据放到队列中,中间去干别的事情. 完成了程序的解耦性,两者关系依赖性没有不大 ...

  10. JS表单提交

    测试一: function submit(){var form1=document.getElementById("form1")form1.action="/manag ...