Android(H5)互相調用方法

記錄一下前面混合開發時很重要的java與js互調方法進行數據交互。

混合開發就須要webview這個控件了

這就很玄學了，哈哈哈

這篇文章https://www.jianshu.com/p/3d9a93c9fea2能夠看看

先來設置一下webview。WebSettings用於管理WebView狀態配置

public static boolean WebViewSetting(Activity activity, WebView webview) { final WebSettings webSettings = webview.getSettings(); webSettings.setDomStorageEnabled(true);// 主要是這句
        webSettings.setJavaScriptEnabled(true);// 啓用js
        webSettings.setBlockNetworkImage(false);// 解決圖片不顯示
        webSettings.setSavePassword(false); webSettings.setDefaultTextEncodingName("utf-8");//設置編碼格式
        webSettings.getSettings().setBuiltInZoomControls();//設置是否支持縮放
        webSettings.addJavascriptInterface(obj,str);//向html頁面注入java對象
        webSettings.setUseWideViewPort(true);//設置此屬性，可任意比例縮放
        webSettings.setLoadWithOverviewMode(true);// 頁面支持縮放：
        webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webUrl.requestFocusFromTouch(); //若是webView中須要用戶手動輸入用戶名、密碼或其餘，則webview必須設置支持獲取手勢焦點。
        webSettings.setJavaScriptEnabled(true);  //支持js
        webSettings.setUseWideViewPort(false);  //將圖片調整到適合webview的大小
        webSettings.setSupportZoom(true);  //支持縮放 webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持內容從新佈局
        webSettings.supportMultipleWindows();  //多窗口
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //關閉webview中緩存
        webSettings.setAllowFileAccess(true);  //設置能夠訪問文件
        webSettings.setNeedInitialFocus(true); //當webview調用requestFocus時爲webview設置節點
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持經過JS打開新窗口
        webSettings.setLoadWithOverviewMode(true); // 縮放至屏幕的大小
        webSettings.setLoadsImagesAutomatically(true);  //支持自動加載圖片 // 讓JavaScript能夠自動打開windows設置容許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 設置緩存
        webSettings.setAppCacheEnabled(false); // 設置緩存模式,一共有四種模式 // webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); // 設置緩存路徑
        webSettings.setAppCachePath(""); // 支持縮放(適配到當前屏幕)
        webSettings.setSupportZoom(true); // 將圖片調整到合適的大小
        webSettings.setUseWideViewPort(true); // 支持內容從新佈局,一共有四種方式 // 默認的是NARROW_COLUMNS
 webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); // 設置默認字體大小
        webSettings.setDefaultFontSize(12); // 支持縮放
        webSettings.setSupportZoom(false); //設置支持兩指縮放手勢
        webSettings.setBuiltInZoomControls(false); return true; }

下面重要的來了

addJavascriptInterface是WebKit的原生API，屬於WebView對象的公共方法，用於暴露一個java對象給js，使得js能夠直接調用方法。

因爲它不安全，4.2後新增了@JavascriptInterface註解

還有個框架：https://github.com/lzyzsd/JsBridge  ---這個項目在Java和JavaScript之間架起了橋樑。

如今要開始加載頁面了 webview.loadUrl("https://www.baidu.com/");

@SuppressLint("JavascriptInterface") private void initMixedPage() { //封裝webview
        NativeWebViewUtil nativeWebViewUtil = new NativeWebViewUtil(); nativeWebViewUtil.WebViewSetting(this,webview); //添加Javascript的映射
        webview.addJavascriptInterface(this,"android"); webview.loadUrl("https://www.baidu.com"); webview.setWebViewClient(new WebViewClient(){ @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); // 加載頁面
 } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 加載結束
                webview.evaluateJavascript("javascript:get_android_base("aaa")", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此處爲 js 返回的結果
                        Log.v("Native",value); } }); } }); }

沒有回掉能夠寫null.

第1、Android調用js

有兩個很重要的方法setWebChromeClient和setWebClient

setWebChromeClient主要處理解析，渲染網頁等瀏覽器作的事情

WebChromeClient是輔助WebView處理Javascript的對話框等

要調用js就要等webview加載完成後再調用js方法

webview.setWebViewClient(new WebViewClient(){ @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); // 加載頁面
 } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 加載結束js 方法 get_android_base
                webview.evaluateJavascript("javascript:get_android_base("aaa")", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此處爲 js 返回的結果
                        Log.v("Native",value); } }); } });

javascript代碼

接收android發來的數據

function get_android_base(base){ alert(base); }

第2、js調用Android

javascrip代碼

js的一個方法 get_data()

window.android.get_data("mcontrol");

 Android代碼

@JavascriptInterface public void get_data(String base){ Log.d(TAG,base); }

 到這裏，簡單的互調就完成了。

互調就很玄學，老是有各類各樣的問題哈哈哈。

後面再記錄下騰訊的webview