Android 与 js 相互调用

喜欢ヅ旅行 2021-09-27 08:40 366阅读 0赞

**本文章实现 Android webview加载 网页时 将数据传递给网页，同时，网页js 触发Android原生方法并且传递数据。**

如有侵权，请联系作者删除。

代码下载地址: [https://github.com/app-demo/AndroidHtml.git][https_github.com_app-demo_AndroidHtml.git]

HTML代码如下：

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>JS和Android交互</title>
    
            // 样式
            <style>
                button {
                        height: 36px;
                        width: 100%;
                        background: #98bf21;
                }
            </style>
        </head>
    
        <body>
            <p>JS和Android交互</p>
    
            <button onclick="invokeAppMethod()">JS调用App方法(不带参数)</button>
            <br/>
            <br/>
            <button onclick="sendInfoToJava()">JS调用App方法(带参数)</button>
    
            <script>
                // 发送消息到Android客户端
                function sendInfoToJava() {
                    //调用android程序中的方法，并传递参数
                    var name = '我是JS';
                    window.AndroidWebView.showInfoFromJs(name);
                }
    
                // 直接调用Android客户端中的showInfoFromJs方法
                function invokeAppMethod() {
                    window.AndroidWebView.showInfoFromJs();
                }
    
    
                //在Android代码中调用此方法
                function showInfoFromApp(msg) {
                    alert("来自App的信息：" + msg);
                }
    
                //在Android代码中调用此方法,不传递信息
                function showInfoFromApp() {
                    alert("通过App调用JS");
                }
            </script>
        </body>
    
    </html>

Android webview 部分主要代码如下：

/**
     * js与Android互调，交互
     */
    public class AndroidJsActivity extends AppCompatActivity {
        private WebView webView;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_android_js);
            webView = (WebView) findViewById(R.id.webView);
    
            webView.setVerticalScrollbarOverlay(true);
            //设置WebView支持JavaScript
            webView.getSettings().setJavaScriptEnabled(true);
    
            // 加载本地网页
            webView.loadUrl("file:///android_asset/index_js.html");
    
            //在js中调用本地java方法
            webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
    
            //添加客户端支持
            webView.setWebChromeClient(new WebChromeClient());
    
            //设置监听
            onInvokeJs();
            onInvokeJs2();
        }
    
        /**
         * App调用JS代码
         */
        private void onInvokeJs() {
            findViewById(R.id.btn_invoke_js).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
                    //调用js中的函数：showInfoFromApp(msg)
                    webView.loadUrl("javascript:showInfoFromApp('" + msg + "')");
                }
            });
        }
    
        /**
         * App调用JS代码
         */
        private void onInvokeJs2() {
            findViewById(R.id.btn_invoke_js2).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //调用js中的函数：showInfoFromApp()
                    webView.loadUrl("javascript:showInfoFromApp()");
                }
            });
        }
    
    }

JsInterface类（js 调用安卓原生方法主要部分）

class JsInterface {
        private Context mContext;
    
        public JsInterface(Context context) {
            this.mContext = context;
        }
    
        /**
         * 在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
         * 此方法名称一定要和js中showInfoFromJava方法一样
         *
         * @param name
         */
        @JavascriptInterface
        public void showInfoFromJs(String name) {
            Toast.makeText(mContext, "来自js的信息:" + name, Toast.LENGTH_SHORT).show();
        }
    
        @JavascriptInterface
        public void showInfoFromJs(){
            Toast.makeText(mContext, "JS调用App方法", Toast.LENGTH_SHORT).show();
        }
    }

1.  Android调用JS   
    通过Android代码中`webView.loadUrl("javascript:showInfoFromApp()");`中`javascript:showInfoFromApp()`与js中的`function showInfoFromApp()`方法名称一致，必须相同名称；同理有参数的调用的是`function showInfoFromApp(msg)`
2.  JS调用Android   
    通过JS中`window.AndroidWebView`关联到Android中`WebView`的name是`AndroidWebView`,Android端`webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");`方法关联到JS，这样JS就可以通过`window.AndroidWebView.showInfoFromJs()`中关联到Android中`JsInterface#showInfoFromJs()`
3.  两者互调主要是名称要一致，否则无法关联上去。
4.  文章参考：[https://blog.csdn.net/fenggit/article/details/51028300][https_blog.csdn.net_fenggit_article_details_51028300]

[https_github.com_app-demo_AndroidHtml.git]: https://github.com/app-demo/AndroidHtml.git
[https_blog.csdn.net_fenggit_article_details_51028300]: https://blog.csdn.net/fenggit/article/details/51028300