h5页面与APP互调方法最近遇到APP内嵌h5页面，需要互调方法，记录以备后用 android使用 WebView 方式

最近遇到APP内嵌h5页面，需要互调方法，记录以备后用
android使用 WebView 方式
ios使用 WKWebView 方式

h5获取当前环境

// 获取当前h5所在的环境，是否内嵌于APP
// navigator.userAgent 需要APP端配合重写，约定标识  infexOf方法中参数为约定内容
const u = navigator.userAgent;
//android终端
const isAndroid = u.indexOf('XXXXX') > -1 && u.indexOf('androidphone') > -1 ; 
//ios终端
const isiOS = u.indexOf('XXXXXX') > -1 && u.indexOf('iosphone') > -1 ;

h5调用APP端方法

// h5调用ios
window.webkit.messageHandlers.APP端定义方法名.postMessage(data)
// 也可以适配name来调用
window.webkit.messageHandlers[APP端定义方法名].postMessage(data) 


//h5调用安卓
window.android.APP端定义方法名(JSON.stringify(data))
//  'android'为 android APP开发人员定义，挂载到h5window对象上   --'android'(可以约定其他名称)
// 这个在开发中发现不能通过[]来适配调用,只能把方法名 . 出来，控制台会报错说调用的不是一个方法，
// 可能ios与android实现方式不同吧 -.- (盲猜ios会挂载方法到h5中，android只会监听调用)

暴露一个自己命名的Obj给APP端

window.appCallH5 = {
    方法名1:()=>{...},
    ...
}

android调用 => mWebView.loadUrl("javascript:appCallH5.xxxx();")
ios调用 => [webView evaluateJavaScript:@"appCallH5.xxxx('参数')"