Android Hybrid混合开发(Webview+JSBridge)简介

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

爱乐写代码

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

阅读量6.1k

点赞数

分类专栏： android基础文章标签： android 框架 webview jsbridge 开源框架

本文链接：https://blog.csdn.net/ware00/article/details/71308285

版权

android基础专栏收录该内容

76 篇文章 1 订阅

订阅专栏

导论:
WebView是一个基于webkit引擎、展现web页面的android控件,由于H5的快速发展,现在Hybrid混合开发已经成为中庸选择.本篇主要介绍webview及开源框架JSBridge.

以下是基础知识,附上交互的开发总结:
Android Hybrid混合开发总结

原生Webview知识:

1:注册相关权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

2:webview常见方法

goBack() //后退 
goForward() //前进 
goBackOrForward(intsteps) //以当前的index为起始点前进或者后退到历史记录中指定的steps，如果steps为负数则为后退，正数则为前进 
canGoForward() //是否可以前进 
canGoBack() //是否可以后退

//清除缓存 
clearCache(true) //清除网页访问留下的缓存，由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序. 
clearHistory() //清除当前webview访问的历史记录，只会webview访问历史记录里的所有记录除了当前访问记录. 
clearFormData() //清除自动完成填充的表单数据，不会清除WebView存储到本地的数据。

//状态 
onResume() //激活WebView为活跃状态，能正常执行网页的响应 
onPause() //WebView处于暂停状态，onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。 
pauseTimers() //暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。 
resumeTimers() //恢复pauseTimers时的动作。 
destroy() //销毁，关闭了Activity时，音乐或视频，还在播放。就必须销毁。

//重新加载网页 
reload()

//加载本地资源
webView.loadUrl("file:///android_asset/example.html");

//加载网络资源
webView.loadUrl("www.xxx.com/index.html");

//加载手机本地的一个html页面的方法 
webView.loadUrl(“content://com.android.htmlfileprovider/sdcard/test.html”); 

//可以加载html片段
String data = " Html 数据";
webView.loadDataWithBaseURL(null,data, "text/html", "utf-8",null);

//关闭硬件加速
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

//判断WebView滚动到顶端还是低端
// 已经处于底端
if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) {
}
// 处于顶端
if(webView.getScrollY() == 0){
}

//设置手机返回按键监听
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    finish();
    return super.onKeyDown(keyCode, event);


//Activity退出销毁WebView 
protected void onDestroy() {
    if (webView != null) {
        webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
        webView.clearHistory();

        ((ViewGroup) webView.getParent()).removeView(webView);
        webView.destroy();
        webView = null;
    }
    super.onDestroy();
}

3:WebSettings --webview常规设置

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);//设置支持JavaScript
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
webSettings.setTextSize(TextSize.SMALLER);//设定字体大小：
webSettings.setPluginsEnabled(true); //支持插件
webSettings.setSupportZoom(true);  //支持缩放
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
webSettings.supportMultipleWindows();  //多窗口
webSettings.setAllowFileAccess(true);  //设置可以访问文件
webSettings.setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点
webSettings.setBuiltInZoomControls(true); //是否支持内置按钮缩放和手势“捏”缩放，如果设为false则webview不支持缩放功
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
webSettings.setLoadsImagesAutomatically(true);  //支持自动加载图片
webSettings.setDisplayZoomControls(false);      //是否隐藏原生的缩放控件
webSettings.setDomStorageEnabled(true);//开启 DOM storage API 功能
webSettings.setDatabaseEnabled(true);//开启 database storage API 功能
webSettings.setAppCacheEnabled(true); //开启 Application Caches 功能


String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
webSettings.setAppCachePath(cacheDirPath); //设置  Application Caches 缓存目录

WebView屏幕自适应
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);

缓存设置
if (NetStatusUtil.isConnected(getApplicationContext())) {
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//有网，根据cache-control决定是否从网络上取数据。
} else {
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //没网，则从本地获取，即离线加载
}
String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
webSettings.setAppCachePath(appCachePath);//设置缓存数据目录

4:WebViewClient–处理各种通知、请求事件

WebViewClient webViewClient = new WebViewClient(){

    //超链接加载,打开网页时不调用系统浏览器，而是在本WebView中显示。也可捕获超链接url,做相关操作
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;    //返回true表示在当前浏览器中加载
    }

    //网页开始加载
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    //网页加载结束
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }

    //网页加载失败
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
    }

    //对Https的支持
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();
    }

    //针对页面中每一个资源都会调用一次，用于捕获页面资源
    public void onLoadResource(WebView view, String url) {
        super.onLoadResource(view, url);
    }
};
webView.setWebViewClient(webViewClient);

5:WebChromeClient–处理Javascript的对话框，网站图标，网站title，加载进度等

WebChromeClient webChromeClient = new WebChromeClient(){
    //获取网页加载进度
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress < 100) {
            String progress = newProgress + "%";
        } else {
        }
        super.onProgressChanged(view, newProgress);
    }

    //获取标题
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        titleview.setText(title)；
    }

    //获取标题ICON
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

    //警告框
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        if(message!=null){
            //TODO
            //捕获网页中弹框信息
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
        }
        result.cancel();   //
        return true;       //表示确认进行捕获
    }

    //确认框，通过这个值可判断点击时是确定还是取消，确定为true，取消为false
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        return super.onJsConfirm(view, url, message, result);
    }

    //输入框，会返回输入框中的值，点击取消返回null
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
    //定位
    public void onGeolocationPermissionsHidePrompt() {
        super.onGeolocationPermissionsHidePrompt();
    }
    //定位
    public void onGeolocationPermissionsShowPrompt(final String origin, final GeolocationPermissions.Callback callback) {
        callback.invoke(origin, true, false);  //注意个函数，第二个参数就是是否同意定位权限，第三个是是否希望内核记住
        super.onGeolocationPermissionsShowPrompt(origin, callback);
    }

    //WebSettings要支持多窗口
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(webView);
        resultMsg.sendToTarget();
        return true;
    }

    public void onCloseWindow(WebView window) {
        super.onCloseWindow(window);
    }
};

