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)
			}
	}b

	private func callLocal(message: Any) {
			
	}
}

JS 调用原生

实现方式

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

实现方式

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调用原生方法来完成一次异步交互