Android的webView应用与js互调app混合开发用例

android5.1.1 和 android7都测试过，都是正常使用的

android原生与html交互可以实现APP混合开发

WebView 底层还是调用的WebKit

AndroidManifest.xml 记得要配置上网权限

主要代码文件:

WebViewAction.java

package com.example.a20200712;import android.content.DialogInterface;import android.os.Bundle;import android.text.TextUtils;import android.text.format.DateUtils;import android.util.Log;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.JsResult;import android.webkit.ValueCallback;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.EditText;import androidx.annotation.Nullable;import androidx.appcompat.app.AlertDialog;import androidx.appcompat.app.AppCompatActivity;import java.text.SimpleDateFormat;import java.util.Date;public class WebViewAction extends AppCompatActivity {    private WebView layout_webview_content;    private EditText layout_webview_url;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.web_view_layout);        layout_webview_url = findViewById(R.id.layout_webview_url);        layout_webview_content = findViewById(R.id.layout_webview_content);        WebSettings webSettings = layout_webview_content.getSettings();        // 设置与Js交互的权限        webSettings.setJavaScriptEnabled(true);        // 设置允许JS弹窗        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);        // 由于设置了弹窗检验调用结果,所以需要支持js对话框        // webview只是载体，内容的渲染需要使用webviewChromClient类去实现        // 通过设置WebChromeClient对象处理JavaScript的对话框        //设置响应js 的Alert()函数        layout_webview_content.setWebChromeClient(new WebChromeClient() {            @Override            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {                AlertDialog.Builder b = new AlertDialog.Builder(WebViewAction.this);                b.setTitle("Alert");                b.setMessage(message);                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialog, int which) {                        result.confirm();                    }                });                b.setCancelable(false);                b.create().show();                return true;            }        });        // 通过addJavascriptInterface()将Java对象映射到JS对象        //参数1：Javascript对象名 this  === new WebViewAction();        //参数2：Java对象名        layout_webview_content.addJavascriptInterface(this, "webViewAction");//AndroidtoJS类对象映射到js的test对象    }    /**     * 供js调用客户端 入参 和返回值，只能是字符串类型     *     * @param a     * @param b     * @return     */    @JavascriptInterface    public String calc(String a, String b) {        Integer ret = (Integer.valueOf(a) + Integer.valueOf(b));        Log.i("mw", "android方法被调用了，a:" + a + ",b:" + b + ",请算结果:" + ret);        return a == null || b == null ? "-1" : String.valueOf(ret);    }    public void toUrl(View view) {        //设置URL 资源路径        layout_webview_content.loadUrl(layout_webview_url.getText().toString());        //在APP应用内打开WebView        layout_webview_content.setWebViewClient(new WebViewClient());    }    /**     * 关闭JS调用android方法     *     * @param view     */    public void closeJSInvokeAndroid(View view) {        layout_webview_content.removeJavascriptInterface("webViewAction");    }    public void invokeJS(View view) {        // 通过Handler发送消息        layout_webview_content.post(new Runnable() {            @Override            public void run() {                Date currentTime = new Date();                SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");                String dateString = formatter.format(currentTime);                String jsParam = "当前时间:" + dateString;                // 注意调用的JS方法名要对应上                // 调用javascript的callJS()方法                //1、这种调用方式无返回值可用 ，看起来简洁  支持Android 4.4以下版本                //layout_webview_content.loadUrl("javascript:callJS('"+jsParam+"')");                //2、这种调用方式可接收返回值，效率还高于1  只支持Android 4.4以上方法                layout_webview_content.evaluateJavascript("javascript:callJS('" + jsParam + "')", new ValueCallback() {                    @Override                    public void onReceiveValue(String value) {                        //此处为 js 返回的结果                        Log.i("mw", "js返回值:" + value);                    }                });            }        });    }    /**     * 重写back按扭，如果可以返回上一级 并且上一级有页面     */    @Override    public void onBackPressed() {        //如果webView可以返回上一级        if (layout_webview_content.canGoBack()) {            layout_webview_content.goBack();        } else {            super.onBackPressed();        }    }}

web_view_layout.xml

<?xml version="1.0" encoding="utf-8"?>

webView.html

Android与js互调案例你好

Android的webView应用与js互调app混合开发用例_第1张图片

http://www.mwview.com/v/c/r/html/demo_android_webView

Android的webView应用与js互调app混合开发用例_第2张图片

你好

更多相关文章

随机推荐