安卓APP載入HTML5頁面解決方式總結

標籤：協助   private   簡介   不同   UI   mst   content   版本號碼   arraylist   

因為H5頁面在移動端的相容性及擴充性方面體現出來的優勢，又兼得APP中植入H5頁面相應用的靈活性有大大的提升（如活動、遊戲的更新等）。APP開發不可避免的須要載入一些H5頁面。但安卓client對網頁內容的排版、整理、互動等可能會出現一些不可預料的問題。本文將對安卓端載入網頁寫一些比較通用，可能避免問題的統一的解決方案總結。

背景一般對前端知識有所瞭解的都清楚，解析網頁主要是靠頁面渲染引擎和JS解析引擎，前者負責取得網頁的內容（HTML、XML、圖象等等）、整理資訊（比如加入CSS等），以及計算網頁的顯示方式然後會輸出至顯示器或印表機，後者負責網頁的一些動態互動等。

安卓作業系統在前端頁面載入方面針對開發人員提供了webView組件。並給予響應的API去使用。但其底層的核心在4.4曾經是webKit核心（對H5的支援還遠遠不夠），4.4以後是chromium核心（JS解析引擎採用的便是現在最經常使用的V8引擎，對H5的支援也逐漸加大），隨著安卓作業系統的不斷迭代，5.0已解決通過網頁開啟本地檔案選取器的問題。總之技術在不斷的成熟，有興趣瞭解細節的可參考http://blog.csdn.net/typename/article/details/40425275疑難雜症近期做了個項目，裡面須要在APP中載入一個叫大轉盤的活動。活動頁面當然是用H5寫的啦，於是就用webView進行載入代碼例如以下：

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;@Overridepublic 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() {@Overridepublic 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);}}@Overridepublic 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 {@Overridepublic boolean shouldOverrideUrlLoading(WebView view,String url_Turntable) {view.loadUrl(url_Turntable);return true;}@Overridepublic void onReceivedSslError(WebView view, SslErrorHandler handler,SslError error) {handler.proceed();}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {}@Overridepublic void onPageFinished(WebView view, String url) {}}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {webView.goBack();return true;}return super.onKeyDown(keyCode, event);}}

這裡簡介下。為何webView既要setWebClient，又要setWebChromeClient。這兩者並非因為4.4以後webView採用了chromium的核心所以以後就捨棄了WebClient（之前有不少童鞋誤解了）。事實上兩者是相輔相成的：
WebViewClient主要協助WebView處理各種通知、請求事件的，WebChromeClient主要輔助WebView處理Javascript的對話方塊、網站表徵圖、網站title、載入進度，詳細可重寫的介面大家可自行查閱SDK文檔。

回到正題，原本希望的效果是轉盤能轉動，各類資訊包含使用者資訊、圖片資訊均能顯示正常。可真正顯示出來的竟是這樣的效果：

轉盤無法轉動。使用者是誰沒有顯示。可抽獎的次數亦沒有顯示，可是將連結放入瀏覽器內卻毫無問題。顯示正常
用Chrome瀏覽器調試能夠推斷前端方面的代碼應該是沒有問題的，問題應該是出在webView的配置上面，因為我測試的手機是安卓4.4作業系統的。對H5頁面及JS的互動的支援相對來說已經相對完好了，並且在手機內建的瀏覽器上輸入同樣的連結執行正常，那麼初步判定應該是webView的webSettings的問題。也初步排除了是JS的問題，英文代碼裡已經設定了setJavaScriptEnabled(true)。前面說了安卓4.4以上webView的核心是chronium的。這給我們APP開發人員帶來的還有一個優點是，能夠用chorme瀏覽器調試、debug定位Webview載入h5頁面時所遇到的問題，，開啟chrome瀏覽器，插上手機，在此簡要說明下前提條件（1、手機要是USB偵錯模式 ?2、chromeclient需31以上 ?3、代碼中加入

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

）。另外可能須要FQ（這點非常。。

。

。只是貌似僅僅要FQ一次就可以）手機裝好程式，串連上電腦，開啟相應頁面（WebViewActivity）。

點擊inspect（這裡假設不行，可能須要FQ）出現例如以下介面

我們點擊console

接著點進去看下發生了什麼

諮詢了下做前端的同事，這裡是localStorage.getItem這裡因為localStorage為空白導致的。為什麼會這樣呢，到這裡，須要補充一下 localStorage 的知識。HTML5 Storage主要有：sessionStorage: 會話 (session) 層級的資料存放區，會話結束後，相關的資料就會被清除掉。

