vue项目android,Android与Vue项目交互
1. Android代碼
class MainActivity : AppCompatActivity() {
private lateinit var callJSBtn: Button
private lateinit var webView: WebView
private var ajObject: AjObject = AjObject()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViews()
}
private fun initViews() {
callJSBtn = findViewById(R.id.call_js_btn)
callJSBtn.setOnClickListener(View.OnClickListener {
webView.post(Runnable {
webView.loadUrl("javascript:callJS('Message From Vue')")
})
})
webView = findViewById(R.id.web_view)
webView.settings.allowFileAccess = true
webView.settings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(
view: WebView?,
url: String?
): Boolean {
view?.loadUrl(url)
return true
}
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
}
}
webView.loadUrl("http://192.168.1.110:8080/")
webView.addJavascriptInterface(ajObject, "android")
}
}
class AjObject {
@JavascriptInterface
fun callJava(msg: String) : String {
return "Message From Android"
}
}
2. Vue代碼
在Vue項目下創建utils/jsToAndroid.js
//jsToAndroid.js
const android = window.android
export {
android
}
在HelloWorld.vue中引入jsToAndroid.js
//HelloWorld.vue
{{ msg }}
Click
import {android} from '../utils/jsToJava'
export default {
data() {
return {
msg: "Hello"
}
},
mounted() {
window.callJS = this.callJS
},
methods: {
callJS(str) {
if (str !== undefined && str !== "") {
this.msg = str
}
// return "message from javascript"
},
callJava() {
this.msg = android.callJava('jack')
}
},
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
效果圖
點擊Call JavaScript，Android調用Vue
點擊Click，Vue調用Android方法
來源：oschina
鏈接：https://my.oschina.net/yuewawa/blog/4329536
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue项目android,Android与Vue项目交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 1556_mysql导入时E
- 下一篇： android与web服务器建立连接失败