# JS與OC交互協議 ### iOS與H5交互說明 iOS與H5交互，采用是JavaScriptCore方式。原理是iOS端在WebView加載完一個URL鏈接的時候，手動向H5頁面綁定一個`JSContext`對象。利用這個JSContext對象，可以實現OC與JS間的雙向交互。**注意：JSContext對象是在iOS的`webViewDidFinishLoad:`回調里完成綁定的，在完成綁定前無法使用JS與OC的任何交互。** ### JS調用OC接口 ##### JS開始調用OC接口前，有幾個前提條件： + js的window.isReady方法已經觸發過了，JS才能調用OC提供的方法。原因是iOS會在JSContext對象綁定成功后，才會向js端調用isReady方法，所以js只有等isReady觸發了，才能通過JSContext調用OC方法。 + iOS在綁定JSContext對象的時候，要約定好一個字段，然后OC會將原生方法注冊到網頁window對象的這個字段上。比如`window.xhxapp`。 + js端如果要異步接收原生方法的返回結果，需要在全局作用域內定義好回調方法 ? ##### JS示例代碼： js調用OC原生方法，同步獲取用戶基本信息 ````js // 約定好獲取用戶信息接口注冊到window的xhxapp屬性上 // getUserInfo方法是一個同步方法，可以js端可以直接獲取到返回值 // 返回的對象可以是json字符串 var info = window.xhxapp.getUserInfo() ```` js調用OC原生方法，拍照上傳作業圖片，并異步獲取上傳結果 ```js // 假設約定好作業相關的OC接口都注冊到window的homework屬性上 window.homework.uploadHomeworkPicture(questionID) // 在全局作用域內定義好回調方法，用于接收返回值 // 原生方法會在上傳完作業圖片的時候，間接調用該回調方法 function homeworkPictureDidUploaded(questionID, picUrl) { // do something... } ``` ##### JS里調用通用原生接口： ```swift /** 跳轉到課程詳情 @param productId 商品ID(string類型) */ xhxapp.gotoCourseDetail(productId); /** 關閉當前頁面 */ xhxapp.finish(); /** 獲取用戶信息，已json字符串形式返回。主要字段如下： memberId: 用戶id token: 用戶登錄唯一標識 memberType: 用戶類型 */ xhxapp.getUserInfo(); /** toast提示 @param msg 提示語(string類型) */ xhxapp.toast(msg); /** 顯示對話框 @param title 標題(string字符串) @param msg 消息(string字符串) @param actions 點擊事件(一個json數組字符串)，每個數組元素字段如下： title: 事件標題(string字符串，比如“取消”) callback: 事件的js回調方法(string字符串) 示例： var actions = "[{'title': '取消', 'callback': 'cancelPay'}, {'title': '確定', 'callback': 'confirmPay'}]"; xhxapp.confirm("溫馨提示", "是否支付訂單？", actions); */ xhxapp.confirm(title, msg, actions); ``` ### OC調用JS接口 ##### OC在調用JS方法時的注意事項： + js方法應該申明到全局作用域內，否則OC獲取不到該方法 + 如果在`webViewDidFinishLoad:`直接用過JSContext調用js方法，可能會出現調用無效的請求。為了避免此類問題，推薦以`setTimeout`方式調用js方法 ##### 示例代碼： OC在webViewDidFinishLoad:中調用js的`isReady`方法 ```objective-c // setTimeout是JS的自帶方法 // 這里使用setTimeout的目的是為了將isReady方法放到js調用隊列的最后 JSValue *isReadyFunc = self.jsContext[@"isReady"]; if (isReadyFunc) { [self.jsContext[@"setTimeout"] callWithArguments:@[isReadyFunc, @100]]; } ``` OC在JS發起的原生方法中調用js的setUserInfo方法 ```objective-c // 注意，JavaScriptCore支持NSDictionary、NSArray類型作參數傳給js方法 NSDictionary *userInfo = ...; [self.jsContext[@"setUserInfo"] callWithArguments:@[userInfo]]; ``` ##### JS提供給原生調用的通用接口定義： ```swift /** iOS原生初始化完成后調用本方法，告訴js已經準備好了 */ function isReady(); /** * return boolean 類型返回值： true h5已經處理了返回，native不處理； false h5沒有處理返回，native直接返回上級原生頁面 */ function gobackIfNeeded(); ``` ### APP喚醒 定義scheme: com.mistong.kklonline ### UserAgent WebView的默認UserAgent為："xxxx XHX/1.3.0", 其中xxxx為系統默認UserAgent。''/''后為app版本號