Android 与 H5 交互基础方法详解,原来交互没有那么难

    H5的页面比较炫酷,然后我们Android就拿h5的页面过来用了,Android中是如何和H5交互的呢,下面给大家介绍一下
1、webView加载页面

我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:

//例如:加载assets文件夹下的test.html页面
mWebView.loadUrl("file:///android_asset/test.html")
//例如:加载网页
mWebView.loadUrl("http://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);
        }
});   

如果安卓调用h5不能触发点击事件(添加这个方法就行了):

mWebView.setWebChromeClient(new WebChromeClient());

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;

    @Override
    protected 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>

有的时候需要监听webview滑动的距离,并对滑动到的距离进行操作,我们就要从这个事件去完成了。
mWebView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        //通过wenview的touch来响应web上的图片点击事件
        float density = getResources().getDisplayMetrics().density; //屏幕密度
        float touchX = event.getX() / density;  //必须除以屏幕密度
        float touchY = event.getY() / density;
        if(event.getAction() == MotionEvent.ACTION_DOWN){
            x[0] = touchX;
            y[0] = touchY;
        }
        if(event.getAction() == MotionEvent.ACTION_UP){
            float dx = Math.abs(touchX- x[0]);
            float dy = Math.abs(touchY- y[0]);
            if(dx<10.0/density&&dy<10.0/density){
                finish();
            }
        }
        return false;
    }
});

功能都介绍过了,剩下的就是是h5页面跳转页面使用的方法,不然直接一跳,这个页面直接就出去了。

public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && wvdetail.canGoBack()) {
            wvdetail.goBack();// 返回前一个页面
            return true;
        }
        wvdetail.loadUrl("javascript:jsLayoutAndroid()");
        return super.onKeyDown(keyCode, event);
    }

最后给大家分享一下,我与h5合作时候遇到的坑:

    1.首先,你要记得,你给h5合作你需要写一个方法,然后写一个方法给h5,而不是你写一个方法就让h5调用,不然h5会一脸懵逼,或者是h5会按照自己的方法,怎么跳都跳不过去,这就搞笑了啊。

    2.你方法写了,基本配置也配置好了,h5也按照你写的方法去执行了,却怎么也掉不起,这个时候你就该看一下,是在一个页面调用吗,如果不是你就需要按自己需求再写一个页面,或者是调用的是一个页面,这样就能正常调起了。

    3,如果是同一个页面,方法配置的什么都对,还是掉不起来,你就让h5查一下,怎么给传过来的网址,加上标签类似的东西,这样就可以掉起了。

(有兴趣的可以关注一下我,谢谢你们,希望能帮助你们)

阅读更多

扫码向博主提问

SUNSHINE_OF_MY

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Android
去开通我的Chat快问
版权声明:未经本人允许,转载需要注明出处 https://blog.csdn.net/nazicsdn/article/details/79952005
个人分类: Android
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