其實webview載入資源的速度並不慢,但是如果資源多了,當然就很慢。圖片、css 、js 、html這些資源每個大概需要10-200ms ,一般都是30ms就ok了。不過webview是必須等到全部資源都完成載入,才會進行渲染的,所以載入的速度很重要!從Google上我們瞭解到,webview載入頁面的順序是:先載入html,然後從裡面解析出css、js檔案和頁面上的圖片資源進行載入。如果webkit的緩衝裡面有,就不載入。載入完這些資源之後,就進行css的渲染和js的執行。Css的渲染一般不需要很長時間,幾十毫秒就ok。關鍵是js的執行,如果用了jQuery,則執行起來需要5-6秒。而在這段時間,如果不在webview裡設定背景,網頁部分是白色的,很難看。這是一個很糟糕的使用者體驗。所以#歐#柏泰#克建議如果用網頁布局程式,最好別用那些龐大的js架構。最好使用原生的js寫業務指令碼,以提升載入速度,改善使用者體驗。
在混合開發中，有時會用到安卓原生SDK，如調用相機、查看相簿、錄音等，這就需要web頁面中的JavaScript能調用到安卓SDK介面。由於Android的WebView是基於webkit核心的，整合了js與java互調的介面函數，可以方便地進行開發使用。
介面布局xml：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" ><WebViewandroid:id="@+id/webView"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_above="@+id/linearLayout"/><LinearLayout android:id="@+id/linearLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"><Buttonandroid:id="@+id/btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Java調用JavaScript介面"></Button></LinearLayout></RelativeLayout>
java代碼：
private WebView webView;private Handler handler = new Handler();private Button button;@SuppressLint("SetJavaScriptEnabled")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = (WebView) findViewById(R.id.webView);//自訂webView設定WebSettings webSettings = webView.getSettings();webSettings.setJavaScriptEnabled(true);webView.addJavascriptInterface(new MyJavaScriptInterface(MainActivity.this), "javaInterface");//如果注釋了，javaScript中的alert彈窗等就會失效，不顯示webView.setWebChromeClient(new WebChromeClient());//webView.setWebChromeClient(new MyWebChromeClient());//測試webView載入是否正常//webView.loadUrl("http://www.baidu.com/");webView.setWebViewClient(new HelloWebView());webView.loadUrl("file:///android_asset/index.html");button = (Button) findViewById(R.id.btn);button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {String param = "bb";webView.loadUrl("javascript:showTitle('"+param+"')");}});}private class HelloWebView extends WebViewClient{@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {// TODO Auto-generated method stubview.loadUrl(url);return true;} }/*** 在主線程中定義JavaScript可以調用的安卓介面* @author CHQ* API 以後，每個被調用java函數都要叫聲明 @JavascriptInterface*/public class MyJavaScriptInterface{private Context context;public MyJavaScriptInterface(Context context){this.context = context;}@JavascriptInterfacepublic String toString() {return "this is interface";}@JavascriptInterfacepublic void clickOnAndroid() {Toast.makeText(context, "js調用安卓：....", Toast.LENGTH_SHORT).show();}/*** 安卓調用JS介面，要開啟子線程調用*/@JavascriptInterfacepublic void call() {Toast.makeText(context, "安卓用戶端再調用JavaScript介面", Toast.LENGTH_SHORT).show();handler.post(new Runnable() { @Overridepublic void run() {String param = "bb";webView.loadUrl("javascript:showTitle('"+param+"')");}});}}
其中：有幾點必須注意的，網上早期關於WebView的描述中，有幾點變化。1）安卓4.2以上的版本中使用WebView實現Java與Js互調，java介面需要聲明@JavascriptInterface ; 2）WebView要調用setWebChromeClient()，以適應Js等彈窗等實現；3）addJavascriptInterface中綁定的介面中調用JavaScript介面，需要開啟子線程來調用（報錯：Caused by: java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread. ）；
HTML代碼：
<html><script type="text/javascript">//安卓定義的介面1function callAndroidInterface() {window.javaInterface.clickOnAndroid();}//function showTitle(param) {alert("傳參："+param);var x = document.getElementById("title");alert("標題："+x.innerHTML);}</script><body><h3 id="title">關於安卓與JavaScript的互動</h3><input type="button" value="調用介面1" onclick="callAndroidInterface()"></input> <input type="button" value="測試介面可用性" onclick="showTitle('aa')"></input> <input type="button" value="調用介面2" onclick="window.javaInterface.call()"></input></body></html>
以上html檔案，其中javaInterface就是webView中addJavacriptInterface()方法中注入的介面入口名稱，通過該名稱就可以直接調用Java中的介面。（該html頁面需要保持到項目assets目錄中，由webView.loadUrl("file:///android_asset/index.html")來載入）;
效果圖：
其中，對話方塊彈出：網址為"file://"的網頁顯示：,如果是伺服器上的web頁面就會顯示源IP地址等等，顯然不是我們想要的。下一篇，我們可以重寫WebChromeClient來修改對話方塊、確認框等webView的最佳化。
以上內容是針對Android WebView上實現JavaScript與Java互動的全部內容，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
