Weex 布局及Native交互（IOS版）

本文主要是对weex布局和交互进行一些探索，将从以下几个方面来简要的总结下，欢迎拍砖

1:Weex布局

2:Weex事件监听

3:Weex和Native交互。

 

闲话不多说，让我们欢乐的直奔主题吧。

现在是一个看脸的时代，现在不仅人就连app都看脸，一个奇丑无比的应用是会被人狠狠的唾弃的。一个好的界面离不开布局，Weex也一样。

 Weex布局：

weex布局系统主要包括三类：盒模型、FlexBox和Position；参考资料：https://weex-project.io/cn/references/common-style.html

注意：
       1(盒模型)：只支持像素单位；<Image> <text>无法只定义一个或则几个圆角。

       2(FlexBox): 是Weex默认且唯一的布局模型;

       3(position): 在 Android 下，超出部分将不可见;

Weex元素事件：

监听事件设置方法：我们可以在weex元素上添加如下类似的监听器：

eg:

这样，点击<Text>元素就会调用js的clickEvent方法了，在js中就可以处理Native交互的逻辑了。

那么如何使js和Native进行交互呢？不要着急，请接着往下看，嘿嘿。

JS和Native交互

1:Weex组件之间的消息传递：

添加监听：$on(type,handler)

发送消息：$emit(type,param)

需要注意的就是：$emit 、$on和$off 前面调用的对象实例需要是同一个。

 

2:weex实例之间的通信方式   BroadcastChannel 

3.JS和Native之间的调用

1）js调用Native

weex sdk提供了自定义module、handler和component接口。

自定义module：

   1.自定义类实现WXModuleProtocol 协议

   2.@synthesize weexInstance 为module实例绑定一个weex实例

   3.如果js需要调用native的某个方法，需要添加WX_EXPORT_METHOD(@selector(methodName))宏，对方法进行申明，PS：默认方法调用是在主线程中调用的，如需制定线程，需要实现-(NSThread *)targetExecuteThread方法返回指定的线程

WXCallback 自调用一次js代码

WXKeepAliveCallback 如果设置YES，每次都调用JS代码

 

自定义component

   1.自定义类需要继承自WXComponent。

   2. 通过[WXSDKEngine registerComponent:@"compnentname" withClass:class]去注册自定义的component。

   3.由于native的component由Weex去管理，我们可以Hook掉自定义的Component 的生命周期，做自己的处理，比如显示我们自定义的视图。

 

在Weex中直接使用注册的名字即可。

 

2)Native调用JS

官方提供每一个自定义的Component都可以调用fireEvent，!_。_！暂时没找到在JS中如何写fireEvent方法。

 

globalEvent 用于监听持久性事件，例如定位信息，陀螺仪等的变化。

在Native中发送GlobalEvet消息。

在weex中添加globalevent 监听事件，即可实现Native调用JS