关于 Weex 自定义(原生事件)和(原生控件)流程

    从去年11月份,开始捣鼓 Weex 相关的一些东西,直到现在也踩了不少的坑,前两天在公司内部搞了个小分享,现在把分享的部分东西贴出来供大家参考。

前提是:你 iOS 工程中已经接入了 WeexSDK,如果还没接入可以查看我的另一篇博客,地址:http://www.cnblogs.com/shisishao/p/6439850.html,有集成 WeexSDK 到工程中的方法;

一、自定义事件Module流程:

  1、自定义事件Module(客户端准备):

    1.1自定义 module 然后必须遵循 WXModuleProtocol 协议

    1.2、必须添加宏 WX_EXPORT_METHOD, 它可以被 weex 识别,它的参数是 JavaScript 调用 module 指定方法的参数

    1.3、添加 @synthesized weexInstance,每个moudle对象被绑定到一个指定的实例上

    1.4、Weex 的参数可以是 String 或者Map

    1.5、Module 支持返回值给 JavaScript中的回调,回调的类型是 WXModuleCallback, 回调的参数可以是 String 或者 Map

  2、注册 module(Weex 和 Native 建立连接)

      通过调用 WXSDKEngine 中的 registerModule:withClass 方法来注册自己的 module,例如:

    [WXSDKEngine registerModule:@"event" withClass:NSClassFromString(@"WXEventModule")];

    注册完之后,也就是已经和Weex建立了连接。

二、自定义原生控件流程:

  1、自定义控件(客户端准备):

    1.1、先创建一个继承自WXComponent的类重写以下方法:

      - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance;

      // 加载控件

      - (UIView *)loadView;

      // 更新样式

      - (void)updateStyles:(NSDictionary *)styles;

      // 回传数据:

      - (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params;

    2、注册控件(Weex 和 Native 建立连接):

      2.1、注册一个 component ,调用 WXSDKEngine 中的 registerComponent:withClass: 方法。

      2.2、Native注册:

        [WXSDKEngine registerComponent:@"show_image_view" withClass:NSClassFromString(@"KBHShowImageViewWXComponent")];

      2.3、Weex实现:

        <show_image_view class="my_cus_view" 

          @refresh="onrefresh" 

          :style="{ height: after_height + 'px'}" 

          value="show" 

          view_id="2" 

          :imglist="afterMedia"></show_image_view>

         // 实现该方法

        onrefresh: function (result) {}

 如果转载,请注明出去:http://www.cnblogs.com/shisishao/p/Weex.html

posted @ 2017-04-21 13:08  小码哥伍六七  阅读(6036)  评论(0编辑  收藏  举报