初识webview
一、什么是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()进行对象映射
- 通过 WebViewClient的shouldOverrideUrlLoading ()方法回调拦截 url
- 通过 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的更多相关文章
- 浅谈WebView的使用 js alert
http://blog.csdn.net/liuhe688/article/details/6549263 WebView是Android中一个非常实用的组件,它和Safai.Chrome一样都是基于 ...
- WebView入门
webview是Android展示网页信息的控件,本文就来简要讲解这个控件的用法.关于webview我找到了一些很不错的文章,我就直接贴上连接,自己就不重复造轮子了.本文仅写出我本人目前使用过的东西, ...
- python 全栈开发,Day125(HTML5+ 初识,HBuilder,夜神模拟器,Webview)
昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...
- HTML5+ 初识,HBuilder,夜神模拟器,Webview
一.HTML5+ 初识 HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任 ...
- Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview
昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...
- Android混合开发之WebView与Javascript交互
前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...
- android通过webview调起支付宝app支付
webview在加载网页的时候会默认调起手机自带的浏览器加载网页,用户体验不好.但当用户设置浏览器客户端(setWebViewClient)设置这样的监听事件之后,当请求url的时候就不会打开手机自带 ...
- Android WebView 优化页面加载效果
目前带有Web功能的APP越来越多,为了能够更好的使用WebView展示页面,可以考虑做相关的优化:WebView 缓存,资源文件本地存储,客户端UI优化. 可能有些人会说,为什么不做Native的, ...
- Android 浏览器 —— 使用 WebView 实现文件下载
对当前的WebView设置下载监听 mCurrentWebView.setDownloadListener(new DownloadListener() { @Override public void ...
随机推荐
- 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面
在上一篇随笔中,我们已经看了如何实现前台的对话功能:前台我限定了店主只有一人,店铺只有一个,所有比较单一,但后台就不一样了,而后台更像是我们常见的聊天软件:当然,前台也应该实现这种效果,但原理懂了,可 ...
- 微软虐我千百遍——记一次比较漫长的TFS数据库迁移
起因 七月三日早晨刚到公司,同事就跟我讲TFS开始返回 TF30042错误,报告数据库已满.按照处理问题的第一直觉,我上bing的英文网站搜了一下,发现是部署TFS的时候使用的SQL Express限 ...
- 网页在ios下点击无效的原因
之前在做一个项目的时候,发现元素在ios系统中点击无法触发效果,网上查了一下发现 ios下 如果不是button,input这类标签的话 ,如果有点击事件的话最好给加一个css样式cursor:p ...
- SQL语言-----数据操作
数据操作 增加数据,insert into 标准格式 insert into 表名 (字段的列表)value(数据列表): 使用set insert into 表名 set 字段1=值,2.....: ...
- 小解系列-自关联对象.Net MVC中 json序列化循环引用问题
自关联对象在实际开发中用的还是比较多,例如常见的树形菜单.本文是自己实际的一个小测试,可以解决循环引用对象的json序列化问题,文笔不好请多见谅,如有错误请指出,希望有更好的解决方案,一起进步. 构造 ...
- AsyncTask onPreExecute方法用于在执行后台任务前做一些UI操作
1.实例化 TableListsTask task = new TableListsTask(ServerIP,"ALL", MenuActivity.this); //第三参 ...
- 00002、div的文字垂直居中与背景的渐变
1.div可以放多行的文字,当显示文字较少时,文字可垂直居中 text-align: center; display: table-cell; vertical-align: middle; text ...
- (转)memcached学习笔记1(windows 7 64bit 环境下安装memcached)
windows 7 64bit 环境下安装memcached 1.下载后解压到D:\memcached(下载地址:memcached-win64下载地址) 2.安装到windows服务,打开cmd命令 ...
- (转)TCP和UDP之间的区别
TCP和UDP区别 TCP UDP 是否连接 面向连接 面向非连接 传输可靠性 可靠的 不可靠的 应用场合 传输大量的数据 少量数据 速度 慢 快 OSI 和 TCP/IP 模型在传输层 ...
- (转)Eclipse中自动添加注释(作者,时间)
方法一:Eclipse中设置在创建新类时自动生成注释 windows-->preference Java-->Code Style-->Code Templates code- ...