Android混合开发快速上手掌握

最新推荐文章于 2024-06-25 02:24:41 发布

许进进

最新推荐文章于 2024-06-25 02:24:41 发布

阅读量5.5k

点赞数

分类专栏： Android 文章标签： Android 混合开发 JS H5移动开发

本文链接：https://blog.csdn.net/lucasxu01/article/details/100803098

版权

Android 专栏收录该内容

99 篇文章 5 订阅

订阅专栏

2.4 Js调用Android方法和传参数

三常用的几个方法和注意点

3.1 WebViewClient中的shouldOverrideUrlLoading拦截url

3.2 WebViewClient中的onPageStarted

3.3 WebViewClient中的onPageFinished

3.4 webview的evaluateJavascript方法

先上效果图：

源码地址：https://github.com/LucasXu01/Autils

一混合开发简介

原生app ：java/kotlin 纯原生写出的app；

web app：web写出的app；

hybird app：原生+web（通过webview）写出的app；

当然，现在也有很多第三方混合开发框架以及简便的js桥，但是作为最基础的webview，掌握js/android的互调等相关知识是非常必要的。

二 Android-Js互调

2.1 准备自己的html文件

安卓和html中js的互调，一是要有安卓代码，二肯定需要html网页。工程中，网页都是放在服务器，方便随时更改，用户无需再次更新自己的app，已达到hybrid开发的目的，实例方便起见，将html文件放在了本地。

首先，在自己安卓项目中的app目录下新建assets文件夹（若没有）：

接着，在assets文件夹下新建自己的html文件，代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" charset="GB2312"/>

        <script type="text/javascript">
            function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

            function javacalljswith(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }

        </script>

    </head>

    <body>
        <h3 align="center">Web模块</h3>

        <h3 id="showmsg" align="center">调用js显示结果</h3>

        <div style="text-align:center; vertical-align:middle;">
            <input  type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
        </div>

        <br>

        <br>

        <div style="text-align:center; vertical-align:middle;">
        <input  type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
        </div>

    </body>
</html>

2.2 WebView控件的准备设置

在自己的activity活动中获得webview控件后，需要进行以下设置：

WebSettings webSettings = webview.getSettings();
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");

webSettings.setJavaScriptEnabled(true) 表示让WebView支持调用Js；
webview.loadUrl("file:///android_asset/html.html") 表示加载assets文件下的html.html文件（因为没有网络地址所以加载的本地文件）
webview.addJavascriptInterface(MainActivity.this,"android") 给webview添加Js调用接口，第一个参数为类对象，第二个参数为自定义别名，Js通过这个别名来调用Java的方法，我这里自定义为android。
html中用到：<input type="button" value="Js调用Java代码" οnclick="window.android.jsCallAndroid()"/>

2.3 Android调用Js代码

在android代码中（如按钮点击事件中），通过webview这个中介调用loadUrl来执行html代码中的Js代码：

 tvJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });

下为html中要被安卓调用的js函数代码，函数意图为：向id为showmsg的h3大小标题中写入字符串“JAVA调用了JS的无参函数”。

function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

在上述基础上，若要在Android调用Js函数时传参数，只需要在loadUrl方法中进行字符串的拼接，将参数以字符串形式拼接进去即可。

webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");

2.4 Js调用Android方法和传参数

点击html按钮，通过οnclick="window.android.jsCallAndroid()事件，通过android别名调用Java文件的jsCallAndroid()方法。曾经Js可直接调用Java代码窃取App信息，为安全起见，在Android4.4以上并且必须加入@JavascriptInterface才有响应。

@JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }

    @JavascriptInterface
    public void jsCallAndroidArgs(String args){
        tvShowmsg.setText(args);
    }

所有的activity代码如下：

package com.lucas.autils.autils;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

/**
 * 原生webview  js与安卓互调
 * @author lucas
 * created at 2019/9/12 12:23 PM
 */
public class JsJavaActivity extends Activity {

    private WebView webview;
    private TextView tvJs;
    private TextView tvJsArgs;
    private TextView tvShowmsg;



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

        setWebview();
        initView();
    }


    private void initView() {
        tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
        tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);
        tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);

        tvJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });

        tvJsArgs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
            }
        });
    }


    private void setWebview() {
        webview = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webview.getSettings();
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);
        //与js交互必须设置
        webSettings.setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/html.html");
        webview.addJavascriptInterface(JsJavaActivity.this,"android");
    }



    @JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }

    @JavascriptInterface
    public void jsCallAndroidArgs(String args){
        tvShowmsg.setText(args);
    }

}

三常用的几个方法和注意点

3.1 WebViewClient中的shouldOverrideUrlLoading拦截url

安卓webview中setWebViewClient方法中需要一个WebViewClient对象，而WebViewClient中有个方法为shouldOverrideUrlLoading，通过此方法可以进行我们需要跳转的url地址的拦截，并根据我们需要进行自定义化的一些操作，解析url做相应的事情。

3.2 WebViewClient中的onPageStarted

onPageStarted会在webview加载相应的url开始之前进行调用，常用来处理需要在加载相应url之前的一些操作。

3.3 WebViewClient中的onPageFinished

onPageStarted会在webview加载相应的url结束之后进行调用，常用来处理需要在加载相应url之后的一些操作，比如加载后更加网页标题填充原生页面最上方的活动标题。

3.4 webview的evaluateJavascript方法

该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。此Android 4.4 后才可使用。

//拦截url
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.indexOf("jump")>-1){
                    Toast.makeText(JsJavaActivity.this,"拦截到了相应url",Toast.LENGTH_LONG).show();
                    return true;
                }else if (url.startsWith("http")){
                    view.loadUrl(url);
                    return true;
                }
                return false;
            }


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



            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // 加载结束

                //因为该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。
                //Android 4.4 后才可使用
                webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //此处为 js 返回的结果
                        Log.v("Native",value);
                    }
                });


            }

        });