跟Google 学代码：Web Apps以及WebView究极优化

引言

从本篇博客可以学到什么？

1. 用构建页面

2. 优化的加载

3. 成型的优化加载方案，

4. app混合开发，常用框架

提供了自定义的方式 让我们在 App中显示web内容时，响应用户的行为，比如在web页面点击，跳转url等

了解上述四大特性后，通过一个小demo来熟悉

加入对象

和普通的View一样，可以通过代码静态加载

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/webview"android:layout_width="fill_parent"android:layout_height="fill_parent"
/>

也可以通过new （）创建一个对象的形式加载。

获取对象之后，通过来传入数据，来完成页面显示

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("博客地址");

比如通过打开我的博客：

预览图

最后不要忘了添加权限哟！

... >"android.permission.INTERNET" />...

在这一环节可能遇到的bug：

很多人可能遇到载入地址的时候，App打开外部浏览器来显示页面的bug，接下来会告诉你怎么做！

在中使用脚本

关于什么是 请看 WC3的官方介绍

默认不支持，我们可以通过的()来设置它可用

如何获得？答：.();

例如：

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

向代码绑定代码

通过开发 App的时候，你可以创建来服务于脚本代码调用代码。

例如，通过代码去调用的代码，向用户展示一个,我知道你是大牛，了解的alert()函数也可以完成类似的功能。但这里只是作为一个引入的例子，通过它我们来了解和 是如何交互的

首先自定义一个对象，任意名称即可

public class WebAppInterface {Context mContext;/** Instantiate the interface and set the context */WebAppInterface(Context c) {mContext = c;}/** Show a toast from the web page */@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();}
}

注意@注解，当版本高于17的时候，对应.2以上的系统级别，一定要使用注解，否则JS代码不识别的本地代码，

创建完毕对象，我们就要把这玩意传递给了，如何传呢？

答案是通过的ce()方法

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

呃，光这么做，可能还不够，我们还缺少测试的代码

在 环境下：

src-main->新建文件夹->新建test.html 文件

代码如下：

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /><script type="text/javascript">function showAndroidToast(toast) {Android.showToast(toast);}
script>

等等，我们该如何引用目录下的文件呢？（忽略e的命名）

答：file:///xx.html

 mWebView.loadUrl("file:///android_asset/e.html");

这一步有的同学可能出错

出错原因无非是两个：

确定目录名称和摆放位置是否正确

确定是否正确引入到中

这么快就OK了吗？是不是已经迫不及待来看它的效果啦：

嗯，满足你：

处理页面导航

通常浏览器不可能只展示一个页面，比如页面前进，页面后退的功能也是要有的，也提供了来满足商户需求

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new WebViewClient());

是系统默认的组件

当日我们也可以自定义

比如：

private class MyWebViewClient extends WebViewClient {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (Uri.parse(url).getHost().equals("www.example.com")) {// This is my web site, so do not override; let my WebView load the pagereturn false;}// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLsIntent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));startActivity(intent);return true;}
}

ding（）就是用来解决 有的系统版本 会默认打开外部浏览器 载入页面。

接着创建实例引用实例

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

最后就是在控制层 来处理的跳转逻辑

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {// Check if the key event was the Back button and if there's historyif ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {myWebView.goBack();return true;}// If it wasn't the Back key or there's no web page history, bubble up to the default// system behavior (probably exit the activity)return super.onKeyDown(keyCode, event);
}

项目完整代码：

.java 类

public class MainActivity extends AppCompatActivity {private MyWebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);fab.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show();}});mWebView = (MyWebView) findViewById(R.id.my_webview);//  mWebView.loadUrl("http://www.taobao.com");mWebView.loadUrl("file:///android_asset/e.html");mWebView.getSettings().setJavaScriptEnabled(true);mWebView.addJavascriptInterface(new             WebAppInterface(getApplicationContext()),"Hello");mWebView.setWebViewClient(new MyWebClient());}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode==KeyEvent.KEYCODE_BACK&&mWebView.canGoBack()){mWebView.goBack();return true;}return super.onKeyDown(keyCode, event);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.menu_main, menu);return true;}}

类，指定页面加载的逻辑

public class MyWebClient extends WebViewClient {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {return super.shouldOverrideUrlLoading(view, url);}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);Log.i("onPageFinished","onPageFinished");}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);Log.i("onPageStarted","onPageStarted");}@Overridepublic void onLoadResource(WebView view, String url) {Log.i("onLoadResource","onLoadResource");super.onLoadResource(view, url);}}

类,用来和交互

public class WebAppInterface {Context mContext;/** Instantiate the interface and set the context */WebAppInterface(Context c) {mContext = c;}/** Show a toast from the web page*/@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();}
}

e.html 文件，模拟服务器的jsp数据

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /><script type="text/javascript">function showAndroidToast(toast) {Hello.showToast(toast);}
script>

如何优化加载？

为了能够更好的使用展示出流畅的的页面，可以从以下几点做优化：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

经过以上几步的优化，一个流畅的生成了。

成型的优化方案:以及相应的集成工具

官网

是一款为HTML应用提供运行时环境的开源项目，同时它也扩展了一些Web平台的新特性。

Web平台已经拥有很多优势，例如从简单的云服务集成到灵活的用户界面元素。当前随其对移动性能和设备API持续增长的关注，Web平台也越来越具有吸引力。

然而对于很多开发者而言，由于基础功能仍然缺失，导致时至今日采用Web平台依旧困难重重。

使用项目，可以改变这种情况

通过使用项目，应用开发人员可以：