技術(shù)背景
現(xiàn)在混合編程越來越多，為了能給用戶提供一個(gè)完整的體驗(yàn)，我們就需要解決H5頁面與原生程序直接的交互問題，閑話少說，我們直接上代碼。我也已經(jīng)將這篇博客相關(guān)的完整Demo上傳到了github上，大家也可以直接clone下來查看。
網(wǎng)頁端
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script>
function loginAction() {
var url = "calloc://login?name=leafly&password=123456";
document.location = url;
}
</script>
</head>
<body>
<button onClick="loginAction()">登錄</button>
</body>
</html>
原理分析
在以上的h5代碼中，我們主要做了兩件事：
- 頁面展現(xiàn)
- 點(diǎn)擊事件的JS處理
當(dāng)用戶點(diǎn)擊了登錄按鈕后，就會(huì)調(diào)用loginAction()方法，在這個(gè)方法里，我們加載了一個(gè)url，我們將這個(gè)url分割成三部分calloc://、login?、name=leafly&password=123456，這三部分共同組成了一個(gè)完整的請(qǐng)求地址，第一部分我取了一個(gè)名字calloc來表達(dá)這個(gè)地址的核心作用是調(diào)起oc代碼，當(dāng)然也可以根據(jù)實(shí)際情況去修改，第二部分表達(dá)了這次調(diào)起主要是做login操作，第三部分是login需要的參數(shù)
客戶端
核心代碼
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL *url = [request URL];
if ([[url scheme] isEqualToString:@"calloc"]) {
// JavaScript與Objective-C交互
if ([[url host] isEqualToString:@"login"]) {
// 登錄操作
// 得到一個(gè)參數(shù)字段
NSDictionary *params = [self getParams:[url query]];
[self login:params];
return NO;
}
}
return YES;
}
原理分析
在UIWebView里，每次的地址請(qǐng)求都會(huì)觸發(fā)- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType代理，而我們就是通過在這個(gè)代理方法里攔截請(qǐng)求地址來實(shí)現(xiàn)JS調(diào)起OC的作用。通過獲取一個(gè)請(qǐng)求地址的scheme、host、query這三部分信息，來獲取我們所需要的信息。
歡迎訪問我的個(gè)人博客
