Android 原生WebView与JSP交互

大鱼Ss

于 2024-04-28 22:08:15 发布

阅读量328

点赞数 11

文章标签： android 交互开发语言

本文链接：https://blog.csdn.net/m0_59162559/article/details/138292910

版权

前言

我们也经常做平板和大屏项目的时候常常会遇到要开发网站壳子，一般网站前端用的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必须一致

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓（文末还有ChatGPT机器人小福利哦，大家千万不要错过）

PS:群里还设有ChatGPT机器人，可以解答大家在工作上或者是技术上的问题

大鱼Ss

关注

11
点赞
踩
7

收藏

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

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

扫一扫