App和H5交互

前置操作

Android

//前端需要载NativeMethod对象到window上
//在index.html文件中强烈建议添加下面代码
<script>
    window.NativeMethod = NativeMethod;
</script>

Android
webView.addJavascriptInterface(JSInterface(), "NativeMethod")
class JSInterface{
	  @JavascriptInterface
	  fun name([params :[Long/Int/String/Double/Float/Boolean]]){
	 }
}

IOS
//注册 相关方法名outputParam
webView.configuration.userContentController.add(self, name: "outputParam")
extension ViewController: WKScriptMessageHandler {
	//监听相关方法的回调
	func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
			if message.name == "outputParam" {
					self.callLocal(message: message.body)
			}
	}
	private func callLocal(message: Any) {
			
	}
}

JS 调用原生

参数类型	IOS	Android
Int	支持	支持
Long	支持	支持
Int	支持	支持
Double	支持	支持
Float	支持	支持
Boolean	支持	支持
String	支持	支持
Object	支持	不支持(支持null)
Array	支持	不支持

实现方式

Android
window.NativeMethod.functionName()//无参数
window.NativeMethod.functionName([Double/Float/Long/Int/Boolean/null/String]))

IOS 
window.webkit.messageHandlers.functionName.postMessage([Double/Float/Long/Int/Boolean/null/String/Array])

原生调用JS

参数类型	IOS	Android	备注
Int	支持	支持
Long	支持	支持
Int	支持	支持
Double	支持	支持
Float	支持	支持
Boolean	支持	支持
String	支持	支持	需要加单引号''
Object	不支持	不支持(支持null和json字符串不带引号)
Array	不支持	不支持

实现方式

Android 注意调用的线程 需要
webView.loadUrl("javascript:funName()")//无参数
webView.loadUrl("javascript:funName(\'字符串\')")//字符串必须带单引号才能被前端识别
webView.loadUrl("javascript:funName([Double/Float/Long/Int/Boolean/null/jsonString])")// 带引号

原生调用JS方法

原生调用同步方法

Android
//方法参考调用JS方法
webView.evaluateJavascript("javascript:functionName(params :[Long/Int/String/Double/Float/Boolean])", 
		ValueCallback {
		//同步方法
})

self.webView.evaluateJavaScript(jsString) { [weak self] data, error in
    if (error == nil) {
        // JS同步方法的返回值
        print(data)
    } else {
        // 执行JS脚本有误
        callback(error?.localizedDescription)
    }
}

前端处理
function functionName(params) {
	// ...
	return data;
}

原生调用异步方法

不支持异步调用，需要异步方式可以

1. 原生调用JS的方法
2. JS调用原生方法来触发异步
3. JS异步完成后再通过JS调用原生方法来完成一次异步交互