android webview调用js(vue)问题记录

这几天和别人对接移动端，安卓平台，我们这边输出vue界面，安卓方反馈轮询的时候调用不到，具体原因也定位不到，只能确定前端这边没几句代码，应该没有问题，因此决定自己下载个android studio写个例子，其实以前也做过java和android开发，并不陌生。

网上很多帖子只给出了最基础的例子，我们这边的需求是android端需要轮询调用js方法，因此启动了一个定时器，下面上代码。

android代码:

package com.example.testcallvue2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import java.io.IOException;
import java.util.Timer;
import java.util.TimerTask;
import java.util.concurrent.atomic.AtomicBoolean;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获得控件
        WebView webView = (WebView) findViewById(R.id.wv_webview);
        WebSettings webSettings = webView.getSettings();

        //设置支持js
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        //设置适应屏幕
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
        webSettings.setPluginState(WebSettings.PluginState.ON);//设置是否支持插件
        webSettings.setSupportZoom(true); //支持缩放
        webSettings.setBuiltInZoomControls(true);
        webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
        //设置存储模式
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        webSettings.setAllowFileAccess(true);
        //setDomStorageEnabled解决了webview白屏问题  设置支持DomStorage
        webSettings.setDomStorageEnabled(true);
        //设置支持本地存储
        webSettings.setDatabaseEnabled(true);
        //设置缓存
//        webSettings.setAppCacheEnabled(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");

        System.out.println("WebView初始化...");

        //用这个方法判断是否加载完成，不过会触发多次，就是会出现多次newProgress==100的情况
        webView.setWebChromeClient(new WebChromeClient() {

            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                if (newProgress == 100) {
                    System.out.println("WebView加载完成...");
                    Timer timer = new Timer();
                    TimerTask task = new TimerTask() {
                        @Override
                        public void run() {
                            try {
                                webView.post(new Runnable() {
                                    @Override
                                    public void run() {
                                        webView.evaluateJavascript("javascript:manualCtrl()", new ValueCallback<String>() {
                                            @Override
                                            public void onReceiveValue(String value) {
                                                //此处为 js 返回的结果
                                                System.out.println(value);
                                            }
                                        });
                                    }
                                });
                            } catch (Exception e) {
                                throw new RuntimeException(e);
                            }
                        }
                    };
                    timer.schedule(task,10 * 1000,5 * 1000);
                }
            }
        });

        //访问网页
//        webView.loadUrl("http://www.baidu.com");
        webView.loadUrl( "file:///android_asset/index2.html");
        //系统默认会通过手机浏览器打开网页，为了能够直接通过WebView显示网页，则必须设置
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //使用WebView加载显示url
                view.loadUrl(url);
                //返回true
                return true;
            }
        });
    }
}

关键代码就在于这一部分：

 在webview加载完成之后启动Timer，然后webView.post里面去调用js方法，接收返回值。

 

js（vue）端代码：

如果是传统js开发：

<html>
<body onload="document.getElementById('ddd').innerHTML = a;">
<div>
    <div id="ddd" style="font-size: 5rem; color: red;"></div>
    <button style="width:200px;height:200px;font-size: 5rem;" onclick="testClick()">TEST</button>
</div>
<script>
    setTimeout(() => {
        console.log(manualCtrl())
    }, 5000)

    //setInterval(() => {
    //  document.getElementById('ddd').innerHTML = Math.random()
    //}, 1000)

   var a = 1;

   function testClick() {
    a = 2;
    document.getElementById('ddd').innerHTML = a;
   }

   function manualCtrl() {
    return a;
   }
</script>
</body>
</html>

如果是vue开发：

mounted() {
    window.manualCtrl = this.manualCtrl
  } ,
methods: {
    manualCtrl(info) {
    //info from android
    //do something...
    return Math.random()
    }  
}