JS 传递参数到 Native
前面完成了 JS 调用 Native,接下来继续 JS 如何传递参数到 Native
传递原始类型数据
先看 JS 端的代码:
function onClickButton(){
window.androidBridge.callNative("Hello");
}
复制代码
Native 端:
inner class BridgeObject{
@JavascriptInterface
// 声明一个String类型参数对应JS
fun callNative(arg: String) {
Log.e("WebView", "callNative ok. args is $arg")
}
}
复制代码
运行,点击按钮 Logcat 里输出:
E/WebView: callNative ok. args is Hello
复制代码
传递 json 对象
Android 没有办法传递 json 对象,因此我们利用 JSON.stringify 转换为 string:
window.androidBridge.callNative(
JSON.stringify({
name: "mingo"
})
);
复制代码
Native:
fun callNative(arg: String) {
Log.e("WebView", "callNative ok. args is $arg")
val json = JSONObject(arg)
val name = json.getString("name")
Log.e("WebView", "name is $name")
}
复制代码
Logcat 输出:
E/WebView: callNative ok. args is {"name":"mingo"}
E/WebView: name is mingo
复制代码JS 传递参数到 Native 只能传递原始数据类型,JSON 里也只能包含原始数据类型
Function/Class 之类的是不能传递到 Native 的,因此他们之间实际是信息交
换,而不是同一语言的调用关系。
Native 返回结果给 JS
方法一: 直接通过 JavascriptInterface 的方法返回
Native 改动:
// 声明返回值为String类型
fun callNative(arg: String): String {
Log.e("WebView", "callNative ok. args is $arg")
// 返回
return "This is ative result."
}
复制代码
页面的改动:
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"
/>
body {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
button {
display: block;
width: 100%;
height: 30%;
font-size: 50px;
}
// 调整输出的字体大小
pre {
font-size: 40px;
}
// 获取返回值
var result = window.androidBridge.callNative(
JSON.stringify({
name: "mingo"
})
);
var logEl = document.getElementById("log");
logEl.innerText += result + "\n";
}
Call Native
复制代码
运行后,点击按钮,结果如图:
方法二: 通过 evaluateJavascript
方法一是通过返回值传递给 JS 的,我们还有另一种方式,通过webView.evaluateJavascript的来实现。
webView.evaluateJavascript("console.log('This is ative result.')", null)
复制代码
来看看怎么实现
首先是页面端声明一个函数用来给 webView 运行:
window.androidBridge.callNative(
JSON.stringify({
name: "mingo"
})
);
}
// 声明onNativeResult给webView运行
function onNativeResult(result){
var logEl = document.getElementById("log");
logEl.innerText += result + "\n";
}
复制代码
Native 端改动:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
WebView.setWebContentsDebuggingEnabled(true);
webView.settings.javaScriptEnabled = true
webView.webViewClient = WebViewClient()
// 在加载网页前添加我们的js对象
// 并且传递了webView进去
webView.addJavascriptInterface(BridgeObject(webView), "androidBridge")
// 加载assets中的网页
webView.loadUrl("file:///android_asset/test.html")
}
// 构造还是接收webView作为成员变量
inner class BridgeObject(val webView: WebView) {
@JavascriptInterface
fun callNative(arg: String) {
Log.e("WebView", "callNative ok. args is $arg")
// 这里使用post是因为evaluateJavascript只能运行在WebView规定的线程
webView.post {
// 执行js代码,运行onNativeResult方法
webView.evaluateJavascript("window.onNativeResult('This is native result.')", null)
}
}
}
}
复制代码
运行后,点击按钮,结果如图:
恭喜,到这里已经完成了 Native 返回结果给 JS 端了。