原生代码和JS交互说明

原生代码和JS交互说明

简介

• 接口不要定义返回值，JS有获取数据需求的情况通过回调函数的方式实现
• 尽量保证iOS和Android端一致，简化JS端的使用

思路

• 通过在WebView注入JS实现Web端和客户端的交互
• 定义一个公共的kf对象，在WebView初始化时注入
• 定义js文件，记录公共方法
• 尽可能统一方法名

Web端调用格式

 //method 方法名
//params 参数
//callback 回调
window.webkit.messageHandlers.kf.postMessage(JSON.stringify({method:'showMessage',params:'Please call me Steven',callback:''}));

iOS端

WKWebView交互

JS调用OC接口WKWebView提供了postMessage的机制来让JS调用OC接口：

window.webkit.messageHandlers[namespace].postMessage(JSON.stringify(wrap));

OC回调JS函数

[self.webView evaluateJavaScript:@"getShareLink('网页该分享了');" completionHandler:^(id _Nullable jsShareUrl, NSError * _Nullable error) {
    HKLog(@"分享链接%@",jsShareUrl);
}];

JS调用OC

//JS Call OC
function showMessage(){
    
    // ❤️❤️❤️window.webkit.messageHandlers.方法名.postMessage(参数);
    // 注意：参数不能为空，有且只有一个参数，如不传参数写postMessage(null)
    //kf 为我们注入JS的对象
    /*
     // 传null
     window.webkit.messageHandlers.kf.postMessage(null);
     // 传字典
     window.webkit.messageHandlers.kf.postMessage({name:'小明',gender:'男'});
     // 传字符串
     window.webkit.messageHandlers.kf.postMessage('hello');
     // 传数组
     window.webkit.messageHandlers.kf.postMessage(['小明','小华','小亮']);
     */
    //method 方法名
    //params 参数
    //callback 回调
window.webkit.messageHandlers.kf.postMessage(JSON.stringify({method:'showMessage',params:'Please call me Steven',callback:''}));
}

bridge.js为方便JS端调用，在注册了OC方法后，需要再bridge.js中定义好JS函数,例如

kf.getResourceInfo = function (callBackName) {
 calliOSFunction("kf","getResourceInfo","",callBackName);
};

bridge.js 在webview加载页面时会自动注入到页面中，JS端可直接调用这里声明的函数

案例代码

    
        
            
            
            
            
                    
    
    
        
        JS Call OC
        showShareContent()
        
此处展示OC传过来的内容(点击右上角分享按钮即可)
        
        
        
    
    

效果图

WkWebView和OC交互.gif

Android端

JS调用Java接口

Android端只要调用: webview.addJavascriptInterface(obj, "kf");
方法即可将obj对象中被@JavascriptInterface注解的方法提供给JS端调

Java调用JS

webview.loadUrl("javascript:" + function + "("" + data + "")");通过此方法可以调用JS中的函数，该函数必须在window对象下。

带回调函数的接口为方便JS端调用，目前要求所有带回调函数的方法，允许传入function对象，如：

kf.getResourceInfo = function (callback){ };
在调用时，调用方式如下：   
kf.getResourceInfo(function(data){ 
      console.log(data) 
 })

因为Java端并不能直接使用JS中函数对象，Java提供的接口只能接收String类型的回调函数名，所以为了支持在前端这样调用，需要做如下的处理

bridge.js和iOS端一样，带回调的JS接口需要再bridge.js中重新声明， 在assets下的android_bridge.js中：
kf.getResourceInfo = function(callback){
 win.kf._getResourceInfo(wrapCallback("getResourceInfo", callback));
 };

和iOS端不同的时，Android端仅需要重新声明带回调函数的方法，无返回值的不需要重新声明

@CallbackFunction注解

请注意上面bridge.js中出现的 _getResourceInfo 方法调用，该方法在Java的接口中并不存在，它是在编译的时候自动生成的，实际的Java方法声明如下：
public class DetailJsFunction extends BaseJsFunction {
@CallbackFunction
 public void getResourceInfo(final String callback) {
                webView.callJsFunction(callback, resourceInfo);
           }
 }

所有被@CallbackFunction注解的方法，在编译时，会自动生成一个新的代理类，该代理类中会自动追加一个 "_" + 原方法名的方法，所以在JS中可以直接以：

win.kf._getResourceInfo(wrapCallback("getResourceInfo", callback));的方式调用

使用JsFunctionProxy为了使上述方式生效，需要通过JsFunctionProxy来创建要注入给JS的对象， 如下：

detailJsFunction = JsFunctionProxy.inject(DetailJsFunction.class, this, webView);
webView.injectJsObject(detailJsFunction, "kf");
这里的DetailJsFunction不能是内部类了，必须是public的独立类，所以有些情况可能会略有不便