h5混合开发之Js和android简单交互

最新推荐文章于 2024-09-18 20:09:32 发布

原创最新推荐文章于 2024-09-18 20:09:32 发布 · 737 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #h5混合开发 js和app交互

本文通过一个具体的案例，介绍了H5页面与原生App之间的交互方式，包括JS调用Android方法、Android调用JS函数等。解决了WebView线程同步问题，并展示了如何实现消息传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以后可能会用h5混合开发，所以趁着没事了解了下,把自己的见解以及遇到的问题记录下来。

先去网上找个demo跟着敲了下，主要学习如何交互，遇到一个问题，回调webview.getUrl()方法报了一个异常，要求所有的webview的方法运行在一个线程中，从网上找到了解决的方法。下面贴上代码，主要部分都有注释！

1.index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript">
        function showToast(toast) {
            javascript:control.showToast(toast);
        }
        function log(msg){
           var d= document.getElementById("d");
           d.innerHTML=msg;
        }
        function share() {
            javascript:control.share();
        }
    </script>
</head>
<body>
<input type="button" value="toast"
       onClick="showToast('来自Js')"/>

<div id="d">我是div</div>

<input type="button" value="share"
       onClick="share()"/>
</body>
</html>

2.MainActivity.java

package com.clem.h5demo;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.web_view);
        //解决点击链接跳转浏览器问题
        webView.setWebViewClient(new WebViewClient());
        //js支持
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        //允许访问assets目录
        settings.setAllowFileAccess(true);
        //assets文件路径
        String path = "file:///android_asset/index.html";
        //注入自己写的交互接口,并且一个名字
        webView.addJavascriptInterface(new JsInterface(), "control");
        //加载Html页面
        webView.loadUrl(path);
    }

    /*
    点击返回上一个页面,而不是退出整个Activity
    相当于后退操作的网页,而不是app
     */
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }

    /*
     自定义Js和Android交互接口
     */
    public class JsInterface {
        /*
        js调用的方法
        */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
            log("来自app");
        }

        /*
        向js输出信息的方法
         */
        public void log(final String msg) {
            webView.postDelayed(new Runnable() {
                @Override
                public void run() {
                    webView.loadUrl("javascript: log(" + "'" + msg + "'" + ")");
                }
            }, 3000);
        }

        /*
        警告：所有的WebView方法必须调用在同一线程
        使用webView.post(new Runnable()）
         */
        @JavascriptInterface
        public void share() {
            // 如果在这个地方调用webview的方法就会报一个异常：要求webview的方法运行在同一个线程中
            //结果 com.clem.h5demo E/当前线程: :11266
            Log.e("当前线程", ":" + Thread.currentThread().getId());
            webView.post(new Runnable() {
                @Override
                public void run() {
                    //com.clem.h5demo E/主线程: :1
                    Log.e("主线程", ":" + Thread.currentThread().getId());
                    String url = webView.getUrl();
                    defaultShare(url);
                }
            });
            /*//因为在主线程用的webview，所以也可以用下面这种方法
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    String url = webView.getUrl();
                    defaultShare(url);
                }
            });*/
        }
    }

    /*
    工具：启用系统默认分享
    */
    private void defaultShare(String url) {
        Intent intent = new Intent(Intent.ACTION_SEND);
        intent.setType("text/plain"); //
        intent.putExtra(Intent.EXTRA_SUBJECT, "标题");
        intent.putExtra(Intent.EXTRA_TEXT, "你懂的" + url);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        startActivity(Intent.createChooser(intent, "不知道"));
    }

}