说实话，APP原生与H5互调Bridge技术实现起来还是有点复杂的，哈哈，不过咱就是说弄懂了就还好啦。

原生功Neng通过插件的形式实现，要新增一个插件只需要： 第一步新建一个继承'YNPlugin'基础插件类的对象，然后在对象里实现方法-exec:arg； 第二步在YNBridgePlugPlist.plist文件里添加以下形式的代码

//注册基础插件 ; //注册Yi有插件 NSString* plistPath = pathForResource:@"applyPlugPlist" ofType:@"plist"]; NSArray *modules = ; for { Class class = NSClassFromString; if { init] namespace:obj]; } }

那，那个那个，js端的第一个信号来自wk的h5输入框拦截回调方法，参数prompt里携带js端要调用的api名字，参数值为字符串：_ynbridge=namespace1.api_1，_ynbridge=为YNBridge框架调用的标记，Ru果不是以这个标记开头则不Zuo任何处理，只弹出正常的系统弹框。

调用命名为'asynObj'的插件里的一个定时器api：startTimer

WebSettings webSettings = wv.getSettings;webSettings.setJavaScriptEnabled;wv.addJavascriptInterface,"_anbridge");class JsApp{ public JsApp{} @JavascriptInterface public void call{ }}

原生iOS端

api调用完毕，需要给js回传值时调用wk的- evaluateJavaScript:javaScriptString completionHandler:)completionHandler方法 执行这段js代码：window.nativeCallBack，nativeCallBack是js端接收原生端回传值的方法，接收四个参数，即为YNJsCallInfo对象的callBack回调参数。

YN.register); YN.register); //告诉原生js初始化了调原生初始化api if { YN.call; }

register方法内部实现同原生注册插件的形式，将插件和对应的命名空间添加进window.nativeNamespaceInterfaces集合。

在上面实现的基础上，js端判断window._anbridge为true则为与Android通信，执行代码：_anbridge.call，Ru果判断window._ynwk为true则为与iOS端通信，执行代码：prompt，js端代码实现：

BOOL = )objc_msgSend; BOOL ret=action; if { return YES; } return ;

exec:方法的形参是YNJsCallInfo对象，该对象携带的参数： action:api名，或叫动作标识字符串，各业务通过该字段判断该执行什么功Neng，Ru果插件内没有处理该api则返回调用失败的错误值false反之返回true。 callId:api调用事件id或叫回传值队列id，当给js回传值时需要带上该值返回去。 data:js给过来的参数值。 callBack:block变量，结果回调入口，回传值时需要指定四个参数status、value、callId、complete，参数用处后面讲解。

调起一个js端的插件功Neng，执行wk对象的方法-callHandler:server action:action arguments:args completionHandler:completionHandler;该方法逻辑同js call native时调用的YN.call方法，通过维护一个callid服务队列来处理结果回传。

js调原生和原生调js的参数传递必须是json字符串格式。

带回调结果带参数的调用方式：

原生Android端向浏览器注入供js调用的对象‘_anbridge’，对象里实现‘call’方法，并且方法需要加上@JavascriptInterface注解，代码示例：

YN.callNative { if { document.getElementById.innerText = value }else{ document.getElementById.innerText = value } },function { alert })

执行YN.call方法，实现调起原生和结果回调队列的维护，Ru果注入过安卓js对象‘window._anbridge’则执行_anbridge.call调起安卓端，Ru果注入过‘window._ynwk’值为true则执行prompt调起iOS端，Ru果需要有回传值，则arg对象将给callId字段赋一个唯一值，并且在window.nativeCallBackIds缓存集合里新增callId值，值即为回调函数。

调用命名为''的插件里的一个定时器api：jsCallTimer

插件回传值结果和api调用结果通过调用原生的YNBase.returnValue这个api实现，即执行YN.call; value是参数对象，包含data、callId、complete、status四个字段，含义和用途同原生回调那里。

所有这些，说实话，实现起来挺不容易，你懂的。

不带回调结果带参数的调用方式：

YN.callNative

不带回调结果不带参数的调用方式：

接收原生端第一个信号由nativeCallJs = function方法接收，参数： callId:api调用事件id或叫回传值队列id。 service:js api对应的命名空间名。 action:api名。 actionArgs:原生端的参数。 方法内部实现同原生插件调用，也是找到插件并执行插件方法exec。

所有提供的APIdou需要通过命名空间进行管理，比如API1在'namespace1'这个命名空间下的类里面那么JS端访问API1的方式就是'namespace1.API1'

]];

WKWebView配置注入标记

_ynwK=true注入到浏览器中，用于JS识别当前环境是否为iOS WKWebView 环境，从而决定使用何种方式与native进行通信比如使用 prompt 方法

/// 初始化注入JS标记 WKUserScript *script = initWithSource : @" window ._ ynwk = true ; " injectionTime : WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly : YES ]; ;

实现原理

实现JS唤起native的关键在于WKWebView 的 H5 输入框拦截回调 - webView ： webView runJavaScriptTextInputPanelWithPrompt ： prompt defaultText ： defaultText initiatedByFrame ： frame completionHandler ：） completionHandler ；当 JS 执行 prompt 时该方法被触发

API 调用必须采用命名空间的方式即 namespace . apixxx 的形式。子类必须重写 - exec : arg 工厂放来处理不同API请求，并Zui终将数据通过 callBack 返回给 JS 端。

所有这些规范和约定，dou是为了让整个 Bridge 技术geng加完善。你说是不是这样？哈哈！ 通过这种方式，我们Ke以geng好地实现 APP 原生与 H5 的互调。害，不容易啊！但咱就是说有了这些基础，实现起来就没那么难了对吧？说实话，这里面的细节还是有hen多讲究，但只要你理解了原理，实现起来也就顺理成章了。你懂的！加油！