您的位置:彩世界app > 新闻 > iOS 轻量级JSBridge

iOS 轻量级JSBridge

2019-12-25 07:49

iOS与H5界面JSBridge交互Demo

最近公司需要加活动和新闻模块, boss看同样的设计稿, 我们iOS做一遍, 安卓做一遍, 小程序又做一遍; 所以决定用H5页面. 但我们Native不仅仅加载URL就行, 还需要跟H5有交互, 安卓大哥跟我慢慢填坑…

我用了一个library(GCWebviewJSBridge-iOS), github网址:github.com/wheying/GCWebviewJSBridge-iOS

他的Demo不太容易看得懂, 看得我一脸懵逼, 我写了一个简洁明了的Demo

首先做好准工作, 建立一些基本的视图
iOS的准备工作

// 1.新建WebView
self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.webView];

// 2.加载网页
NSString *indexPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *appHtml = [NSString stringWithContentsOfFile:indexPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseUrl = [NSURL fileURLWithPath:indexPath];
[self.webView loadHTMLString:appHtml baseURL:baseUrl];

// 3.开启日志
[GCWebviewJSBridge setEnableLogging];

// 4.给webView建立JS和OC的沟通桥梁
_bridge = [GCWebviewJSBridge bridgeForWebView:self.webView];
[_bridge setwebViewDelegate:self];

JS的准备工作

之前是只写一套, 发现iOS行了Android又不行了; Android行了iOS又不行了. 最后才知道需要写两套

// 这段代码是固定的,必须要放到js中
function setupWebViewJavascriptBridge(callback) {
   //Android
   if (window.GCWebviewAndroidJSBridge) {
       callback(GCWebviewAndroidJSBridge)
   } else {
       document.addEventListener(
         'GCWebviewAndroidJSBridgeReady'
         , function() {
         callback(GCWebviewAndroidJSBridge)
         },
         false
     );
   }

   //iOS
   if (window.GCWebviewJSBridge) {
       return callback(GCWebviewJSBridge);
   }
   if (window.KBWVJSBCallBacks) {
       return window.KBWVJSBCallBacks.push(callback);
   }
   window.KBWVJSBCallBacks = [callback];
   var GCWVJSBIframe = document.createElement('iframe');
   GCWVJSBIframe.style.display = 'none';
   GCWVJSBIframe.src = 'gcwvjsbscheme://__GC_BRIDGE_LOADED__';
   document.documentElement.appendChild(GCWVJSBIframe);
   setTimeout(function() { document.documentElement.removeChild(GCWVJSBIframe) }, 0);
}

一. iOS注册方法提供给JS调用
iOS注册访问相册方法

[_bridge registerObjCHandler:@"openCamera" handler:^(id data, GCWVJSBResponseCallback responseCallback) {
    NSLog(@"需要%@图片", data[@"count"]);
    UIImagePickerController *imageVC = [[UIImagePickerController alloc] init];
    imageVC.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    [self presentViewController:imageVC animated:YES completion:nil];
}];

 

JS调用该方法的代码片段

JS调用打开相册方法

bridge.callHandler('openCamera', {'count':'10张'}, function responseCallback(responseData) {
   console.log("OC中返回的参数:", responseData)
});

二. JS注册方法提供给iOS调用
iOS注册提供用户信息方法

/* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */
// 获取用户信息
bridge.registerHandler('getUserInfo', function(data, responseCallback) {
   console.log("OC中传递过来的参数:", data);
   // 把处理好的结果返回给OC
   responseCallback({"userID":"DX001", "userName":"旋之华", "age":"18", "otherName":"旋之华"})
});

iOS调用JS中的方法, 获得用户信息

// 调用JS中的API
[self.bridge callHandler:@"getUserInfo" data:@{@"userId":@"DX001"} responseCallback:^(id responseData) {
    NSString *userInfo = [NSString stringWithFormat:@"%@,姓名:%@,年龄:%@", responseData[@"userID"], responseData[@"userName"], responseData[@"age"]];
}];

文章写得不详细, 可以以下我的Demo直接看代码:Demo下载地址

哎~ 这种方式实现,需要三方配合测试, 真的是很麻烦啊~

简介

FMWebViewJavascriptBridge inspired by react native 是一个轻量级的H5 与Native 通信框架,只支持WKWebView iOS 8.0之后。

图片 1

image

How to Use

自定义 JavascriptInterface

  • 自定义 JavascriptInterface 类
  • 在暴露的接口前添加FM_EXPORT_METHOD宏
  • 支持的参数可以是 nil NSNull NSString NSNumber NSDictionary NSArray NSDate char int double BOOL
  • 同时支持返回值给Javascrip的回调, 回调的类型FMCallBack,支持参数同上
@implementation JavascriptInterface

FM_EXPORT_METHOD(@selector(push:))
- (void)push:(NSUInteger)one {
  [self.viewController.navigationController
      pushViewController:[WKViewController new]
                animated:YES];
  NSLog(@"test push%ld", (unsigned long)one);
}

FM_EXPORT_METHOD(@selector(pop:))
- (void)pop:(NSString *)testArray {
  [self.viewController.navigationController popViewControllerAnimated:YES];
  NSLog(@"pop array %@", testArray);
}

FM_EXPORT_METHOD(@selector(setNavTitle:response:))
- (void)setNavTitle:(NSDictionary *)userInfo response:(FMCallBack)callBack {
  self.viewController.title = userInfo[@"name"];
  callBack(@{@"name":@"carlSQ",@"age":@"26"});
}

本文由彩世界app发布于新闻,转载请注明出处:iOS 轻量级JSBridge

关键词:

  • 上一篇:没有了
  • 下一篇:没有了