安卓APP載入HTML5頁面解決方式總結
阿新 • • 發佈:2018-02-13
true ide 不同 webclient devtools 先來 介紹 未來 童鞋
安卓操作系統在前端頁面載入方面針對開發人員提供了webView組件。並給予響應的API去使用。但其底層的內核在4.4曾經是webKit內核(對H5的支持還遠遠不夠),4.4以後是chromium內核(JS解析引擎採用的便是現在最經常使用的V8引擎,對H5的支持也逐漸加大),隨著安卓操作系統的不斷叠代,5.0已解決通過網頁打開本地文件選擇器的問題。總之技術在不斷的成熟,有興趣了解細節的可參考http://blog.csdn.net/typename/article/details/40425275
這裏簡介下。為何webView既要setWebClient,又要setWebChromeClient。這兩者並非因為4.4以後webView採用了chromium的內核所以以後就舍棄了WebClient(之前有不少童鞋誤解了)。事實上兩者是相輔相成的:
WebViewClient主要幫助WebView處理各種通知、請求事件的,WebChromeClient主要輔助WebView處理Javascript的對話框、站點圖標、站點title、載入進度,詳細可重寫的接口大家可自行查閱SDK文檔。 回到正題,原本希望的效果是轉盤能轉動,各類信息包含用戶信息、圖片信息均能顯示正常。可真正顯示出來的竟是這樣的效果:
轉盤無法轉動。用戶是誰沒有顯示。可抽獎的次數亦沒有顯示,可是將鏈接放入瀏覽器內卻毫無問題。顯示正常
點擊inspect(這裏假設不行,可能須要FQ) 出現例如以下界面
我們點擊console
接著點進去看下發生了什麽
咨詢了下做前端的同事,這裏是localStorage.getItem這裏因為localStorage為空導致的。為什麽會這樣呢,到這裏,須要補充一下 localStorage 的知識。 HTML5 Storage主要有: sessionStorage: 會話 (session) 級別的數據存儲,會話結束後,相關的數據就會被清除掉。 localStorage: 用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。 作為 HTML5 標準的一部分,絕大多數的瀏覽器都是支持 localStorage 的,可是鑒於它的安全特性(不論什麽人都能讀取到它,雖然有相應的限制,將敏感數據存儲在這裏依舊不是明智之舉)。Android 默認是關閉該功能的。 也就是說,針對寫了這類代碼的H5頁面的解析,還須要在上述代碼裏加入:
關於其牛逼之處。此處不做贅述,有興趣的童鞋能夠看看這篇文章http://dev.yesky.com/24/39285024.shtml,講述了他的發展歷史和優勢。
2)在主工程中,加入該庫
3)源代碼例如以下
附件:http://download.csdn.net/detail/zcchange1025/9455185
因為H5頁面在移動端的兼容性及擴展性方面體現出來的優勢,又兼得APP中植入H5頁面相應用的靈活性有大大的提升(如活動、遊戲的更新等)。APP開發不可避免的須要載入一些H5頁面。但安卓client對網頁內容的排版、整理、交互等可能會出現一些不可預料的問題。本文將對安卓端載入網頁寫一些比較通用,可能避免問題的統一的解決方法總結。
背景
一般對前端知識有所了解的都清楚,解析網頁主要是靠頁面渲染引擎和JS解析引擎,前者負責取得網頁的內容(HTML、XML、圖象等等)、整理信息(比如加入CSS等),以及計算網頁的顯示方式然後會輸出至顯示器或打印機,後者負責網頁的一些動態交互等。疑難雜癥
近期做了個項目,裏面須要在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; @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); } }
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.html CrossWalk包的下載:https://crosswalk-project.org/documentation/downloads.html 1)將下載下來的包,和你須要使用該包的工程放在同一個目錄下,在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; @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有什麽弊端,那就是太大了,一個.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; @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); } }
小結
說了這麽多,我還是建議大家多使用安卓SDK提供的組件和功能,畢竟功能上能夠自己封裝,出了問題調試起來也方便,webview眼下在不斷地更新叠代,大家還是要對它充滿信心。附件:http://download.csdn.net/detail/zcchange1025/9455185
安卓APP載入HTML5頁面解決方式總結