Java与javascript互调

最近公司项目app为了加快开发效率和图文排版更加合理,部分功能模块采用H5开发,以前其他项目也用过这个混合开发方式,利用Webview加载网页内容。为了方便以后记录项目中所遇到bug进行相关记录,所以对相关内容进行简单使用描述,以便后面项目中遇到相关bug,进行后续追加。
本次主要写的是Java与javascrip方法的互调。(1).H5网页js调用Native方法 (2).Native代码调用js方法

—1. 要使用webview加载网页内容,需要申请网络权限,直接在清单文件中申请相关权限



—2. Webview开启支持javascript

WebSettings webSettings=webView.getSettings();
webSettings.setJavaScriptEnabled(true);           //支持javaScript
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);        //无缓存webSettings.setDomStorageEnabled(true);//支持H5 如果不设置部分url加载会出现空白

—3.准备本地html网页 在src–>main–>assets(自己创建)存放一份简单的wx.html文本,文本内容如下

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    function actionFromNative(){
         document.getElementById("log_msg").innerHTML +=
             "Native调用了js函数";
    }

    function actionFromNativeWithParam(arg){
         document.getElementById("log_msg").innerHTML +=
             ("Native调用了js函数并传递参数:"+arg);
    }

    script>
head>
<body>
<p>WebView与Javascript交互p>
<div>
    <button onClick="window.wx.actionFromJs()">点击调用Native代码button>
div>
<br/>
<div>
    <button onClick="window.wx.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数button>
div>
<br/>
<div id="log_msg">调用打印信息div>
body>
html>

—4.本地native调用js方法,本地调用js代码非常简单,只需要用到Webview.loadUrl()方法即可,Webview.loadUrl(“javascript:调用的js对应的方法”),前缀javascript:是固定的,后面的对应调用的方法即可,有参传入相关参数,无参就不传参数

/**
 * Webview与js交互
 * 本地调用js方法只需要使用loadUrl()方法即可  格式:webView.loadUrl("javascript:js的方法名携带对应参数)
 * js调用本地方法
 *     1.在app端需要暴露一个接口  webView.addJavascripInterface(this,"wx")  其中wx表示别名![这里写图片描述](https://img-blog.csdn.net/20180404103503313?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZWdsZWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
 *     2.写接口里面的方法 在方法上用注解 @JavascriptInterface
 */

public class WebViewActivity extends AppCompatActivity {

    private WebView webView;
    private TextView tvText;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        webView= (WebView) findViewById(R.id.web_view);
        tvText= (TextView) findViewById(R.id.tv_text);
        button= (Button) findViewById(R.id.bt_button);
        WebSettings webSettings=webView.getSettings();
        webSettings.setJavaScriptEnabled(true);//支持javascript
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置不使用缓存
        webSettings.setDomStorageEnabled(true);//设置支持H5,如果不设置部分网页可能会显示空白或者提示错误
        webView.loadUrl("file:///android_asset/wx.html");
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //无参数调用
                webView.loadUrl("javascript:actionFromNative()");
                //有参数调用
                webView.loadUrl("javascript:actionFromNativeWithParam("+"'come from native'"+")");
            }
        });


    }

}

Java与javascript互调_第1张图片
点击底部本地调用js方法,打印信息如上。
到此位置就是native本地代码调用js方法,总结起来很简单,就是利用loadUrl方法传入前缀为javascript:加上后面是js方法名即可,整个是一个url的字符串。

—5.js调用本地方法,js要调用本地native方法,首先本地app端需要在webview上暴露一个js回调接口,其次就是写一个类,类中包含js需要调用的方法即可(方法上需要用@javascriptInterface标注一下)。
具体代码如下:

public class WebViewActivity extends AppCompatActivity {

    private WebView webView;
    private TextView tvText;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        webView = (WebView) findViewById(R.id.web_view);
        tvText = (TextView) findViewById(R.id.tv_text);
        button = (Button) findViewById(R.id.bt_button);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);//支持javascript
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置不使用缓存
        webSettings.setDomStorageEnabled(true);//设置支持H5,如果不设置部分网页可能会显示空白或者提示错误
        webView.addJavascriptInterface(new ShowToast(), "wx");//---------------------添加javascript接口回调
        webView.loadUrl("file:///android_asset/wx.html");
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //无参数调用
                webView.loadUrl("javascript:actionFromNative()");
                //有参数调用
                webView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from native'" + ")");
            }
        });


    }

    /**
     * 注意被js调用的方法一定要用  @JavascriptInterface进行注解
     */
    public class ShowToast{
        //Html调用此方法传递数据,注解一定要留着否则会出错
        @android.webkit.JavascriptInterface  //为了兼容4.2一下系统  4.2以上可以直接用 @JavascriptInterface
        public void actionFromJs() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(WebViewActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
                }
            });


        }

        @android.webkit.JavascriptInterface  //为了兼容4.2一下系统  4.2以上可以直接用 @JavascriptInterface
        public void actionFromJsWithParam(final String str) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {

                  Toast.makeText(WebViewActivity.this, "js调用了Native函数传递参数:" + str, Toast.LENGTH_SHORT).show();
                }
            });


        }
    }

}

运行结果显示,Toast的确显示js调用本地代码成功。
Java与javascript互调_第2张图片
最后附上一个连接:最全Webview功能讲解

你可能感兴趣的:(混合开发)