在上一篇文章中邦泄，OC 和 JS 交互的核心是方法的返回值迹炼。
也就是說(shuō)砸彬，OC 如果需要 JS 的數(shù)據(jù)，就必須調(diào)用 JS 的函數(shù)斯入，并獲得返回值砂碉。
JS 要獲得 OC 的參數(shù)，就需要調(diào)用 OC 的方法刻两，并獲得返回值增蹭。
這種交互是建立在方法的返回值上的。
但方法/函數(shù)不只有返回值磅摹，方法/函數(shù)還有參數(shù)滋迈。
被動(dòng)的等待對(duì)方調(diào)用自己的方法，并通過(guò)參數(shù)的方式獲取對(duì)方的數(shù)據(jù)户誓。
上一篇使用的是方法/函數(shù)的返回值獲取對(duì)方的數(shù)據(jù)杀怠，這是一種主動(dòng)的行為。
而使用方法參數(shù)的方式厅克，則是被動(dòng)的等待對(duì)方調(diào)用自己的方法-傳入?yún)?shù)赔退，并獲取數(shù)據(jù)。
場(chǎng)景
需要完成的目標(biāo)
- OC 的控件里，輸入信息硕旗，然后通過(guò) OC 把數(shù)據(jù)傳遞到 H5窗骑。
- H5 里面有一個(gè) Ajax 請(qǐng)求，當(dāng)請(qǐng)求返回?cái)?shù)據(jù)之后漆枚，把數(shù)據(jù)傳遞到 OC 的 tableView 上并顯示创译。
特點(diǎn)：
因?yàn)?H5 不知道 OC 什么時(shí)候用戶會(huì)輸入完信息。所以只能被動(dòng)的等待墙基。
因?yàn)?OC 不知道 H5 的 ajax 請(qǐng)求什么時(shí)候返回软族，所以只能被動(dòng)的等待。
代碼
HTML 文件
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<span>這兩個(gè)文本框的內(nèi)容是 OC 的參數(shù)傳遞過(guò)來(lái)的残制。<span></span><br />
用戶名：<input type="text" id="username" /><br />
手機(jī)號(hào)碼:<input type="text" id="userPhone"/><br />
<br /><br /><br /><br /><br /><br />
<button id="ajaxBtn">異步 ajax 請(qǐng)求立砸，數(shù)據(jù)請(qǐng)求回來(lái)之后，需要傳遞到 OC</button>
</body>
</html>
<script type="text/javascript">
// 等待 OC 的調(diào)用初茶，并將 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 主動(dòng)的調(diào)用 OC 的方法，OC 被動(dòng)的等待 Ajax 數(shù)據(jù)返回恼布。
showAjaxData(result);
}
});
}
</script>
目標(biāo)1：當(dāng)用于在 OC 中輸入完畢信息之后螺戳，傳遞到 H5
分析：H5 被動(dòng)的等待 OC 調(diào)用自己的方法。
H5 JS 賦值函數(shù)折汞，被動(dòng)等待
// 等待 OC 的調(diào)用倔幼，并將 OC 的NSDictionary 傳遞成 JS 的 data。
function setUserNameAndUserPhone(data) {
document.getElementById("username").value = data.userName;
document.getElementById("userPhone").value = data.userPhone;
}
OC 在用戶輸入完畢爽待，并點(diǎn)擊 UIButton 之后损同，調(diào)用 JS 的函數(shù)，傳遞參數(shù)堕伪，最終將 OC 的數(shù)據(jù)傳遞過(guò)去。
// 調(diào)用 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]];
}
運(yùn)行截圖：
目標(biāo)2：H5有一個(gè) ajax 請(qǐng)求，當(dāng)請(qǐng)求的數(shù)據(jù)返回值時(shí)疙筹，調(diào)用 OC 的方法富俄，傳遞數(shù)據(jù)
首先，需要把接受 Ajax 數(shù)據(jù)的 OC 方法注冊(cè)到當(dāng)前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 中的方法霍比，默認(rèn)都是在子線程調(diào)用的。
[sself.tableView reloadData];
});
};
然后再 H5 的 Ajax 請(qǐng)求 success 之后調(diào)用 OC 的方法把服務(wù)器返回的數(shù)據(jù)從 JS 傳到 OC暴备。
document.getElementById("ajaxBtn").onclick = function() {
$.ajax({
url:"http://127.0.0.1/apps.json",
success : function(result) {
// JS 主動(dòng)的調(diào)用 OC 的方法悠瞬，OC 被動(dòng)的等待 Ajax 數(shù)據(jù)返回。
showAjaxData(result);
}
});
}
當(dāng) OC 拿到用戶數(shù)據(jù)之后，刷新表格浅妆。即可顯示服務(wù)器傳遞回來(lái)的數(shù)據(jù)了望迎。
運(yùn)行效果：
最后總結(jié)：
- OC 和 H5 通過(guò)方法/函數(shù)傳遞數(shù)據(jù)有兩種方式：返回值、參數(shù)凌外。
- 利用返回值的時(shí)候辩尊，都是主動(dòng)的調(diào)用對(duì)方的函數(shù)以獲取返回值。
- 利用參數(shù)的時(shí)候康辑，都是被動(dòng)的等待對(duì)方調(diào)用自己摄欲。(常見(jiàn)的就是 H5 的 ajax 數(shù)據(jù)返回，OC 只能被動(dòng)的等待)疮薇。
