Android和H5交互-基礎篇
hybrid App開發也不是什么新鮮事了,其中native和h5之間的交互則是必不可少的。Android中是如何和H5交互的?


1、webView加載頁面

我們都知道在Android中是通過webView來加載html頁面的,根據HTML文件所在的位置不同寫法也不同:

//例如:加載assets文件夾下的test.html頁面mWebView.loadUrl("file:///android_asset/test.html")//例如:加載網頁mWebView.loadUrl("//www.baidu.com")

如果只是這樣調用mWebView.loadUrl()加載的話,那么當你點擊頁面中的鏈接時,頁面將會在你手機默認的瀏覽器上打開。那如果想要頁面在App內中打開的話,那么就得設置setWebViewClient:

mWebView.setWebViewClient(new WebViewClient() {        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
                mWebView.loadUrl(url);                return true;
            }
        }
    });
2、Android本地通過Java調用HTML頁面中的JavaScript方法

想要調用js方法那么就必須讓webView支持

    WebSettings webSettings = mWebView.getSettings();    //設置為可調用js方法
    webSettings.setJavaScriptEnabled(true);

若調用的js方法沒有返回值,則直接可以調用mWebView.loadUrl("javascript:do()");其中do是js中的方法;若有返回值時我們可以調用mWebView.evaluateJavascript()方法:

 mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
        @Override        public void onReceiveValue(String value) {            Log.e(TAG, "onReceiveValue value=" + value);
        }
    });

js代碼如下:

<script type="text/javascript">
    function sum(a,b){    return a+b;
    }    function do(){    document.getElementById("p").innerHTML="hello world";
    }</script>
2、js調用Android本地Java方法

在Android4.2以上可以直接使用@JavascriptInterface注解來聲明,下面是在一個本地Java方法

 public class JsInteration {    @JavascriptInterface
    public String back() {        return "hello world";
    }
}

定義完這個方法后再調用mWebView.addJavascriptInterface()方法:

 mWebView.addJavascriptInterface(new JsInteration(), "android");

那么在js中怎么來調用呢?

<script type="text/javascript">
     function s(){     //調用Java的back()方法
    var result =window.android.back();    document.getElementById("p").innerHTML=result;
    }</script>
4、攔截HTML頁面中的點擊事件
mWebView.setWebViewClient(new WebViewClient() {
        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            //判斷url攔截事件
            if (url.equals("file:///android_asset/test2.html")) {                Log.e(TAG, "shouldOverrideUrlLoading: " + url);
                startActivity(new Intent(MainActivity.this,Main2Activity.class));                return true;
            } else {
                mWebView.loadUrl(url);                return false;
            }
        }
    });
以上就是Java調用js方法以及js調用Java方法的實現交互方式中的一種。下面給出完整代碼:
mainActivity
public class MainActivity extends AppCompatActivity {public static final String TAG = "MainActivity";private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView = (WebView) findViewById(R.id.webView);
    mWebView.loadUrl("file:///android_asset/test.html");
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    mWebView.addJavascriptInterface(new JsInteration(), "android");
    mWebView.setWebViewClient(new WebViewClient() {        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {            if (url.equals("file:///android_asset/test2.html")) {
                Log.e(TAG, "shouldOverrideUrlLoading: " + url);
                startActivity(new Intent(MainActivity.this,Main2Activity.class));                return true;
            } else {
                mWebView.loadUrl(url);                return false;
            }
        }
    });
}//Android調用有返回值js方法@TargetApi(Build.VERSION_CODES.KITKAT)public void onClick(View v) {

    mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {        @Override
        public void onReceiveValue(String value) {
            Log.e(TAG, "onReceiveValue value=" + value);
        }
    });
}public class JsInteration {    @JavascriptInterface
    public String back() {        return "hello world";
    }
}
}
test.html
<!DOCTYPE html><html><head><title></title><script type="text/javascript">
    function sum(a,b){    return a+b;
    }     function s(){    var result =window.android.back();    document.getElementById("p").innerHTML=result;
    }    </script></head><body><button onclick="s()">調用本地方法</button><a href="file:///android_asset/test2.html">點擊</a><p id="p"></p></body></html>

來源:簡書    

上一篇: 簡單好用的Android頁面路由框架

下一篇: Android和H5交互-框架篇

分享到: 更多
超级大乐透官方软件 极速赛车哪种打法稳赚 飞艇公式稳中 腾讯网游戏 重庆时时彩开奖视频 850通比牛牛怎么赢 贝斯特全球最奢游戏手机app 大乐透技巧 全年无错原创36码论坛 今晚七星彩开奖号码是 优博时时彩平台 pk10官网 冠军单双大小 重庆时时官网开奖结果 重庆时时彩彩龙虎和 网易时时彩 双色球走势图带连线