美文网首页
一:iOS - dsBridge实现原理

一:iOS - dsBridge实现原理

作者: 林鹏_dev | 来源:发表于2021-07-16 13:21 被阅读0次

    前言

    WKWebView为了安全起见,禁止了web的弹窗显示,web端通过js的 alert,confirm,prompt不可以调用系统弹窗,所以需要实现WKUIDelegate协议来拦截并自定义是否弹窗。

    一.alert,confirm,prompt与原生通信(传值 & 接收返回值)

    alert,confirm,prompt用法

    alert("这是弹出框提示文本")
    
    
    //不接收返回值:
    confirm("这样写可以直接显示,不接收返回值。")
    
    //接收返回值:
    var x; 
    var r = confirm("请按下按钮!");
    if (r == true){
        x = "你按下的是\"确定\"按钮。";
    }
    else{
        x = "你按下的是\"取消\"按钮。";
    }
    document.write(x)
    
    
    //不显示默认文本:
    prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。
    
    //显示默认文本:
    var x; 
    var name = prompt("请输入你的名字","Keafmd"); 
    if (name != null && person != ""){ 
     x="你好! " + name + "。";
     document.write(x)
    

    二.通过WKUIDelegate实现js与native通信(拦截 & 回传数据)

    WKUIDelegate中的代理方法主要涉及到界面显示的回调方法,原生控件支持,三种提示框:输入、确认、警告。首先将 js提示框拦截 然后做处理,处理完毕之后 通过block回调数据给js.

    • 警告框(alert)
    - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
        //TODO:自定义原生弹窗UIAlertView or not
        
        //回调
        completionHandler();
    }
    
    • 确认框(confirm)
    - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
        //TODO:自定义原生弹窗UIAlertView or not
        
        //处理结果回传给js
        completionHandler(YES);
    }
    
    • 输入框(prompt)
    - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler {
        //TODO:自定义原生弹窗UIAlertView or not
        
        //处理结果回传给js
        completionHandler(@"自定义字符串回传给js");
    }
    

    dsBridge就是通过该原理实现js与原生通信

    DSBridge优势

    • DSBridge真正跨平台!原版WebViewJavascriptBridge只支持ios,只不过有人在android上也实现了和WebViewJavascriptBridge相同的前端调用协议,所以可以在ios/android上使用同一套js调用协议,但本身来讲,WebViewJavascriptBridge ios和android平台并非一家之作,所以也并没有官方提供跨平台的技术支持,而DSBridge官方同时支持ios和android。
    • DSBridge支持同步调用!这一点秒杀其它所有,可谓一骑绝尘。同步在复杂一点的应用中有多重要,相信使用过node的都应该深有感触。原文中有仔细说明,请移步http://www.jianshu.com/p/d967b0d85b97
    • 三端友好; 无论是在ios、android或者 web,使用起来都非常简单优雅,这一点和WebViewJavascriptBridge相比,简直就是艺术。
      DSBridge为国人项目,有详细中文文档和问题反馈渠道。

    dsbridge.js源码分析

    dsbridge.js源码分析

    相关文章

      网友评论

          本文标题:一:iOS - dsBridge实现原理

          本文链接:https://www.haomeiwen.com/subject/magvpltx.html