Android原生WebView与JSP交互

最新推荐文章于 2024-06-13 17:37:13 发布

程序员一东

最新推荐文章于 2024-06-13 17:37:13 发布

阅读量273

点赞数 5

文章标签： android java 交互

本文链接：https://blog.csdn.net/Eqiqi/article/details/138344409

版权

前言

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

概念

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

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

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

android部分

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调用前端：

<script>    
/**     
* android原生调用前端部分     
* @param value     
*/    
function showToast(value){        alert("显示内容："+value);        
}
</script>

前端调用android

<body>
<div >   
 <van-button type="primary" @click="showToastAndroid('今天天气不错')" size="large">{{text||"消息提示"}}</van-button></div>
</body>

var app=new Vue({   
 el: '#app',    
methods: {        
data() {            
return {                
text:null,            
}        
},               
/**         
* 消息提示         
*/        
showToastAndroid(value){            
javascript:control.showToast(value);        
},    
}});

问题

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

解决方案

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

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原生和前端交互的有几处需要对应

webView.addJavascriptInterface(JsInterface(), "control")

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

javascript:control.showToast(value);

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

@JavascriptInterface
fun showToast(str: String) {   
 Toast.makeText(this@MainActivity, str, Toast.LENGTH_LONG).show()
}

和

javascript:control.showToast(value);

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

如果你看到了这里，觉得文章写得不错就给个赞呗？
更多Android进阶指南可以扫码解锁更多Android进阶资料

在这里插入图片描述
敲代码不易，关注一下吧。ღ( ´･ᴗ･` )

程序员一东

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android原生WebView与JSP交互

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

扫一扫