UIwebView 和 H5交互詳情

背景:

最近公司準備上一個只有原生登陸界面 + H5網頁 ，而且支持ios7.0 以上系統的混合app;這可把我難住了，原生的UI界面我能夠正寫反寫各類style把界面搭建起來。而要這個app的難點在於交互，與前端h5 的交互。

 

　　經同事推薦，使用webViewJavascripeBridge 這個交互三方神器；

　　準備工做，把webViewJavascripeBridge 導入到xcode工程中，或用cocoapod管理

　　廢話很少說，上代碼

1、　首先是ios端的代碼:

- (void)viewDidLoad {

    [super viewDidLoad];

    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:webView];

     [WebViewJavascriptBridge enableLogging];

　　_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

 

　　(1)h5向客戶端通信,讓客戶端能響應到網頁的點擊事件     

      [_bridge registerHandler:@"logOut" handler:^(id data, WVJBResponseCallback responseCallback) {

           //登出操做

　　　　 [self logOutBtnClick];

       }];

 

　　(2)客戶端向h5通信，把帳號和密碼傳輸過去，讓網頁調用登陸接口

        id data = @{@"phone":帳號,@"password":MD5密碼};

        [_bridge callHandler:@"login" data:data responseCallback:^(id response) {

        }];

 

　　(3)加載html網址

　　[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:目標html]]];

    }

 

明天繼續貼h5端代碼

最近幾天公司事情比較多，如今更新補上！

2、 　首先H5端的代碼:

在對應的html body中貼上以下代碼

<script>
window.onerror = function(err) {
　　log('window.onerror: ' + err)
}

 

//A.(如下用這個表明對應的代碼)

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)
}

//B

setupWebViewJavascriptBridge(function(bridge) {

//C

app.bridge = bridge;

 

//D

bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!' }

 

//E
var jsData = JSON.stringify(data)
var phoneStr = ''
var passwordStr = ''
var stringArr = jsData.split('"')
for(var i in stringArr){
　　if (i == 3){
　　　　phoneStr = stringArr[i]
　　　　localStorage.setItem('userphone',phoneStr)
　　}
　　if (i == 7){
　　　　passwordStr = stringArr[i]
　　　　localStorage.setItem('password',passwordStr)
　　}
}

})
</script>

分析：A爲固定代碼，直接copy

　　　B爲客戶端往前端通信時前端要作的內容函數

　　   C在前端的 custom.js 中添加一個空的 bridge 來保存 （爲了前端能向客戶端通信，配合在對應的按鈕事件中 加上F代碼，就能夠實現前端向客戶端的通信）

　　　D爲bridge 的handle 

　　   E是把獲得的數據進行解析並保存在localStorage 中 （其餘地方就能夠拿到這個數據，進行一系列的操做）

         F:（代碼中的數據（{'foo': 'bar'}）能夠跟客戶端來約定，傳什麼數據對應什麼事件;函數名字也要約定一致）

　　   bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {

　　　　　　//此處寫前端其餘行爲
　　   })

 

 

我的主要精通於ios，對前端研究不深，以上前端和客戶端代碼都由我一我的編寫(部分代碼參考marcuswestin)，so,若是你們有發現什麼問題或者有什麼建議，歡迎批評指教！

 

郵箱:developer_yh@163.com

GitHub:https://github.com/developeryh