美文网首页
三:Weex&Native交互

三:Weex&Native交互

作者: 二毛的希望 | 来源:发表于2018-06-05 09:19 被阅读0次

    一:写在前面

    在深入使用weex的过程中,发现了不少问题。等以后再和大家分享,今天聊一下weex和native的交互。
    weex和native的交互可以大致分为三类,每一类都给大家举个🌰。
    具体分类如下。

    1.js调用native

    2.native调用js

    3.js调用native处理完成后回调js

    这里所列举的分类有个共同点,就是需要跟写js的同事商量好一套行为准则。具体来说就是需要方法名相同。参数之间也要规定好。后面我会讲到。给一个范例。

    ps:我没有太监,只是最近比较忙。

    二:js调用native

    2.1 情景假设

    假设前台同事写好了js代码,代码里面实现了一个listview,native的同事需要知道当页面点击的时候,你点击了哪一个cell/item,需要对应的id去做一些本地的操作。

    2.2 具体实现

    1.创建一个实现了<WXModuleProtocol>接口的类。
    2.在类中实现WX_EXPORT_METHOD(@selector/*你的方法名*/);
    3.实现对应的方法。
    4.在weex engine init后将该类注册。
    

    2.3 举个🌰

    1.我们首先创建一个类,它实现了接口<WXModuleProtocol>
    @interface WeexEventModule : NSObject<WXModuleProtocol>
    
    @end
    
    2.我们将需要实现的代码暴露出去。
    WX_EXPORT_METHOD(@selector(jsCalledNativeGotoProgramDetailWithProgramID:));
    
    3.实现对应的方法
    - (void)jsCalledNativeGotoProgramDetailWithProgramID:(id)object{
        /*do something*/
    
        /*object是js同事传过来给你的东西*/
    }
    
    4.在weex engine init的地方注册module,@"event"是组件名。
    js同事可以通过weex.require("event").方法名来调用你定义好的方法
    [WXSDKEngine registerModule:@"event" withClass:[WeexEventModule class]]
    
    

    三:native调用js

    3.1 情景假设:

    假设在我们navigationbar上面有个小按钮,点击之后,要告知下方的js界面请求接口刷新数据。

    3.2 具体实现

    1.调用instance的fireGlobalEvent方法,注册一个事件,参数有两个,第一个是事件名,第二个是传递的参数。
    2.在具体的地方出发这个方法即可。
    

    3.3举个🌰

    1.首先我们创建一个方法。
    
    -(void)refreshWeexPage:(NSNotification *)notif{
        NSDictionary * dict = notif.userInfo;
        //两个参数,第一个事件名,第二个参数值
        [weexInstance fireGlobalEvent:@"geolocation" params:dict];
    }
    
    2.调用这个方法。
    
    3.前端同事需要实现。
    
     var globalEvent = require('@weex-module/globalEvent');
               globalEvent.addEventListener("geolocation",function(e){
                    //refresh page or do something
    
    });
    

    四:js调用native 再回调js

    4.1 情景假设

    当js界面create的时候,js告诉我们,一会儿js要去请求数据,需要一些设备信息,什么uuid,什么devicetype,分辨率啊之类的东西。就需要一个这样的过程。即js->native->js。

    4.2 具体实现

    步骤类似于js->native,稍有不同。

    1.创建一个实现了<WXModuleProtocol>接口的类。
    2.实现一个含有(WXModuleKeepAliveCallback)的方法。
    3.在类中注册WX_EXPORT_METHOD(@selector/*上面提到的方法*/);
    4.在weex engine init后将该类注册。
    

    4.3 举个🌰

    按照我们的情景假设。
    1.我们首先创建一个类,它实现了接口<WXModuleProtocol>
    @interface WeexEventModule : NSObject<WXModuleProtocol>
    
    @end
    
    2.实现一个包含WXModuleKeepAliveCallback的方法。
    
    - (void)jsCalledNativeWhenRenderFinished:(NSDictionary *)dict callBack:(WXModuleKeepAliveCallback)callBack{
        NSMutableDictionary *dataDict = @[].mutableCopy;
        //do something,
        //WXModuleKeepAliveCallback 第一个参数是返回给js的数据。
        //第二个是发送完消息是否销毁。不销毁的话会一直存在。
        callBack(dataDict,NO);
    }
    
    4.在weex engine init的地方注册module,@"event"是组件名。
    js同事可以通过weex.require("event").方法名来调用你定义好的方法
    [WXSDKEngine registerModule:@"event" withClass:[WeexEventModule class]]
    

    五:规则约定以及提醒

    5.1规则约定

    你可以这样跟前台大哥定义你们的接口。这样的接口文档比较清晰,或许可以减少一点你们的沟通成本。因为无关平台特性,接口定义最好不要出现关于平台特性的代码。比如说iOS的NSString* 和Android的String。写好之后,为开发增加一份约束。Android,iOS 通用即可。

    Snip20180605_1.png

    5.2 提醒

    1.方法名保持一致
    2.事件的处理native端,我用的通知。不知道有没有什么更好的办法。

    6 下节预告

    基于AFN和SSZipArchive封装的下载器+解压器,为weex的联调铺路。

    如果你觉得我的文章可以帮到你,帮我点个赞。谢谢

    我是二毛,一个集智慧和逗比于一身的iOSer

    相关文章

      网友评论

          本文标题:三:Weex&Native交互

          本文链接:https://www.haomeiwen.com/subject/dnbysftx.html