zoukankan      html  css  js  c++  java
  • WKWebview 和 WebViewJavascriptBridge

    WKWebview 和 WebViewJavascriptBridge

    https://www.cnblogs.com/L-vincen/p/6681435.html

    链接在这里,有很多不错的文章,大家可以去看一下

    WKWebview 

     Demo在这

    先来个最直观的,为什么要用WKWebview

    这里分别用WKWebview 和UIWebview加载了一个百度的网页,内存的占用情况如下

    • WKWebview
    • UIWebview

    相比之下,WKWebView占用20M,而UIWebView占用73M,这性能提升的不只一点点。
    具体的要了解和使用 WKWebview 的,给个友情链接  刘彦玮的技术博客
    这里主要讲下  WKWebViewJavascriptBridge ,一个优秀的第三方框架

    WebViewJavascriptBridge

    Github地址在这里
    https://github.com/marcuswestin/WebViewJavascriptBridge)


    之前我也是自己封装WK做的交互,后面偶然间看到的这个开源库,8000+ star,果断上手。 安卓那边也有个类似这种的库, 2000+ star,调用方法基本类似, 这样 与前端的交互就可以只写一套代码了,轻松加愉快。

    • 先做一个简单Demo熟悉下
      先导入
      pod 'WebViewJavascriptBridge', '~> 5.0

    看一下目录

    如果用UIwebview就导入WebViewJavascriptBridge。

    WKWebViewJavascriptBridge 是后面加入的,用WKWebview要导入这个头文件

    这里用一个单例类用来管理交互 函数,像Cordova那种写插件的形式,写在一个类供JS调用,具体的可以看Demo。


    • JS 调用 原生 方法

    贴一下 demo.html 的 JS 段落 ,看注释,主要知道JS 怎么调用 原生方法 和 注册JS方法 供JS调用

    //注册原生方法给JS调用
    - (void)registShareFunction
    {

    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
    // data 的类型与 JS中传的参数有关
    NSDictionary *tempDic = data;
    // 在这里执行分享的操作
    NSString *title = [tempDic objectForKey:@"title"];
    NSString *content = [tempDic objectForKey:@"content"];
    NSString *url = [tempDic objectForKey:@"url"];

    // 将分享的结果返回到JS中
    NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];

    responseCallback(result); //回调给JS


    }];
    }


    • 看下原生代码

    初始化

     
    #import "WKWebViewJavascriptBridge.h"  //注意是 WK 开头的 , 如果不需要适配8.0以下的可以直接就用WKWebview
     
    @property WebViewJavascriptBridge* bridge;
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView]; 
     

    //注册原生方法给JS调用
    - (void)registShareFunction
    {

    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
    // data 的类型与 JS中传的参数有关
    NSDictionary *tempDic = data;
    // 在这里执行分享的操作
    NSString *title = [tempDic objectForKey:@"title"];
    NSString *content = [tempDic objectForKey:@"content"];
    NSString *url = [tempDic objectForKey:@"url"];

    // 将分享的结果返回到JS中
    NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];

    responseCallback(result); //回调给JS


    }];
    }


    //原生调用JS , JS 中先声明testJSFunction 函数
    -(void)pp_hander
    {

    //testJSFunction 是JS的方法
    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {

    NSLog(@"调用完JS后的回调:%@",responseData);

    }];
    }

    基本用法差不多就这些,很简洁,用起来也挺简单,准备接入目前的项目使用。


    如果不知道在模拟器怎么看调试网页,可以看看淘宝前端团队的这篇 
    在 iOS 模拟器中调试 Web 页面

    Safari的开发者选项,如果没有,去偏好设置->高级->显示开发者选项就有了


    如果调用不成功,可能是这些原因

    function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    写在JS里的代码这里是不能动的,原样贴上去就行。  之前有一次莫名其妙老是调用不了OC的方法, 后来发现是

    window.WebViewJavascriptBridg 写成了 window.WebView JavascriptBridg, 一直没看到,在网页端一直报找不到 WebViewJavascriptBridg这个变量,看到报错应该能发现在定义的时候有出错

    还有一个有意思的就是我设置了   _baseWebview.navigationDelegate=self;之后竟然也调用不了,JS端不走click()方法

      貌似只能用    [_webViewBridge setWebViewDelegate:self];

     这个方法,具体原因再看看。

  • 相关阅读:
    小程序数据库 用正则查询字符串字段/数组字段
    一键禁用Windows多余?服务
    Switch 10.1.0 无法启动软件请在home菜单中再试一次 解决方法
    算法记录
    LeetCode——面试题 10.01. 合并排序的数组
    LeetCode——98. 验证二叉搜索树
    LeetCode——55. 跳跃游戏
    LeetCode——92. 反转链表 II
    LeetCode——206. 反转链表
    LeetCode——225. 用队列实现栈
  • 原文地址:https://www.cnblogs.com/henusyj-1314/p/9928579.html
Copyright © 2011-2022 走看看