本文主要是对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