iOS與H5界面JSBridge交互Demo
阿新 • • 發佈:2017-09-15
view http tails user div ffi bsp end epic
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下載地址
哎~ 這種方式實現,需要三方配合測試, 真的是很麻煩啊~
iOS與H5界面JSBridge交互Demo