android webview调用js(vue)问题记录
阅读原文时间:2023年08月30日阅读:3

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

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

android代码:

1 package com.example.testcallvue2;
2
3 import androidx.appcompat.app.AppCompatActivity;
4
5 import android.os.Bundle;
6 import android.webkit.ValueCallback;
7 import android.webkit.WebChromeClient;
8 import android.webkit.WebSettings;
9 import android.webkit.WebView;
10 import android.webkit.WebViewClient;
11
12 import java.io.IOException;
13 import java.util.Timer;
14 import java.util.TimerTask;
15 import java.util.concurrent.atomic.AtomicBoolean;
16
17 public class MainActivity extends AppCompatActivity {
18
19 @Override
20 protected void onCreate(Bundle savedInstanceState) {
21 super.onCreate(savedInstanceState);
22 setContentView(R.layout.activity_main);
23 //获得控件
24 WebView webView = (WebView) findViewById(R.id.wv_webview);
25 WebSettings webSettings = webView.getSettings();
26
27 //设置支持js
28 webSettings.setJavaScriptEnabled(true);
29 // 设置允许JS弹窗
30 webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
31 //设置适应屏幕
32 webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
33 webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
34 webSettings.setPluginState(WebSettings.PluginState.ON);//设置是否支持插件
35 webSettings.setSupportZoom(true); //支持缩放
36 webSettings.setBuiltInZoomControls(true);
37 webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
38 //设置存储模式
39 webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
40 webSettings.setAllowFileAccess(true);
41 //setDomStorageEnabled解决了webview白屏问题 设置支持DomStorage
42 webSettings.setDomStorageEnabled(true);
43 //设置支持本地存储
44 webSettings.setDatabaseEnabled(true);
45 //设置缓存
46 // webSettings.setAppCacheEnabled(true);
47 webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
48 webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
49 webSettings.setDefaultTextEncodingName("utf-8");
50
51 System.out.println("WebView初始化…");
52
53 //用这个方法判断是否加载完成,不过会触发多次,就是会出现多次newProgress==100的情况
54 webView.setWebChromeClient(new WebChromeClient() {
55
56 @Override
57 public void onProgressChanged(WebView view, int newProgress) {
58 super.onProgressChanged(view, newProgress);
59 if (newProgress == 100) {
60 System.out.println("WebView加载完成…");
61 Timer timer = new Timer();
62 TimerTask task = new TimerTask() {
63 @Override
64 public void run() {
65 try {
66 webView.post(new Runnable() {
67 @Override
68 public void run() {
69 webView.evaluateJavascript("javascript:manualCtrl()", new ValueCallback() {
70 @Override
71 public void onReceiveValue(String value) {
72 //此处为 js 返回的结果
73 System.out.println(value);
74 }
75 });
76 }
77 });
78 } catch (Exception e) {
79 throw new RuntimeException(e);
80 }
81 }
82 };
83 timer.schedule(task,10 * 1000,5 * 1000);
84 }
85 }
86 });
87
88 //访问网页
89 // webView.loadUrl("http://www.baidu.com");
90 webView.loadUrl( "file:///android_asset/index2.html");
91 //系统默认会通过手机浏览器打开网页,为了能够直接通过WebView显示网页,则必须设置
92 webView.setWebViewClient(new WebViewClient(){
93 @Override
94 public boolean shouldOverrideUrlLoading(WebView view, String url) {
95 //使用WebView加载显示url
96 view.loadUrl(url);
97 //返回true
98 return true;
99 }
100 });
101 }
102 }

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

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

js(vue)端代码:

如果是传统js开发:

1 2 3

4
5 6
7 27 28

如果是vue开发:

1 mounted() {
2 window.manualCtrl = this.manualCtrl
3 } ,
4 methods: {
5 manualCtrl(info) {
6 //info from android
7 //do something…
8 return Math.random()
9 }
10 }