前言
我们也经常做平板和大屏项目的时候常常会遇到要开发网站壳子,一般网站前端用的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调用前端:
JS
<script>
/**
* android原生调用前端部分
* @param value
*/
function showToast(value){ alert("显示内容:"+value);
}
</script>
前端调用android
H5
<body>
<div >
<van-button type="primary" @click="showToastAndroid('今天天气不错')" size="large">{{text||"消息提示"}}</van-button></div>
</body>
JS
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机器人,可以解答大家在工作上或者是技术上的问题