由于H5頁面在移動(dòng)端的兼容性及擴(kuò)展性方面體現(xiàn)出來的優(yōu)勢(shì)些举，又兼得APP中植入H5頁面對(duì)應(yīng)用的靈活性有大大的提升（如活動(dòng)吨瞎、游戲的更新等）株旷，APP開發(fā)不可避免的需要加載一些H5頁面塔次，但安卓客戶端對(duì)網(wǎng)頁內(nèi)容的排版爷恳、整理有缆、交互等可能會(huì)出現(xiàn)一些不可預(yù)料的問題。本文將對(duì)安卓端加載網(wǎng)頁寫一些比較通用温亲，可能避免問題的統(tǒng)一的解決方法總結(jié)棚壁。
背景
一般對(duì)前端知識(shí)有所了解的都清楚，解析網(wǎng)頁主要是靠頁面渲染引擎和JS解析引擎栈虚，前者負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML袖外、XML、圖象等等）魂务、整理信息（例如加入CSS等）曼验，以及計(jì)算網(wǎng)頁的顯示方式然后會(huì)輸出至顯示器或打印機(jī)，后者負(fù)責(zé)網(wǎng)頁的一些動(dòng)態(tài)交互等粘姜。
安卓操作系統(tǒng)在前端頁面加載方面針對(duì)開發(fā)者提供了webView組件鬓照，并給予響應(yīng)的API去使用，但其底層的內(nèi)核在4.4以前是webKit內(nèi)核（對(duì)H5的支持還遠(yuǎn)遠(yuǎn)不夠）孤紧，4.4以后是chromium內(nèi)核（JS解析引擎采用的便是如今最常用的V8引擎豺裆，對(duì)H5的支持也逐漸加大），隨著安卓操作系統(tǒng)的不斷迭代号显，5.0已解決通過網(wǎng)頁打開本地文件選擇器的問題臭猜，總之技術(shù)在不斷的成熟躺酒，有興趣了解細(xì)節(jié)的可參考http://blog.csdn.net/typename/article/details/40425275

疑難雜癥

最近做了個(gè)項(xiàng)目，里面需要在APP中加載一個(gè)叫大轉(zhuǎn)盤的活動(dòng)蔑歌，活動(dòng)頁面當(dāng)然是用H5寫的啦羹应，于是就用webView進(jìn)行加載代碼如下：

package com.example.webviewtest;
 
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.net.http.SslError;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent;
import android.webkit.JsResult;
import android.webkit.SslErrorHandler;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
@SuppressLint("SetJavaScriptEnabled")
public class WebViewActivity extends FragmentActivity {
    private WebView webView;
    private Context context;
    private Activity activity;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        context = this;
        activity = this;
        initView();
    }
 
    //
    private void initView() {
        webView = (WebView) findViewById(R.id.game_WV);
 
        initWebView();
    }
 
    @SuppressLint("NewApi")
    private void initWebView() {
        
        
        if (Build.VERSION.SDK_INT >= 19) {
            webView.getSettings().setCacheMode(
                    WebSettings.LOAD_CACHE_ELSE_NETWORK);
        }
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                activity.setTitle("Loading...");
                activity.setProgress(newProgress * 100);
                if (newProgress == 100) {
                    activity.setTitle(R.string.app_name);
                }
            }
 
            @Override
            public boolean onJsAlert(WebView view, String url, String message,
                    JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });
        webView.setWebViewClient(new GameWebViewClient());
        WebSettings s = webView.getSettings();
        s.setJavaScriptEnabled(true);
        webView.loadUrl(Constants.url);
    }
 
    class GameWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view,
                String url_Turntable) {
            view.loadUrl(url_Turntable);
            return true;
        }
 
        @Override
        public void onReceivedSslError(WebView view, SslErrorHandler handler,
                SslError error) {
            handler.proceed();
        }
 
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
        }
 
        @Override
        public void onPageFinished(WebView view, String url) {
        }
 
    }
 
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
 
}