webView.setWebChromeClient(webChromeClient);

6:支持文件下载

DownloadListener downloadListener = new DownloadListener() {
    public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
        Uri uri = Uri.parse(url);
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        startActivity(intent);
    }
};

webView.setDownloadListener(downloadListener);

JSBridge框架简介:
JS和native通信的桥梁,是一个很好的开源框架,用它比原生函数调用方便和安全很多,更低的开发成本, 这是链接:
https://github.com/lzyzsd/JsBridge
1:添加依赖

dependencies {
    implementation 'com.github.lzyzsd:jsbridge:1.0.4'
}

2:在activity_main.xml使用BridgeWebView代替原生webview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/name"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/edit_bg"
        android:text="android shoot" />

    <EditText
        android:id="@+id/age"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/edit_bg"
        android:text="150" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="AndroidtoJS" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:textColor="#000000"
        android:textSize="14sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent" />

    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_marginTop="10dp" />

</LinearLayout>

3:android_asset中放入一个test.html

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        js调用java
    </title>
</head>
<body>
<p>
<div id="init">
</div>
</p>
<p>
    <input type="text" id="text1" value="aaaaa"/>
</p>
<p>
    <input type="text" id="text2" value="11111"/>
</p>
<p>
    <input type="button" id="enter1" value="JsToAndroid" onclick="jsClick();"
    />
</p>
<p>
    <xmp id="show">
    </xmp>
</p>
</body>
<script>

       //JsToAndroid监听事件
        function jsClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            var data = "name=" + str1 + ",pass=" + str2;
            window.WebViewJavascriptBridge.callHandler(
                'JsToAndroid'
                , {'Data': data}
                , function(responseData) {
                document.getElementById("show").innerHTML = (responseData);
                }
            );
        }

         function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                var data = {
                    'json': 'JS返回任意数据!'
                };
                document.getElementById("init").innerHTML = "data = " + message;
                responseCallback(data);
            });


            //接收Android端发来的数据并回传数据
            bridge.registerHandler("AndroidToJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("接收Android端数据:" + data);

                responseCallback("JS回传数据:jsjsjsjsjss");
            });
        })
</script>
</html>

4:MainActivity类

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private BridgeWebView bridgeWebView;
    private TextView textView;
    private EditText name;
    private EditText age;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        findViewById(R.id.button).setOnClickListener(this);
        bridgeWebView = findViewById(R.id.webView);
        textView = findViewById(R.id.textView);
        name = findViewById(R.id.name);
        age = findViewById(R.id.age);

        bridgeWebView.setWebChromeClient(new WebChromeClient() {
            @SuppressWarnings("unused")
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String AcceptType, String capture) {
                this.openFileChooser(uploadMsg);
            }

            @SuppressWarnings("unused")
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String AcceptType) {
                this.openFileChooser(uploadMsg);
            }

            public void openFileChooser(ValueCallback<Uri> uploadMsg) {

            }
        });

        bridgeWebView.loadUrl("file:///android_asset/test.html");

        //接收JS端的数据并回传数据
        bridgeWebView.registerHandler("JsToAndroid", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                textView.setText("接收JS端数据:" + data);

                function.onCallBack("Android回传数据:nndroid");
            }
        });
    }

    //AndroidtoJS监听事件
    @Override
    public void onClick(View v) {
        User user = new User(name.getText().toString().trim(), age.getText().toString().trim());
        bridgeWebView.callHandler("AndroidToJs", new Gson().toJson(user), new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                textView.setText(data);
            }
        });
    }
}

5:Android和JS传递数据
callHandler—>registerHandler

JS--->Android
JS端:
function jsClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            var data = "name=" + str1 + ",pass=" + str2;
            window.WebViewJavascriptBridge.callHandler(
                'JsToAndroid'
                , {'Data': data}
                , function(responseData) {
                document.getElementById("show").innerHTML = (responseData);
                }
            );
        }
Android端:
//接收JS端的数据并回传数据
        bridgeWebView.registerHandler("JsToAndroid", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                textView.setText("接收JS端数据:" + data);

                function.onCallBack("Android回传数据:nndroid");
            }
        });

Android--->JS
Android端:
User user = new User(name.getText().toString().trim(), age.getText().toString().trim());
        bridgeWebView.callHandler("AndroidToJs", new Gson().toJson(user), new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                textView.setText(data);
            }
        });
JS端:
function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                var data = {
                    'json': 'JS返回任意数据!'
                };
                document.getElementById("init").innerHTML = "data = " + message;
                responseCallback(data);
            });


            //接收Android端发来的数据并回传数据
            bridge.registerHandler("AndroidToJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("接收Android端数据:" + data);

                responseCallback("JS回传数据:jsjsjsjsjss");
            });

好了,结束.