一、什么是webview

  原生APP开发中有一个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),这个组件可以加载Html文件(有点类似于浏览器,可以加载解析html,css啥的)。
在H5火爆之前,webview一般用来加载静态页面。H5 流行起来之后,主要的逻辑都用H5页面来编,然后原生直接用webview加载显示。

二、为什么要在app中加载H5页面?

  很多小白可能会疑问开发app就好好开发app,前端页面就负责好网页的事不就好了,为什么非要把H5 页面嵌套到app当中呢?
原生APP:
优点:直接依托于操作系统,直接调用官方提供的api,交互性最强,性能最好
缺点:
1.开发成本高,无法跨平台,Android和iOS上都要各自独立开发;
2.应用更新过程缓慢,Android中还能直接下载整包APK进行更新,但是iOS中,如果是发布
AppStore,必须通过AppStore地址更新,而每次更新都需要审核,所以无法达到及时更新

Web App :
即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问
优点:
1.开发成本低,可以跨平台;
2.更新快,资源是直接部署在服务器端的,只需更新服务器端的前端代码即可;
缺点:
1.直接通过的浏览器访问,所以无法使用原生的API,操作体验不好;
2.需要取服务器加载资源,所以很依赖网速;
3.功能受限,无法调用原生API;
4.临时性很高,一旦退出,不容易再次找到入口

Hybrid App:
通过以上两种方式的对比,大家想必也明白了为啥要把H5 页面从浏览器挪到App里了吧?这种混合式的开发有个牛哄哄的名字就叫--Hybrid App,也就是半原生半Web的开发模式。
下面我们来分析一下它的优缺点:
优点:
1.开发成本较低,可以跨平台;
2.更新发版快速,通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果
缺点:交互性和性能比原生app差

所以用webview加载页面的方式,一般都用来加载展示性强的页面,交互太多的页面就不采用这种方式了。

三、native端和前端的交互

  既然明白为什么有这个东西,那我们就来了解一下是怎么用的吧!app这边我们称之为native端,js这边当然就是前端。之间的交互桥梁我们通常都叫JsBridge.
一张图说明一切:

native调用前端JS的方法有2种:
 1. 通过WebView的loadUrl()
 2. 通过WebView的evaluateJavascript()

前端JS调用native的方法有3种:
 1. 通过WebView的addJavascriptInterface()进行对象映射 

  1. 通过 WebViewClient的shouldOverrideUrlLoading ()方法回调拦截 url 
  2. 通过 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息

关于具体实现和方法的比较,后期再补充上来

四、Hybrid App/React Native /微信小程序

这种将app和前端页面两者的优点结合起来的方式,不止Hybrid App这一种方式。

ReactNative : (简称RN) 是 Facebook 于2015年四月开源的跨平台移动应用开发框架,是Facebook早先开源的 Web UI 框架 React 在原生移动应用平台的衍生产物,目前支持 iOS 和安卓两大平台。该框架使用 Javascript,类似于 HTML 的 JSX,以及 CSS 来开发移动应用 UI。
小程序 : 微信小程序是混合式的移动应用,开发者在自己的微信中通过小程序的开发者工具,撰写出Native 级别的界面,通过开发者工具生成压缩包,提交到微信公众平台,然后在微信 app 中请求执行,便可实现原生Native 的界面体验。微信小程序是不需要下载安装的应用,实现‘触手可及’,‘用完即走’的理念。这也是小程序最大的特点。
由于微信小程序只能在微信平台上开发,不再和其他方式比较。下图总结一下

我也是一个新手,以上内容,摘抄参考以下链接:
http://www.jianshu.com/p/fb28b8e14bc5
http://www.cnblogs.com/dailc/p/5930238.html

初识webview的更多相关文章

  1. 浅谈WebView的使用 js alert

    http://blog.csdn.net/liuhe688/article/details/6549263 WebView是Android中一个非常实用的组件,它和Safai.Chrome一样都是基于 ...

  2. WebView入门

    webview是Android展示网页信息的控件,本文就来简要讲解这个控件的用法.关于webview我找到了一些很不错的文章,我就直接贴上连接,自己就不重复造轮子了.本文仅写出我本人目前使用过的东西, ...

  3. python 全栈开发,Day125(HTML5+ 初识,HBuilder,夜神模拟器,Webview)

    昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...

  4. HTML5+ 初识,HBuilder,夜神模拟器,Webview

    一.HTML5+ 初识 HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任 ...

  5. Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

    昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...

  6. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  7. android通过webview调起支付宝app支付

    webview在加载网页的时候会默认调起手机自带的浏览器加载网页,用户体验不好.但当用户设置浏览器客户端(setWebViewClient)设置这样的监听事件之后,当请求url的时候就不会打开手机自带 ...

  8. Android WebView 优化页面加载效果

    目前带有Web功能的APP越来越多,为了能够更好的使用WebView展示页面,可以考虑做相关的优化:WebView 缓存,资源文件本地存储,客户端UI优化. 可能有些人会说,为什么不做Native的, ...

  9. Android 浏览器 —— 使用 WebView 实现文件下载

    对当前的WebView设置下载监听 mCurrentWebView.setDownloadListener(new DownloadListener() { @Override public void ...

随机推荐

  1. seajs源码阅读

    乘着周日有点时间,阅读一下玉伯大神的源码. seajs的源码写得真的很好,很是佩服,工整美观不愧是大神,造福百姓. 说起seajs不得不说,AMD和CMD的区别.  CMD 推崇依赖就近,AMD 推崇 ...

  2. Python 操作 MYSQL

    本文介绍了 Python 操作 MYSQL.执行 SQL 语句.获取结果集.遍历结果集.取得某个字 段.获取表字段名.将图片插入数据库.执行事务等各种代码实例和详细介绍,代码居多, 是一桌丰盛唯美的代 ...

  3. Java的数据类型和参数传递

    Java提供的数据类型主要分为两大类:基本数据类型和引用数据类型. Java中的基本数据类型 名称 大小 取值范围 byte型 (字节) 8bit -128-127  (-2^7到2^7-1) sho ...

  4. 轻量级代码生成器-OnlyCoder 第二篇

    最近利用业余时间将OnlyCoder又重新打造了一番,使其使用起来更简单.更顺手. 相关的帮助文档也已发布了版本. 界面改版,UI采用了DotNetBar2组件. 还是先看下UI效果吧. 由于使用了  ...

  5. 我的学习之路_第二十八章_JQuery 和validator插件

    jQuery 利用jQuery进行遍历 js原生: for(var i=0;i>?;i++){ } jQuery: 方式一: 想要遍历的jQuery对象.each(function(index, ...

  6. JAVA - 深入JAVA 虚拟机 2

    类的两种类型的类加载器 -Java虚拟机自带的加载器 根类加载器(Bootstrap): 使用C++编写,programer can not abtain this class. 扩展类加载器(Ext ...

  7. 基于requirejs和angular搭建spa应用

    接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分: 1)app.js 入口 2)in ...

  8. JS - 讨论 - 编码习惯 - JavaScript代码到底要不要写分号?

    如题:烦请大家在评论区给出原创意见!多谢!

  9. background:rgba() 兼容ie8 用法

    background: rgba(255,255,255,.1);//火狐,谷歌等 filter:progid:DXImageTransform.Microsoft.gradient(startCol ...

  10. css3-transition过渡属性

    transition主要是用于一个元素的一种状态到另一种状态的一个过渡的过程,不能够主动触发,必须依赖于事件,例如hover伪类选择器. 一,transition简写 transition:要过渡的属 ...