這里簡(jiǎn)單介紹下，為何webView既要setWebClient丐膝，又要setWebChromeClient量愧，這兩者并不是因?yàn)?.4以后webView采用了chromium的內(nèi)核所以以后就舍棄了WebClient（之前有不少童鞋誤解了），其實(shí)兩者是相輔相成的：
WebViewClient主要幫助WebView處理各種通知帅矗、請(qǐng)求事件的偎肃，WebChromeClient主要輔助WebView處理Javascript的對(duì)話框、網(wǎng)站圖標(biāo)浑此、網(wǎng)站title吨述、加載進(jìn)度允跑，具體可重寫的接口大家可自行查閱SDK文檔澄惊。
回到正題牺弄，原本希望的效果是轉(zhuǎn)盤能轉(zhuǎn)動(dòng)，各類信息包括用戶信息蒲犬、圖片信息均能顯示正常朱监，可真正顯示出來的竟是這種效果：

image.png

用Chrome瀏覽器調(diào)試

可以判斷前端方面的代碼應(yīng)該是沒有問題的奋隶，問題應(yīng)該是出在webView的配置上面擂送，由于我測(cè)試的手機(jī)是安卓4.4操作系統(tǒng)的，對(duì)H5頁面及JS的交互的支持相對(duì)來說已經(jīng)相對(duì)完善了唯欣，而且在手機(jī)自帶的瀏覽器上輸入相同的鏈接運(yùn)行正常嘹吨，那么初步判定應(yīng)該是webView的webSettings的問題，也初步排除了是JS的問題境氢，英文代碼里已經(jīng)設(shè)置了setJavaScriptEnabled(true)蟀拷。前面說了安卓4.4以上webView的內(nèi)核是chronium的，這給我們APP開發(fā)者帶來的另一個(gè)好處是萍聊，可以用chorme瀏覽器調(diào)試匹厘、debug定位Webview加載h5頁面時(shí)所遇到的問題，如圖脐区，打開chrome瀏覽器，插上手機(jī)她按，在此簡(jiǎn)要說明下前提條件（1牛隅、手機(jī)要是USB調(diào)試模式 2炕柔、chrome客戶端需31以上 3、代碼中添加

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
            WebView.setWebContentsDebuggingEnabled(true);
        }

另外可能需要翻墻（這點(diǎn)很媒佣。匕累。。默伍，不過貌似只要翻墻一次即可）
手機(jī)裝好程序欢嘿，連接上電腦，打開對(duì)應(yīng)頁面（WebViewActivity）也糊。

image.png

點(diǎn)擊inspect（這里如果不行炼蹦，可能需要翻墻）
出現(xiàn)如下界面

image.png

我們點(diǎn)擊console

image.png

接著點(diǎn)進(jìn)去看下發(fā)生了什么

image.png

咨詢了下做前端的同事，這里是localStorage.getItem這里由于localStorage為空導(dǎo)致的狸剃，為什么會(huì)這樣呢掐隐，到這里，需要補(bǔ)充一下 localStorage 的知識(shí)钞馁。
HTML5 Storage主要有：
sessionStorage: 會(huì)話 (session) 級(jí)別的數(shù)據(jù)存儲(chǔ)虑省，會(huì)話結(jié)束后，相關(guān)的數(shù)據(jù)就會(huì)被清除掉僧凰。
localStorage: 用于持久化的本地存儲(chǔ)探颈，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的训措。
作為 HTML5 標(biāo)準(zhǔn)的一部分伪节，絕大多數(shù)的瀏覽器都是支持 localStorage 的，但是鑒于它的安全特性（任何人都能讀取到它隙弛，盡管有相應(yīng)的限制架馋，將敏感數(shù)據(jù)存儲(chǔ)在這里依然不是明智之舉），Android 默認(rèn)是關(guān)閉該功能的全闷。
也就是說叉寂，針對(duì)寫了這類代碼的H5頁面的解析，還需要在上述代碼里添加：

s.setDomStorageEnabled(true);

CrossWalk

