技術(shù)背景
現(xià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)
- 點擊事件的JS處理
當用戶點擊了登錄按鈕后蹂安，就會調(diào)用loginAction()方法，在這個方法里锐帜，我們加載了一個url田盈，我們將這個url分割成三部分calloc://、login?缴阎、name=leafly&password=123456允瞧，這三部分共同組成了一個完整的請求地址，第一部分我取了一個名字calloc來表達這個地址的核心作用是調(diào)起oc代碼蛮拔，當然也可以根據(jù)實際情況去修改述暂，第二部分表達了這次調(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"]) {
// 登錄操作
// 得到一個參數(shù)字段
NSDictionary *params = [self getParams:[url query]];
[self login:params];
return NO;
}
}
return YES;
}
原理分析
在UIWebView里建炫，每次的地址請求都會觸發(fā)- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType代理畦韭，而我們就是通過在這個代理方法里攔截請求地址來實現(xiàn)JS調(diào)起OC的作用。通過獲取一個請求地址的scheme肛跌、host艺配、query這三部分信息，來獲取我們所需要的信息衍慎。
歡迎訪問我的個人博客
