Android 与 H5-JS 简易交互

最新推荐文章于 2021-06-05 03:01:05 发布

wabil

最新推荐文章于 2021-06-05 03:01:05 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/wabil/article/details/62055017

本文介绍如何在Android应用中通过WebView加载本地HTML文件，并实现JavaScript与原生应用之间的双向通信。包括WebView设置、添加JavaScript接口及监听按钮点击触发Web端函数。

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

安卓端主程序,布局文件中加一个按钮和WebView控件,结果在logcat中查看

public class MainActivity extends Activity {


    WebView mWebView;

    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        //必要按钮布局,webView绑定
       Button mBtn = (Button) findViewById(R.id.btn_1);        
        mWebView= (WebView) findViewById(R.id.wv_view);

        mWebView.getSettings().setJavaScriptEnabled(true);        
        mWebView.addJavascriptInterface( new WebAPPInterface(), "app_api");//Web中的接口对象               
        mWebView.loadUrl("file:///android_asset/test.html");

        mBtn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                //原生app调用 web里面的函数
                mWebView.loadUrl("javascript:func_in_js()");              
            }
        });



    }///end onCreate(...)

    public class WebAPPInterface {

        public WebAPPInterface() {
            // TODO Auto-generated constructor stub
        }

        @JavascriptInterface //sdk17版本以上加上注解  
        public void traceTxt(String txt){
              //这种函数提供给 Web控制App行为使用
            Log.i("_Trace_","Android_String="+txt);
        }

   }  

}

H5文件放在安卓项目文件夹assets路径下,文件名给为test.html ,JS中的代码:

<!DOCTYPE html>
<html>
<head>
    <meta chatset="utf-8" />
    <title>This is a test</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        display: block;
        width: 100px;
        padding: 1em;
        margin: 0 auto;
        font-size: 1em;
        color: #FFF2233;
        background-color: highlight;
        text-decoration: none;
    }
    </style>
</head>

<body>
    <a>js中调用本地方法</a>
    <script>
    var hh=1;
    function func_in_js(){
        hh++;
        document.getElementById("helloweb").innerHTML="Click_Time="+hh;
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //调用android本地方法     
         hh++;
         app_api.traceTxt("Number->"+hh);
         //调用此方法后,在android的logcat中应该会看到输出效果
        return false;
    }, false);
    </script>
    <p></p>
    <div id="helloweb"> 

    </div>
</body>
</html>