上面的問題固然解決了总珠，可是如果出了問題屏鳍，Chrome的DevTools都檢測(cè)不出來呢？這是有可能的局服，前面說了钓瞭，WebView解析網(wǎng)頁最關(guān)鍵的是靠底層的解析引擎，WebView只不過是通過JNI調(diào)用了引擎的解析功能并封裝出來給咱們安卓的開發(fā)者使用淫奔。面對(duì)4.4之前的手機(jī)終端怎么辦山涡？亦或是WebView所采用的輕量級(jí)的chronium內(nèi)核本身就解析不出前端開發(fā)者的牛逼腳本怎么辦？盡管Google在版本迭代中不斷修復(fù)Bug，不可否認(rèn)的是鸭丛，目前大家使用的安卓手機(jī)版本參差不齊竞穷，高版本的使用WebView的話都可能會(huì)遇到些奇葩問題，更別說低版本的了鳞溉。當(dāng)然瘾带，我們隊(duì)WebView的未來還是很有信心的，高版本的使用率的增高熟菲，以后這些問題會(huì)越來越少看政，但現(xiàn)如今，如果你對(duì)WebView作為富文本編輯器在全面性和穩(wěn)定性還是不太滿意的話抄罕，可以嘗試CrossWalk允蚣。

CrossWalk介紹

crooswalk的牛逼之處呢，不僅在于他高效贞绵、穩(wěn)定厉萝，而且加載同一個(gè)界面，字體都會(huì)好看些榨崩，據(jù)說3D效果也是非常的理想谴垫。
關(guān)于其牛逼之處，此處不做贅述母蛛，有興趣的童鞋可以看看這篇文章http://dev.yesky.com/24/39285024.shtml翩剪，講述了他的發(fā)展歷史和優(yōu)勢(shì)。

CrossWalk安卓端使用

更高階的使用及了解彩郊，可以參考crosswalk的官網(wǎng)前弯，https://crosswalk-project.org/documentation/embedding_crosswalk.html
CrossWalk包的下載：https://crosswalk-project.org/documentation/downloads.html

1. 將下載下來的包，和你需要使用該包的工程放在同一個(gè)文件夾下秫逝，在eclipse中導(dǎo)入包的工程恕出，看的出來其核心引擎來自于libxwalkcore.so庫。

   
   
   image.png

2. 在主工程中违帆，添加該庫

   
   
   image.png

3. 源碼如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <org.xwalk.core.XWalkView
        android:id="@+id/game_WV"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

package com.example.webviewtest;
 
 
 
 
 
import org.xwalk.core.XWalkResourceClient;
import org.xwalk.core.XWalkView;
 
import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
 
@SuppressLint("SetJavaScriptEnabled")
public class CrossWalkActivity extends FragmentActivity {
    private XWalkView webView;
    private Context context;
    
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crosswalk);
        context = this;
        initView();
    }
 
    //
    private void initView() {
        webView = (XWalkView)findViewById(R.id.game_WV);
        
        initWebView();
    }
 
    private void initWebView() {
        webView.setResourceClient(new GameWebViewClient(webView));
        webView.load(Constants.url,null);
    }
    
    class GameWebViewClient extends XWalkResourceClient{
 
        public GameWebViewClient(XWalkView view) {
            super(view);
        }
        
        @Override
        public void onLoadStarted(XWalkView view, String url) {
            super.onLoadStarted(view, url);
        }
        
        @Override
        public void onLoadFinished(XWalkView view, String url) {
            super.onLoadFinished(view, url);
        }
        
    }
 
}

crosswalk弊端

要是說crosswalk有什么弊端浙巫，那就是太大了，一個(gè).so動(dòng)態(tài)庫就足足有近20M刷后，apk應(yīng)用本身可能都不足他的1/4的畴。單這也看的出其代碼量的巨大，效果全面那就毋庸置疑了尝胆。

Cordova

