iOS與H5介面JSBridge互動Demo

標籤：gen   timeout   handle   擷取使用者資訊   ade   ack   ons   .com   none   

iOS與H5介面JSBridge互動Demo

最近公司需要加活動和新聞模組, boss看同樣的設計稿, 我們iOS做一遍, 安卓做一遍, 小程式又做一遍; 所以決定用H5頁面. 但我們Native不僅僅載入URL就行, 還需要跟H5有互動, 安卓大哥跟我慢慢填坑…

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

他的Demo不太容易看得懂, 看得我一臉懵逼, 我寫了一個簡潔明了的Demo

首先做好准工作, 建立一些基本的視圖

iOS的準備工作

// 1.建立WebViewself.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