前端在线资源
本文地址：
一、起始之语
我一直都是在PC上折腾网页的，这会儿怎么风向周边捣鼓起手机网页开发呢？原因是公司原先使用Java开发的产品，耗了不少人力财力，但是最后的效果却不怎么好。因为，Android系统一套东西，iPhone又是新的一套，折腾死人呐。
于是总监发狠，让我把手上的活都交出去，专心折腾web版的，看看最后效果如何。
加上我觊觎手机上的开发学习很久了，于是，一拍即合，搞起了手机开发方面的学习。
分享是很好的提高自身学习的方法。因为分享过程中梳理了所学，往往会有些意想不到的心得与收获。如此利人利已的事情，自然乐意为之。于是，自己在文章id > 2000 的这一历史性时刻，新建了一个“mobile相关”的分类目录，把移动相关的一些东西总结，整理，分享出去，大家共勉。
二、我的选择
显然，当下手机web开发移不开CSS3 + HTML5以及JavaScript。目前，也应运而生了很多开发的框架，有胶水层的，也有显示层的（不罗列）。因为个人偏好以及筛选，决定使用PhoneGap实现与设备相机，通讯录等交互，jQuery Mobile实现页面UI的显示以及相关交互。
如果时间足够，我想我会针对项目本身重新搞个更轻便灵活的交互框架。考虑到现实情况，还是决定使用他人的UI框架。
下截图为今儿个上午( 11:11)跑通的第一个PhoneGap下的Android手机程序：
不过PhoneGap是与胶水层打交道的东西，要说到这东西还需要些时日。我们可以先把目前投向与页面显示相关的UI框架上。例如，本文要说起的jQuery Mobile。
三、我眼中的jQuery Mobile
目前为止，jQuery Mobile的正式版还没有出来，但是这并不妨碍对其的使用。上说其代码轻量(lightweight code)。可能跟Sencha Touch相比确实轻量。但是，在我看来（本身为框架的原因），其实代码还是蛮啰嗦的（例如CSS文件min后有49K之多）。对于实际的项目而言，皮肤风格不可能几种并存的，所以，其a~e的五种模板选择实际有些多余，很多都是打酱油的命。
而且，实际项目中的设计师设计东东的时候不可能是总是跟着jQuery Mobile的UI来的。因此，我们难免会碰到对其模板进行修改或是新添加的情况。
不过，我可以确信的是，如果在个人网站或是其他一些非对外的中小项目上使用jQuery Mobile的话，一定会爽歪的！
然后，还有一点我得承认。jQuery Mobile的上手可比Sencha Touch快多了。其UI显示基本上就是基于HTML5的data-自定义属性来的，跟它的老爸爸jQuery一样，确实是write less, do more.
页面元素的UI显示完全可以根据HTML代码内容和属性而来，不需要任何额外的JavaScript代码或是CSS代码，有模有样的手机页面效果就可以出炉。而且，要出效果页面，你只要静下心花个1整天的时间把官方的介绍文档看一篇就可以了。真这么简单。
例如下面这个纯显示的页面们（PC建议使用Chrome浏览器围观）。
您可以狠狠地点击这里：
手机可以访问以下地址：
这是在桌面版opera 10.1 mobile下的显示效果：
默认进入：
选择“文章搜索”项 → 点击搜索框后：
如果是在Android系统或是iPhone上，渐变效果，平滑切换效果都会显露出来的。
上面加起来差不多有10多个HTML页面，捣鼓了几个小时就出来的，当然是在无敌模式下。为什么快呢？因为基本上没有动一点新的CSS代码或是JavaScript代码。直接write HTML即可。如果你对jQuery Mobile熟悉的话，可以更快。
要想使用jQuery Mobile，很重要的一点就是要注意语义化。到不是使用HTML5之类的标签（考虑到渐进增强，jQuery Mobile使用的还是XHTML时代的标签），而是div, p, ul ,li, h1~6等的使用。
在jQuery Mobile标签下，不同的标签所对应的UI效果很多都已经定死了。例如：
&div data-role="header">
&h1>鑫空间-鑫生活&/h1>
&a href="#" data-icon="arrow-r" data-iconpos="right">中文&/a>
上面这段data-role为header的div中，h1标签不仅仅是个标题了，而是直接会修改当下页面的title值，因此，上面几行代码对应的页面的title就是“鑫空间-鑫生活”，即使你头部的title写的是“今天是小光棍节，呼啦啦~~”。
而后面的a标签文字虽然没有指定data-role="button"，但是，谁叫他生在data-role="header"的div下呢，于是，它就是个显示按钮的命。而且，JMobile自动将其定位到右侧了。
语义化的标签决定了其位置，显示等。确实方便，但是有所限制。可谓有利有弊。
还有列表li标签中的第一个图片，会自动变成列表缩略图等，好多好多，你试一下就会发现这东西还是挺有意思的。
嘛，不过吗，不用急，冰冻三尺非一日之寒，什么东西都是慢慢积累的。才刚开始，说多了未必是好。所以，本文就唠叨这么多。
原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.297) (0.228) (0.223) (0.223) (0.149) (0.101) (0.089) (0.089) (0.089) (0.086) (RANDOM - 0.011)
标签： , , , , , , , , ,
赞助商推荐()：
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
不知怎么获得高薪？不如
热门总排行Android学习之 WebView使用小结
这段时间基于项目需要 在开发中与WebView的接触比较多，前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上，更有人说：HTML5将颠覆原生App开发 虽然我不太认同这一点 但是关于HTML5+JS++Native的跨平台开发模式还是为很多企业节省了开发资源和成本、一定程度上提升了WebView的使用率和地位。
网上关于HTML5规范定稿的一篇见解文章：
http://www.csdn.net/article//2822513-how-html5-changes
本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结：
一、WebView基于webkit引擎展现web页面的控件，使用前需要在 Manifest file中配置internet访问权限，否则提示页面无法访问。
二、WebView属性的设置
1、设置WebSettings类
WebSettings用来对WebView的配置进行配置和管理，比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等
示例代码如下：
WebSettings webSettings = mWebView.getSettings();
webSettings.setScriptEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
webSettings.setDomStorageEnabled(true);
webSettings.setDatabaseEnabled(true);
webSettings.setAppCacheEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setSavePassword(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
* 用WebView显示图片，可使用这个参数 设置网页布局类型：
* 1、LayoutAlgorithm.NARROW_COLUMNS ：适应内容大小
* 2、LayoutAlgorithm.SINGLE_COLUMN : 适应屏幕，内容将自动缩放
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(true);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setHorizontalScrollbarOverlay(true);
mWebView.setHorizontalScrollBarEnabled(true);
mWebView.requestFocus();
2、设置WebChromeClient子类
WebChromeClient会在一些影响ui交互动作发生时被调用，比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等
mWebView.setWebChromeClient(new MyWebChromeClient());3、设置WebViewClient子类
WebViewClient会在一些影响内容渲染的动作发生时被调用，比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等
mWebView.setWebViewClient(new MyWebViewClient());4、设置addJavascriptInterface方法
使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互，
注意:因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。
三、设置当前网页的链接仍在WebView中跳转，而不是跳到手机浏览器里显示，
在WebViewClient的子类中重写shouldOverrideUrlLoading函数
代码如下：
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
}); shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时，给当前应用程序一个处理机会，如果没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理，return false表示让当前webView处理
四、设置开始加载网页、加载完成、加载错误时处理
在WebViewClient子类中分别重写如下父类函数
代码如下：
webView.setWebViewClient(new WebViewClient() {
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
// 开始加载网页时处理 如：显示"加载提示" 的加载对话框
DialogManager.showLoadingDialog(this);
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 网页加载完成时处理
如：让 加载对话框 消失
DialogManager.dismissLoadingDialog();
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
// 加载网页失败时处理
view.loadDataWithBaseURL(null,
"网页加载失败",
"text/html",
});五、处理https请求，为WebView处理ssl证书设置
WebView默认是不处理https请求的，页面显示空白，需要进行如下设置
在WebViewClient子类中重写父类的onReceivedSslError函数
代码如下：
webView.setWebViewClient(new WebViewClient() {
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
// 接受信任所有网站的证书
// handler.cancel();
// 默认操作 不处理
// handler.handleMessage(null);
// 可做其他处理
六、显示页面加载进度
在WebChromeClient子类中重写父类的onProgressChanged函数
代码如下：
webView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
setTitle("页面加载中，请稍候..." + progress + "%");
setProgress(progress * 100);
if (progress == 100) {
setTitle(R.string.app_name);
});onProgressChanged通知应用程序当前页面加载的进度
progress表示当前页面加载的进度，为1至100的整数
七、back键控制网页后退
Activity默认的back键处理为结束当前Activity，WebView查看了很多网页后，希望按back键返回上一次浏览的页面，这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数，告诉他如何处理，代码如下：
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
webView.goBack();
return super.onKeyDown(keyCode, event);
}其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true
webView.goBack();表示返回至webView的上次访问页面
八、使用addJavascriptInterface完成和js交互
1、Js中调Native本地Java方法
设置webView的addJavascriptInterface方法，该方法有两个参数，第一个参数为被绑定到js中的类实例，第二个参数为在js中暴露的类别名，在js中引用java对象就是用这个名字
在Native Java代码如下：
mWebView.getSettings().setEnabled(true);
mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
class JavaScriptInterface{
Context mC
/** Instantiate the interface and set the context */
JavaScriptInterface(Context c) {
mContext =
/** Show a toast from the web page
* 由Js调用执行Native本地Java方法
@JavascriptInterface
public void showToast(String toast) {
Log.d("TAG", "Js Invoker Native Function");
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}在HTML中Js调用Native方法 代码如下：
&script type="text/javascript"&
function showAndroidToast(toast) {
Android.showToast(toast);
&/script&2、Java调Js方法
比如在HTML中有如下Js函数
&script type="text/javascript"&
function showAlert() {
alert("Be executed by Native");
&/script&在Native调Js方法如下：
mWebView.loadUrl("javascript：showAlert()");
九、WebView缓存模式的设置
1、网页数据缓存
当使用WebView加载HTML网页时，会在我们data/应用package下生成database与cache两个文件夹:
我们请求的Url记录是保存在webviewCache.db里，而url的内容是保存在webviewCache文件夹下.
五种缓存模式的设置setCacheMode：
LOAD_CACHE_ONLY:
不使用网络，只读取本地缓存数据。
LOAD_DEFAULT:
根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式。
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据。
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如示例代码：
WebSettings webSettings = mWebView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
//设置 缓存模式
// 开启 DOM storage API 功能
webSettings.setDomStorageEnabled(true);
//开启 database storage API 功能
webSettings.setDatabaseEnabled(true);
通过setAppCacheEnabled(boolean flag)设置H5的缓存是否打开，默认关闭。
根据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程中生成的缓存文件。
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量。
如示例代码：
String cacheDirPath = getCacheDir().getAbsolutePath()+ "/webViewCache ";
WebSettings webSettings = mWebView.getSettings();
//开启 database storage API 功能
webSettings.setDatabaseEnabled(true);
//设置数据库缓存路径
webSettings.setDatabasePath(cacheDirPath);
//开启Application H5 Caches 功能
webSettings.setAppCacheEnabled(true);
//设置Application Caches 缓存目录
webSettings.setAppCachePath(cacheDirPath);
十、加快HTML网页加载完成速度
默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片，等页面finish后再发起图片加载。
故在WebView初始化时设置如下代码：
public void int () {
if(Build.VERSION.SDK_INT >= 19) {
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setLoadsImagesAutomatically(false);
}同时在WebView的WebViewClient子类中重写onPageFinished()方法添加如下代码：
public void onPageFinished(WebView view, String url) {
if(!webView.getSettings().getLoadsImagesAutomatically()) {
webView.getSettings().setLoadsImagesAutomatically(true);
}从上面的代码，可以看出我们对API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时，会只有一个image标签得到加载，因而对于这样的系统我们就先直接加载。
十一、WebView硬件加速导致页面渲染闪烁问题解决方法
关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速
1、Application级别：为整个应用程序开启硬件加速，在AndroidManifest中加入如下配置
2、Activity级别：控制每个activity是否开启硬件加速，只需在activity元素中添加android:hardwareAccelerated属性即可
3、Window级别：注：目前还不支持在Window级别上关闭硬件加速
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED，
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
4、View级别：运行时单个view硬件加速，目前Android还不支持在View级别开启硬件加速
代码如下：
mView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
[//TODO 关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍
先提供学习地址：http://android.toolib.net/guide/topics/graphics/hardware-accel.html
我们开启硬件加速后，WebView渲染页面更加快速，拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
十二、其他注意事项：
1> 从网络上下载html页面的过程应放在工作线程(后台线程)中
2> html下载成功后渲染出html的步骤应放在UI主线程,不然WebView加载网页过程会容易报错你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。很乐意加好友哈~
1、首先连接同一个局域网（同一个路由器即可）2、电脑cmd,输入ipconfig,查看IP然后将你电脑服务器地址的127.0.0.1换成电脑IP,在手机浏览器中输入即可了
你还没有登录，请先登录或注册慕课网帐号
我是这样做的先
下载一个草料二维码插件 ，下载地址
，下载好了就安装在chrome浏览器上，不要告诉我你不会安装插件再
用node.js建立本地服务器。node.js 建立本地服务器具体流程和 方法:1、先下载安装node.js
无脑 点击安装、下一步就好了，安装好了 就进行下面第二步2、用Node.js 建立本地服务器方法步骤
/article/fff.html?qqpfto=pcqq.discussion服务器和二维码插件安装好了，就可以用你的手机扫描服务器上的html文件，用手机看电脑上的页面效果，杠杠的
你还没有登录，请先登录或注册慕课网帐号
如果仅仅是想预览直接使用chrome开发者工具就好。如果是想在手机端访问，可以在电脑端启动server服务。然后在手机上通过访问电脑端的 IP：端口
来访问。顺带推荐下browsersync这个插仵
相信你会爱上它。Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
你还没有登录，请先登录或注册慕课网帐号
谷歌浏览器F12调到手机预览，或者一些编辑器也带手机预览功能
你还没有登录，请先登录或注册慕课网帐号
首先让开发的机器和测试手机连同一个局域网，然后你查看一下开发机在局域网内的ip，最后用手机输入对应ip加项目地址就可以了。
你还没有登录，请先登录或注册慕课网帐号
按F12，然后ctrl+shift+M。
你还没有登录，请先登录或注册慕课网帐号
东北的一匹狼
用手机访问电脑IP就可以了
你还没有登录，请先登录或注册慕课网帐号
这位同学不懒，个性签名很长，躲在大树后面会被部落看...
用微信扫一扫，或者直接用chrome 调出手机模式测试，望采纳！
你还没有登录，请先登录或注册慕课网帐号
11984人关注
58099人关注
23972人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2在Android开发中往往需要实现网页的浏览，webview就是android开发控件中功能极其强大的一员，它完全可以充当一个简易的浏览器，能够自己设置主页。试想，用自己开发的app把主页设成自己技术博客地址，一打开便进入了自己的空间，何其的方便。
在webview使用中有以下几点需要注意：
1、关于访问网络的问题
由于webview需要通过数据通信来访问网络，所以在manifest.xml配置文件中需要进行权限的设置（声明）
&uses-permission android:name=&android.permission.INTERNET&/&
2、如何实现不调用第三方浏览器即可进行页面反应
/*在webview加载网页时，不调用第三方浏览器打开的办法：
* 设置WebViewClient，并重写WebViewClient的shouldOverrideUrlLoading方法
* 返回true为不调用，反之 false为调用第三方浏览器
webView.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
3、网页中包含JavaScript内容时如何设置
android webview之所以功能强大就是能够和js进行交互 把js写成的网页嵌套到app中。
//网页中包含JavaScript内容需调用以下方法，参数为true
webView.getSettings().setJavaScriptEnabled(true);
4、如何使得物理返回键实现页面上翻而不是退出程序
用过浏览器的同学应该都知道，浏览网页时点按手机上的返回键并不会导致程序的退出，而是回到之前打开的网页，这时候就需要重写onKeyDown(keyCode, event)方法 改写物理按键返回的逻辑。以下是设置方法：
//重写onKeyDown(keyCode, event)方法 改写物理按键 返回的逻辑
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if(keyCode==KeyEvent.KEYCODE_BACK)
if(webView.canGoBack())
webView.goBack();//返回上一页面
System.exit(0);//退出程序
return super.onKeyDown(keyCode, event);
5 、出现net::ERR_CACHE_MISS错误提示
使用缓存的方式是基于导航类型。正常页面加载的情况下将缓存内容。当导航返回,内容不会恢复（重新加载生成）,而只是从缓存中取回内容。可以进行一下代码设置：
//出现net::ERR_CACHE_MISS错误提示
//使用缓存的方式是基于导航类型。正常页面加载的情况下将缓存内容。当导航返回,
//内容不会恢复（重新加载生成）,而只是从缓存中取回内容
if (Build.VERSION.SDK_INT &= 19) {
Toast.makeText(this, &hhahhhhaha&, Toast.LENGTH_LONG).show();
webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
6 、出现net::ERR_NAME_NOT_RESOLVED错误
导致这个错误的因素有很多，我遇到的就比较特殊和纠结。因为用手机调试时需要用流量，鄙人比较穷，就用来电脑开的WiFi，可是出现了这个net::ERR_NAME_NOT_RESOLVED错误，只有用手机数据流量才得以解决。这是我找到的一些解决方法：
DNS 是将网站名称解析为互联网地址的网络服务。
a、把能上网的电脑连上，看一网络连接中的IP、DNS是自动还是指定，如果是指定记下来。
b、再把自己的电脑连上，检查一下自己的电脑的网络连接中的IP、DNS，与能上网的电脑设置成一样再试一下。
c.浏览器设置代理，请检测自己的浏览器是否设置代理或者正在开启代理软件，导致出现打不开网页情况。
d.电脑病毒破坏浏览器组件和系统文件，部分杀毒软件对被木马病毒感染程序进行查杀，但并未进行修复。
e.DNS设置问题，DNS服务器解释出错，需要手动在本地连接进行设置。
7 、若要显示本地文件和本地html文件应该放在哪
android工程目录下单assets文件
webView.loadUrl(&file:///android_asset/icon.jpg&);
基本上的要点就是和这些了，接下来是具体实现：
这是布局文件
其实就是一个大大的webview组件：
&RelativeLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools&
android:layout_width=&wrap_content&
android:layout_height=&wrap_content&
tools:context=&.MainActivity& &
android:id=&@+id/webView&
android:layout_width=&fill_parent&
android:layout_height=&fill_parent&
android:layout_alignParentRight=&true&
android:layout_alignParentTop=&true& /&
&/RelativeLayout&
这是主文件：
package com.example.
import java.net.URLE
import android.app.A
import android.os.B
import android.os.B
import android.view.KeyE
import android.webkit.WebS
import android.webkit.WebV
import android.webkit.WebViewC
import android.widget.T
public class MainActivity extends Activity {
WebView webV
final String mimeType = &text/html&;
final String encoding = &utf-8&;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
/*在webview加载网页时，不调用第三方浏览器打开的办法：
* 设置WebViewClient，并重写WebViewClient的shouldOverrideUrlLoading方法
* 返回true为不调用，反之 false为调用第三方浏览器
webView.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
//网页中包含JavaScript内容需调用以下方法，参数为true
webView.getSettings().setJavaScriptEnabled(true);
//出现net::ERR_CACHE_MISS错误提示
//使用缓存的方式是基于导航类型。正常页面加载的情况下将缓存内容。当导航返回,
//内容不会恢复（重新加载生成）,而只是从缓存中取回内容
if (Build.VERSION.SDK_INT &= 19) {
webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
webHtml();
webImage();
localHtml();
localImage ();
localHtmlImage();
//重写onKeyDown(keyCode, event)方法 改写物理按键 返回的逻辑
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if(keyCode==KeyEvent.KEYCODE_BACK)
if(webView.canGoBack())
webView.goBack();//返回上一页面
System.exit(0);//退出程序
return super.onKeyDown(keyCode, event);
* 显示网页
private void webHtml() {
webView.loadUrl(&&);
} catch (Exception ex) {
ex.printStackTrace();
显示网络图片
private void webImage() {
webView.loadUrl(&/images/haha.jpg&);
} catch (Exception ex) {
ex.printStackTrace();
* 显示本地图片文件
private void localImage() {
// 本地文件处理(文件名中有空格时用+来替代)
webView.loadUrl(&file:///android_asset/icon.jpg&);
} catch (Exception ex) {
ex.printStackTrace();
* 显示本地网页文件
private void localHtml() {
// 本地文件处理( 文件名中有空格用+来替代)
webView.loadUrl(&file:///android_asset/find.html&);
} catch (Exception ex) {
ex.printStackTrace();
* 显示本地图片和文字混合的Html内容
private void localHtmlImage() {
String data = &测试本地图片和文字混合显示,这是APK里的图片&;
// SDK1.5本地文件处理(不能显示图片)
// SDK1.6及以后版本
// webView.loadData(data, mimeType, encoding);
// 本地文件处理(能显示图片)
webView.loadDataWithBaseURL(&about:blank&, data, mimeType,
encoding, &&);
} catch (Exception ex) {
ex.printStackTrace();
这样，一个简易的个人主页浏览器就完成了。
相关 [android 开发 webview] 推荐：
- 移动开发 - ITeye博客
Android和iOS系统都提供了标准的浏览器控件，在Android中是WebView，iOS中为UIWebView. 在iOS中你实例化一 个UIWebView即可调用loadRequest来加载一个网页，但是在Android中你不仅需要创建一个WebView，还需要做一些其他的事 情，建议初次使用WebView的读者按照以下步骤使用：.
- CSDN博客推荐文章
最近把做好的iPad HybridApp向Android迁移，碰到的坑太多了，让我这个折腾过Android接近4年的老鸟都头疼. 现在把前人遇到的都列出来，再慢慢解决自己的，目前已经解决了android键盘覆盖问题，下面最棘手的问题就是屏幕高度的适配问题了. 1、 Andrid4.1事件穿透BUG 原因不明.
- SegmentFault 最新的文章
在android内打开一个网页的时候，有时我们会要求与网页有一些交互. 而这些交互是在基于javaScript的基础上. 那么我们来学习一下android如何与网页进行JS交互. protected V// 刷新按钮. protected String url = &&;// 网址url.
- 浏览器 - 互联网 - ITeye博客
在Android开发中往往需要实现网页的浏览，webview就是android开发控件中功能极其强大的一员，它完全可以充当一个简易的浏览器，能够自己设置主页. 试想，用自己开发的app把主页设成自己技术博客地址，一打开便进入了自己的空间，何其的方便.
在webview使用中有以下几点需要注意：.
- ITeye博客
使能javascript：. 编写自己的WebViewClient，并在onPageFinished中提取网页源码. 运行，可以看到在showSource(String html)中打印了网页源码. 已有
0 人发表留言，猛击-&&
这里&&-参与讨论. —软件人才免语言低担保 赴美带薪读研.
- 博客园_首页
　　上一篇博文：
Android WebView使用基础已经说了一些Android中WebView的基本使用. 　　本篇文章主要介绍WebView中的JavaScript代码的执行相关，已经JS代码与Android代码的互相调用. 　　（因为本人对Web开发并不是很熟悉，所以如果有哪些地方说得不对，还请指正.
- 移动开发 - ITeye博客
关注微信号：javalearns
随时随地学Java. 目前Android WebView问题越来越多，接下来由爱内测（）的技术工程师为我们介绍几种常见的Android WebView问题：. 1.为WebView自定义错误显示界面: /** * 显示自定义错误提示页面，用一个View覆盖在WebView */ protected void showErrorPage() { LinearLayout webParentView = (LinearLayout)mWebView.getParent();.
在WebView里加载SSL网页很正常，也没什么难度. 但如果要加载的SSL页面的证书有问题，比如过期、信息不正确、发行机关不被信任等，WebView就会拒绝加载该网页. PC上的浏览器会弹出证书错误的对话框，提示你是否要无视错误继续浏览. 实际上在WebView里也可以这样做，以实现加载证书有问题的页面.
- CSDN博客推荐文章
WebView, WebChromeClient和WebViewClient加载网页基本用法.
webview是android中的浏览器控件，在一些手机应用中常会用到b/s模式去开发应用，这时webview的强大功能就会显示出来.
1、webview的几点设置.
权限设置：.AndroidManifest.xml中必须使用许可&android.permission.INTERNET&,否则会出Web page not available错误.
- CSDN博客推荐文章
如有转载，请声明出处: 时之沙:
http://blog.csdn.net/t12x3456. 继上一篇
Android WebView常见问题及解决方案汇总
中归纳了一些处理webview的常见问题，这次要说的是webview中的touch事件:. 有时候在开发中，我们需要对webview加入触摸事件的处理，比如加入滑动效果或者类似于阅读中的翻页效果，这时候我们就需要重写webview中的onTouch方法:.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。}