在上一篇文章中，OC 和 JS 交互的核心是方法的返回值。
也就是說，OC 如果需要 JS 的數(shù)據(jù)，就必須調用 JS 的函數(shù)，并獲得返回值。
JS 要獲得 OC 的參數(shù)，就需要調用 OC 的方法，并獲得返回值。
這種交互是建立在方法的返回值上的。
但方法/函數(shù)不只有返回值，方法/函數(shù)還有參數(shù)。
被動的等待對方調用自己的方法，并通過參數(shù)的方式獲取對方的數(shù)據(jù)。
上一篇使用的是方法/函數(shù)的返回值獲取對方的數(shù)據(jù)，這是一種主動的行為。
而使用方法參數(shù)的方式，則是被動的等待對方調用自己的方法-傳入?yún)?shù)，并獲取數(shù)據(jù)。
場景
需要完成的目標
- OC 的控件里，輸入信息，然后通過 OC 把數(shù)據(jù)傳遞到 H5。
- H5 里面有一個 Ajax 請求，當請求返回數(shù)據(jù)之后，把數(shù)據(jù)傳遞到 OC 的 tableView 上并顯示。
特點：
因為 H5 不知道 OC 什么時候用戶會輸入完信息。所以只能被動的等待。
因為 OC 不知道 H5 的 ajax 請求什么時候返回，所以只能被動的等待。
代碼
HTML 文件
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<span>這兩個文本框的內容是 OC 的參數(shù)傳遞過來的。<span></span><br />
用戶名：<input type="text" id="username" /><br />
手機號碼:<input type="text" id="userPhone"/><br />
<br /><br /><br /><br /><br /><br />
<button id="ajaxBtn">異步 ajax 請求，數(shù)據(jù)請求回來之后，需要傳遞到 OC</button>
</body>
</html>
<script type="text/javascript">
// 等待 OC 的調用，并將 OC 的NSDictionary 傳遞成 JS 的 data。
function setUserNameAndUserPhone(data) {
document.getElementById("username").value = data.userName;
document.getElementById("userPhone").value = data.userPhone;
}
document.getElementById("ajaxBtn").onclick = function() {
$.ajax({
url:"http://127.0.0.1/apps.json",
success : function(result) {
// JS 主動的調用 OC 的方法，OC 被動的等待 Ajax 數(shù)據(jù)返回。
showAjaxData(result);
}
});
}
</script>
目標1：當用于在 OC 中輸入完畢信息之后，傳遞到 H5
分析：H5 被動的等待 OC 調用自己的方法。
H5 JS 賦值函數(shù)，被動等待
// 等待 OC 的調用，并將 OC 的NSDictionary 傳遞成 JS 的 data。
function setUserNameAndUserPhone(data) {
document.getElementById("username").value = data.userName;
document.getElementById("userPhone").value = data.userPhone;
}
OC 在用戶輸入完畢，并點擊 UIButton 之后，調用 JS 的函數(shù)，傳遞參數(shù)，最終將 OC 的數(shù)據(jù)傳遞過去。
// 調用 JS 的函數(shù)并傳遞參數(shù)，參數(shù)最終就流向了 JS。
- (IBAction)invokeJsFunc:(id)sender {
JSValue *jsFunc = _jsContext[@"setUserNameAndUserPhone"];
NSDictionary *params = @{
@"userName" : self.userNameTxt.text,
@"userPhone" : self.userPhoneTxt.text
};
[jsFunc callWithArguments:@[params]];
}
運行截圖：
目標2：H5有一個 ajax 請求，當請求的數(shù)據(jù)返回值時，調用 OC 的方法，傳遞數(shù)據(jù)
首先，需要把接受 Ajax 數(shù)據(jù)的 OC 方法注冊到當前JS上下文。
_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
_jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
NSLog(@"%@",@"獲取 WebView JS 執(zhí)行環(huán)境失敗了!");
};
__weak typeof(self) weakSelf = self;
_jsContext[@"showAjaxData"] = ^(NSArray *ajaxData) {
__strong typeof(weakSelf) sself = weakSelf;
// NSLog(@"%@",ajaxData);
sself.ajaxModelList = [ajaxData modelListWithClass:[AjaxModel class]].mutableCopy;
NSLog(@"%@",sself.ajaxModelList.firstObject);
dispatch_async(dispatch_get_main_queue(), ^{
// OC 注入到 JS 中的方法，默認都是在子線程調用的。
[sself.tableView reloadData];
});
};
然后再 H5 的 Ajax 請求 success 之后調用 OC 的方法把服務器返回的數(shù)據(jù)從 JS 傳到 OC。
document.getElementById("ajaxBtn").onclick = function() {
$.ajax({
url:"http://127.0.0.1/apps.json",
success : function(result) {
// JS 主動的調用 OC 的方法，OC 被動的等待 Ajax 數(shù)據(jù)返回。
showAjaxData(result);
}
});
}
當 OC 拿到用戶數(shù)據(jù)之后，刷新表格。即可顯示服務器傳遞回來的數(shù)據(jù)了。
運行效果：
最后總結：
- OC 和 H5 通過方法/函數(shù)傳遞數(shù)據(jù)有兩種方式：返回值、參數(shù)。
- 利用返回值的時候，都是主動的調用對方的函數(shù)以獲取返回值。
- 利用參數(shù)的時候，都是被動的等待對方調用自己。(常見的就是 H5 的 ajax 數(shù)據(jù)返回，OC 只能被動的等待)。