如果說你嫌crosswalk太大丧裁，又不愿意對(duì)webview在代碼上進(jìn)行各種設(shè)置以保障適應(yīng)各種不同的H5頁面，也許cordova是不錯(cuò)的選擇含衔，從本質(zhì)上說煎娇，cordova其實(shí)還是繼承webview的二庵，所以在他倆從本質(zhì)上說是一樣的，但是介于我之前并不知如何去調(diào)試webview逊桦，老大又不想用crosswalk這個(gè)極度占空間的庫眨猎，于是就找來了cordova的JAR包，總之把當(dāng)時(shí)的問題解決了吧强经，但現(xiàn)在回頭看看，cordova在4.0后已經(jīng)選擇和crosswalk合作了寺渗，我用的jar包還是3.7的匿情，建議以后無需再使用它。但既然做了信殊，那也就把圖和代碼貼上來吧炬称。

image.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <org.apache.cordova.CordovaWebView
        android:id="@+id/game_WV"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

package com.example.webviewtest;
 
import java.util.ArrayList;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
 
import org.apache.cordova.CordovaChromeClient;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaPreferences;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CordovaWebViewClient;
import org.apache.cordova.PluginEntry;
import org.apache.cordova.Whitelist;
 
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent;
 
@SuppressLint("SetJavaScriptEnabled")
public class CordovaActivity extends FragmentActivity implements CordovaInterface {
    private final ExecutorService threadPool = Executors.newCachedThreadPool();
    private CordovaWebView webView;
    private int activityRequestCode;
    private CordovaPlugin activityResultCallBack;
    private CordovaPreferences prefs = new CordovaPreferences();
    private Whitelist internalWhitelist = new Whitelist();
    private Whitelist externalWhitelist = new Whitelist();
    private ArrayList<PluginEntry> pluginEntries;
    private Context context;
    
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cordova);
        context = this;
        initView();
    }
 
    //
    private void initView() {
        webView = (CordovaWebView)findViewById(R.id.game_WV);
        
        initWebView();
    }
 
    private void initWebView() {
        internalWhitelist.addWhiteListEntry("*", false);
        externalWhitelist.addWhiteListEntry("tel:*",false);
        externalWhitelist.addWhiteListEntry("sms:*", false);
        prefs.set("loglevel", "DEBUG");
        webView.init(this, makeWebViewClient(webView), makeChromeClient(webView), pluginEntries, internalWhitelist, externalWhitelist, prefs);
        
        webView.loadUrlIntoView(Constants.url);
    }
    
    private CordovaWebViewClient makeWebViewClient(CordovaWebView webView){
        return webView.makeWebViewClient(this);
    }
    
    private CordovaChromeClient makeChromeClient(CordovaWebView webView){
        return webView.makeWebChromeClient(this);
    }
 
    @Override
    public Activity getActivity() {
        // TODO Auto-generated method stub
        return this;
    }
 
    @Override
    public ExecutorService getThreadPool() {
        // TODO Auto-generated method stub
        return threadPool;
    }
 
    @Override
    public Object onMessage(String arg0, Object arg1) {
        if(arg0.equals("onPageStarted")){
        }
        if(arg0.equals("onPageFinished")){
        }
        return null;
    }
 
    @Override
    public void setActivityResultCallback(CordovaPlugin arg0) {
        if(activityResultCallBack != null){
            activityResultCallBack.onActivityResult(activityRequestCode, Activity.RESULT_CANCELED, null);
        }
        this.activityResultCallBack = arg0;
    }
 
    @Override
    public void startActivityForResult(CordovaPlugin arg0, Intent arg1, int arg2) {
        setActivityResultCallback(arg0);
        startActivityForResult(arg1, activityRequestCode);
    }
 
 
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK){
        }
        return super.onKeyDown(keyCode, event);
    }
}

小結(jié)

說了這么多，我還是建議大家多使用安卓SDK提供的組件和功能涡拘，畢竟功能上可以自己封裝玲躯，出了問題調(diào)試起來也方便，webview目前在不斷地更新迭代鳄乏，大家還是要對(duì)它充滿信心跷车。

附件：http://download.csdn.net/detail/zcchange1025/9455185