一：寫(xiě)在前面
在深入使用weex的過(guò)程中，發(fā)現(xiàn)了不少問(wèn)題。等以后再和大家分享，今天聊一下weex和native的交互。
weex和native的交互可以大致分為三類(lèi)，每一類(lèi)都給大家舉個(gè)??。
具體分類(lèi)如下。
1.js調(diào)用native
2.native調(diào)用js
3.js調(diào)用native處理完成后回調(diào)js
這里所列舉的分類(lèi)有個(gè)共同點(diǎn)，就是需要跟寫(xiě)js的同事商量好一套行為準(zhǔn)則。具體來(lái)說(shuō)就是需要方法名相同。參數(shù)之間也要規(guī)定好。后面我會(huì)講到。給一個(gè)范例。
ps：我沒(méi)有太監(jiān)，只是最近比較忙。
二：js調(diào)用native
2.1 情景假設(shè)
假設(shè)前臺(tái)同事寫(xiě)好了js代碼，代碼里面實(shí)現(xiàn)了一個(gè)listview，native的同事需要知道當(dāng)頁(yè)面點(diǎn)擊的時(shí)候，你點(diǎn)擊了哪一個(gè)cell/item，需要對(duì)應(yīng)的id去做一些本地的操作。
2.2 具體實(shí)現(xiàn)
1.創(chuàng)建一個(gè)實(shí)現(xiàn)了<WXModuleProtocol>接口的類(lèi)。
2.在類(lèi)中實(shí)現(xiàn)WX_EXPORT_METHOD(@selector/*你的方法名*/);
3.實(shí)現(xiàn)對(duì)應(yīng)的方法。
4.在weex engine init后將該類(lèi)注冊(cè)。
2.3 舉個(gè)??
1.我們首先創(chuàng)建一個(gè)類(lèi)，它實(shí)現(xiàn)了接口<WXModuleProtocol>
@interface WeexEventModule : NSObject<WXModuleProtocol>
@end
2.我們將需要實(shí)現(xiàn)的代碼暴露出去。
WX_EXPORT_METHOD(@selector(jsCalledNativeGotoProgramDetailWithProgramID:));
3.實(shí)現(xiàn)對(duì)應(yīng)的方法
- (void)jsCalledNativeGotoProgramDetailWithProgramID:(id)object{
/*do something*/
/*object是js同事傳過(guò)來(lái)給你的東西*/
}
4.在weex engine init的地方注冊(cè)module，@"event"是組件名。
js同事可以通過(guò)weex.require("event").方法名來(lái)調(diào)用你定義好的方法
[WXSDKEngine registerModule:@"event" withClass:[WeexEventModule class]]
三：native調(diào)用js
3.1 情景假設(shè)：
假設(shè)在我們navigationbar上面有個(gè)小按鈕，點(diǎn)擊之后，要告知下方的js界面請(qǐng)求接口刷新數(shù)據(jù)。
3.2 具體實(shí)現(xiàn)
1.調(diào)用instance的fireGlobalEvent方法，注冊(cè)一個(gè)事件，參數(shù)有兩個(gè)，第一個(gè)是事件名，第二個(gè)是傳遞的參數(shù)。
2.在具體的地方出發(fā)這個(gè)方法即可。
3.3舉個(gè)??
1.首先我們創(chuàng)建一個(gè)方法。
-(void)refreshWeexPage:(NSNotification *)notif{
NSDictionary * dict = notif.userInfo;
//兩個(gè)參數(shù)，第一個(gè)事件名，第二個(gè)參數(shù)值
[weexInstance fireGlobalEvent:@"geolocation" params:dict];
}
2.調(diào)用這個(gè)方法。
3.前端同事需要實(shí)現(xiàn)。
var globalEvent = require('@weex-module/globalEvent');
globalEvent.addEventListener("geolocation",function(e){
//refresh page or do something
});
四：js調(diào)用native 再回調(diào)js
4.1 情景假設(shè)
當(dāng)js界面create的時(shí)候，js告訴我們，一會(huì)兒js要去請(qǐng)求數(shù)據(jù)，需要一些設(shè)備信息，什么uuid，什么devicetype，分辨率啊之類(lèi)的東西。就需要一個(gè)這樣的過(guò)程。即js->native->js。
4.2 具體實(shí)現(xiàn)
步驟類(lèi)似于js->native，稍有不同。
1.創(chuàng)建一個(gè)實(shí)現(xiàn)了<WXModuleProtocol>接口的類(lèi)。
2.實(shí)現(xiàn)一個(gè)含有(WXModuleKeepAliveCallback)的方法。
3.在類(lèi)中注冊(cè)WX_EXPORT_METHOD(@selector/*上面提到的方法*/);
4.在weex engine init后將該類(lèi)注冊(cè)。
4.3 舉個(gè)??
按照我們的情景假設(shè)。
1.我們首先創(chuàng)建一個(gè)類(lèi)，它實(shí)現(xiàn)了接口<WXModuleProtocol>
@interface WeexEventModule : NSObject<WXModuleProtocol>
@end
2.實(shí)現(xiàn)一個(gè)包含WXModuleKeepAliveCallback的方法。
- (void)jsCalledNativeWhenRenderFinished:(NSDictionary *)dict callBack:(WXModuleKeepAliveCallback)callBack{
NSMutableDictionary *dataDict = @[].mutableCopy;
//do something，
//WXModuleKeepAliveCallback 第一個(gè)參數(shù)是返回給js的數(shù)據(jù)。
//第二個(gè)是發(fā)送完消息是否銷(xiāo)毀。不銷(xiāo)毀的話(huà)會(huì)一直存在。
callBack(dataDict,NO);
}
4.在weex engine init的地方注冊(cè)module，@"event"是組件名。
js同事可以通過(guò)weex.require("event").方法名來(lái)調(diào)用你定義好的方法
[WXSDKEngine registerModule:@"event" withClass:[WeexEventModule class]]
五：規(guī)則約定以及提醒
5.1規(guī)則約定
你可以這樣跟前臺(tái)大哥定義你們的接口。這樣的接口文檔比較清晰，或許可以減少一點(diǎn)你們的溝通成本。因?yàn)闊o(wú)關(guān)平臺(tái)特性，接口定義最好不要出現(xiàn)關(guān)于平臺(tái)特性的代碼。比如說(shuō)iOS的NSString* 和Android的String。寫(xiě)好之后，為開(kāi)發(fā)增加一份約束。Android，iOS 通用即可。
5.2 提醒
1.方法名保持一致
2.事件的處理native端，我用的通知。不知道有沒(méi)有什么更好的辦法。
6 下節(jié)預(yù)告
基于A(yíng)FN和SSZipArchive封裝的下載器+解壓器，為weex的聯(lián)調(diào)鋪路。
如果你覺(jué)得我的文章可以幫到你，幫我點(diǎn)個(gè)贊。謝謝
我是二毛，一個(gè)集智慧和逗比于一身的iOSer