localStorage: 用於持久化的本機存放區，除非主動刪除資料，否則資料是永遠不會到期的。作為 HTML5 標準的一部分，絕大多數的瀏覽器都是支援 localStorage 的，可是鑒於它的安全特性（不論什麼人都能讀取到它，雖然有相應的限制，將敏感性資料儲存在這裡依舊不是明智之舉）。Android 預設是關閉該功能的。也就是說，針對寫了這類代碼的H5頁面的解析，還須要在上述代碼裡加入：

s.setDomStorageEnabled(true);

經測試成功！CrossWalk上面的問題固然攻克了，可是假設出了問題，Chrome的DevTools都檢測不出來呢？這是有可能的。前面說了，WebView解析網頁最關鍵的是靠底層的解析引擎，WebView僅僅只是是通過JNI調用了引擎的解析功能並封裝出來給咱們安卓的開發人員使用。面對4.4之前的手機終端怎麼辦？亦或是WebView所採用的輕量級的chronium核心本身就解析不出前端開發人員的牛逼指令碼怎麼辦？雖然Google在版本號碼迭代中不斷修複Bug，不可否認的是，眼下大家使用的安卓手機版本號碼參差不齊。高版本號碼的使用WebView的話都可能會遇到些奇葩問題，更別說低版本號碼的了。當然，我們隊WebView的未來還是非常有信心的，高版本號碼的使用率的增高。以後這些問題會越來越少，但現現在。假設你對WebView作為富文字編輯器在全面性和穩定性還是不太愜意的話，能夠嘗試CrossWalk。CrossWalk介紹crooswalk的牛逼之處呢，不僅在於他高效、穩定，並且載入同一個介面，字型都會好看些，據說3D效果也是非常的理想，能夠先來看看效果。

關於其牛逼之處。此處不做贅述，有興趣的童鞋能夠看看這篇文章http://dev.yesky.com/24/39285024.shtml，講述了他的發展曆史和優勢。CrossWalk安卓端使用更高階的使用及瞭解。能夠參考crosswalk的官網。https://crosswalk-project.org/documentation/embedding_crosswalk.htmlCrossWalk包的下載：https://crosswalk-project.org/documentation/downloads.html1）將下載下來的包，和你須要使用該包的工程放在同一個目錄下，在eclipse中匯入包的工程。看的出來其核心引擎來自於libxwalkcore.so庫。


2）在主工程中，加入該庫

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;@Overridepublic 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);}@Overridepublic void onLoadStarted(XWalkView view, String url) {super.onLoadStarted(view, url);}@Overridepublic void onLoadFinished(XWalkView view, String url) {super.onLoadFinished(view, url);}}}

crosswalk弊端要是說crosswalk有什麼弊端，那就是太大了，一個.so動態庫就足足有近20M。apk應用本身可能都不足他的1/4。

單這也看的出其代碼量的巨大，效果全面那就毋庸置疑了。

Cordova假設說你嫌crosswalk太大，又不願意對webview在代碼上進行各種設定以保障適應各種不同的H5頁面。或許cordova是不錯的選擇，從本質上說，cordova事實上還是繼承webview的，所以在他倆從本質上說是一樣的，可是介於我之前並不知怎樣去調試webview。老大又不想用crosswalk這個極度占空間的庫。於是就找來了cordova的JAR包，總之把當時的問題攻克了吧，但現在回頭看看。cordova在4.0後已經選擇和crosswalk合作了，我用的jar包還是3.7的，建議以後無需再使用它。但既然做了，那也就把圖和代碼貼上來吧。

<?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;@Overridepublic 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);}@Overridepublic Activity getActivity() {// TODO Auto-generated method stubreturn this;}@Overridepublic ExecutorService getThreadPool() {// TODO Auto-generated method stubreturn threadPool;}@Overridepublic Object onMessage(String arg0, Object arg1) {if(arg0.equals("onPageStarted")){}if(arg0.equals("onPageFinished")){}return null;}@Overridepublic void setActivityResultCallback(CordovaPlugin arg0) {if(activityResultCallBack != null){activityResultCallBack.onActivityResult(activityRequestCode, Activity.RESULT_CANCELED, null);}this.activityResultCallBack = arg0;}@Overridepublic void startActivityForResult(CordovaPlugin arg0, Intent arg1, int arg2) {setActivityResultCallback(arg0);startActivityForResult(arg1, activityRequestCode);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_BACK){}return super.onKeyDown(keyCode, event);}}

小結說了這麼多，我還是建議大家多使用安卓SDK提供的組件和功能，畢竟功能上能夠自己封裝，出了問題調試起來也方便，webview眼下在不斷地更新迭代，大家還是要對它充滿信心。
附件：http://download.csdn.net/detail/zcchange1025/9455185

安卓APP載入HTML5頁面解決方式總結