第一部分：js調用android
1.這種情況，就是點擊了web頁面的控件，讓android原生做出反應，如跳轉或者處理方法
2.android代碼要做的就是在寫web頁面的代碼內部監聽js點擊的方法
3.這裏監聽的時候部分普通js和vue js
4.不管你用的什麼web第三方控件都要實現下面的方法
// setJavaScriptEnabled這句代碼在用TBS騰訊瀏覽服務的jar包時，顯示過期，但是還是有效
webview.getSettings().setJavaScriptEnabled(true);
// 這裏的this，一般是指加載web頁面的context，name指的是js頁面調用方法前的一個對象，具體看js代碼
webview.addJavascriptInterface(this,"name");
- 來一段沒有註釋的代碼塊
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");
- 來一段js代碼
1.裏面的test.hello(“xxx”)，應該可以寫成window.test.hello(“xxxx”)
2.所以以hello命名的方法要寫在android代碼中，那之前在android代碼中的那個name就是test
3.所以寫成webview.addJavascriptInterface(this,“test”);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson</title>
<script>
function callAndroid()
{
// 由於對象映射，所以調用test對象等於調用Android映射的對象
test.hello("js調用了android中的hello方法");
}
</script>
</head>
<body>
//點擊按鈕則調用callAndroid函數
<button type="button" id="button1" "callAndroid()"></button>
</body>
</html>
- js代碼示例
<script>
window.onload = function () {
let temp = document.getElementById("test02");
temp.onclick = function (e) {
if(window.js_obj){
window.js_obj.testJS();
}
}
document.getElementById("test03").onclick = function(){
if(window.js_obj){
window.js_obj.shareTitleDesc("111","222");
}
};
}
</script>
- 在來段js代碼加深印象
1.下面應該寫成webview.addJavascriptInterface(this,“android”)
2.this是上下文，根據具體情況定
<html>
<head>
<meta http-equiv="Content-Type" charset="GB2312"/>
<script type="text/javascript">
// 這個方法是js調用java的方法名，也就是說這個方法名要在java中實現
function javacalljs()
{
document.getElementById("showmsg").innerHTML = "JAVA調用了JS的無參函數";
}
// java調用js，我們這說的就是android調用js，因爲android用的java語法
function javacalljswith(arg){
document.getElementById("showmsg").innerHTML = (arg);
}
</script>
</head>
<body>
<h3>Web模塊</h3>
<h3 id="showmsg">調用js顯示結果</h3>
// 注意看，你可以知道addJavascriptInterface後面的name是哪個嗎？沒錯就是android
<input type="button" value="Js調用Java代碼" "window.android.jsCallAndroid()"/>
<input type="button" value="Js調用Java代碼並傳參數" "window.android.jsCallAndroidArgs('Js傳過來的參數')"/>
</body>
</html>
- 上面的代碼在java中監聽的寫法是
1.在Android4.4以上並且必須加入@JavascriptInterface纔有響應。
2.第一個方法不帶參數，第二方法帶參數
@JavascriptInterface
public void jsCallAndroid(){
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
}
第二部分：android調用js
1.那android怎麼調用js中的方法呢
2.我分爲兩種，一個是調用普通的js代碼，一個是調用vue js的代碼
- 看在js中定義的一個方法給android調用
function callFromJava(str){
console.log(str);
}
- 接着在java中調用
1.javascript這個是固定寫法
2.callFromJava(“xxxx”)纔是真正要調用的方法
public void javaCallJS(){
webView.loadUrl("javascript:callFromJava('call from java')");
}
android調用vue js
- vue js 中的寫法
1.裏面一定要把給java調用的方法掛在到window上，就是mounted()中寫的
mounted() {
//將要給原生調用的方法掛載到 window 上面
window.callJsFunction = this.callJsFunction
},
data() {
return {
msg: "哈哈"
}
},
methods: {
callJsFunction(str) {
this.msg = "我通過原生方法改變了文字" + str
return "js調用成功"
}
}
- java中調用代碼
1.網上找了一種這個寫法的，給參考下
2.我自己寫的方法直接點，這裏還傳了一個參數
@Override
public void callVueJS() {
tbsWebView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:callJsFunction('soloname')");
}
});
}
- 自己寫的是
webView.loadUrl("javascript:callJsFunction('soloname')");