Android原生WebView与JSP交互

发表于

前言

我们也经常做平板和大屏项目的时候常常会遇到要开发网站壳子，一般网站前端用的Nodejs之类的框架来交互的，但是与JSP交互的少之又少，他们一般不会前端开发更加重视后端内容，导致一些交互他们无法实现，这时候我就来分享了我对于这块的解决方案了。

概念

WebView 对象允许您将 Web 内容显示为活动布局的一部分，但缺乏成熟浏览器的一些功能。当您需要增强对 UI 和高级配置选项的控制（允许您将网页嵌入到为应用程序专门设计的环境中）时，WebView 非常有用。

关于JS和Android交互的两种形式

这里我着重描述与JS的交互，我们需要写以下代码来实现android方面的交互

android部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
kotlin复制代码class MainActivity : AppCompatActivity(){
private lateinit var webView: WebView
private lateinit var mainBinding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
mainBinding = ActivityMainBinding.inflate(layoutInflater)
webView = WebView(this)
val params = FrameLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
mainBinding.contentView.addView(webView, params)
val webSettings: WebSettings = webView.settings
webSettings.setJavaScriptEnabled(true)
webView.loadUrl("file:///android_asset/android_test/index.html")
webView.addJavascriptInterface(JsInterface(), "control")
}
//android调用前端部分
fun showToast(value:String){
webView.evaluateJavascript("javascript:showToast('$value');", ValueCallback {
Log.e("toast", it)
})
}
inner class JsInterface {
//前端调用android部分
@JavascriptInterface
fun showToast(str: String) {   
 Toast.makeText(this@MainActivity, str, Toast.LENGTH_LONG).show()
}
}
}

前端部分

android调用前端：

JS

1
2
3
4
5
6
7
8
xml复制代码<script>    
/**     
* android原生调用前端部分     
* @param value     
*/    
function showToast(value){        alert("显示内容："+value);        
}
</script>

前端调用android

H5

1
2
3
4
xml复制代码<body>
<div >   
 <van-button type="primary" @click="showToastAndroid('今天天气不错')" size="large">{{text||"消息提示"}}</van-button></div>
</body>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
javascript复制代码var app=new Vue({   
 el: '#app',    
methods: {        
data() {            
return {                
text:null,            
}        
},               
/**         
* 消息提示         
*/        
showToastAndroid(value){            
javascript:control.showToast(value);        
},    
}});

问题

android原生与JS交互以上方法均可以正常运行，但是与JSP交互的话，我实际发现的是android方面引用前端方法的话无法引用到，这时候应该怎么处理的呢？

解决方案

我们可以采用android的webview直接loadURL刷新页面，通过拼接字符串的方式来解决以上问题：

1
2
3
4
5
6
7
8
9
dart复制代码var url="file:///android_asset/android_test/index.html"
var thisUrl="file:///android_asset/android_test/index.html?data1='萨摩耶'&data2='哈士奇'"
if(this.thisUrl.contains("?")){    
this.thisData ="&data1=${this.data1}&data2=$data2"
}else{    
this.thisData ="?data1=${this.tata1}&data2=$data2"
}
url="${this.thisUrl}${this.thisData}"
webView.loadUrl(url)

读取url完成以后，页面刷新加载数据，最终JSP前端得到了android主动调用的数据。

补充一下

android原生和前端交互的有几处需要对应

1
less复制代码webView.addJavascriptInterface(JsInterface(), "control")

这里的”control“需要跟前端约定好，所以前端调用的时候 也必须在这里用control

1
css复制代码javascript:control.showToast(value);

关于方法方面android部分@JavascriptInterface 下面的方法也必须与前端部分的要调用的方法相一致

1
2
3
4
less复制代码@JavascriptInterface
fun showToast(str: String) {   
 Toast.makeText(this@MainActivity, str, Toast.LENGTH_LONG).show()
}

和

1
css复制代码javascript:control.showToast(value);

以上代码里面的showToast必须一致

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%