six_Flower的博客

记录工作中的一些经验以及总结

Weex与Android、IOS的一些事(一)

Weex –Android学习

标签(空格分隔): weex 拓展Android


一、拓展Android的功能:

  1. Module 拓展非ui的特定功能 ( WXModule )
  2. component 拓展实现特别功能的Native控件( WXComponent)
  3. Adapter 拓展Weex对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。

二、WXSDKEngine 是 Weex 对外的总入口。

  1. 设置相关 Adapter 和获取 adapter。
  2. 注册自定义 module 和 component
  3. 重置 JSFramework

三、Native和JS通信

  1. 自定义事件通知(多用于某个自定义控件进行事件通知,例如自定义点击事件,响应下拉事件等。)
public void fireEvent(String elementRef,final String type, final Map<String, Object> data,final Map<String, Object> domChanges){  }

public void fireEvent(String elementRef,final String type, final Map<String, Object> data){
  fireEvent(elementRef,type,data,null);
}

public void fireEvent(String elementRef, String type){
  fireEvent(ref,type,new HashMap<String, Object>());
}

elementRef:事件发生的控件 ID。

type: 自定义事件,Weex 默认以 onXxxxx 开头为自定义事件。onPullDown (下拉事件)。

data: 需要透出的参数,例如当前控件的大小,坐标等其他信息。

domChanges:更新 ref 对应控件的 Attribute 和 Style。
2. 事件回调(多用于 Module 回调,例如定位 Module 完成后需要通知 JS)

public class WXLocation extends WXModule {

  @JSMethod
  public void getLocation(JSCallback callback){
    //获取定位代码.....
    Map<String,String> data=new HashMap<>();
    data.put("x","x");
    data.put("y","y");
    //通知一次
    callback.invoke(data);
    //持续通知
    callback.invokeAndKeepAlive(data);

    //invoke方法和invokeAndKeepAlive两个方法二选一
  }
}

ps:其中JsCallback就是事件回调的接口
3. 注册滑动事件
Weex 获取滑动事件可以通过WXSDKInstance 注册 registerOnWXScrollListener 监听
4. 动态适配容器
5. 使用WXSDKInstance.setSize(int width, int height) 来改变容器的大小。

/**
   *
   * @param width 容器宽度
   * @param height 容器高度
   */
  public void setSize(int width, int height){};

四、WXComponent

  1. initComponentHostview create一个view,然后将view返回给自定义view

2.1 weex-iOS插件扩展方式介绍

五、iOS组件Component扩展步骤

iOS端
1. 创建自定义的组件继承WXComponent
2. 重写- (instancetype)initWithRef:(NSString )ref type:(NSString )type styles:(NSDictionary )styles attributes:(NSDictionary )attributes events:(NSArray )events weexInstance:(WXSDKInstance )weexInstance方法
3. 现实自定义的UI样式
4. 支持js方法在特殊的状态调用重写addEvent和removeEvent方法,在需要的位置调用fireEvent方法执行对应的js方法
5. 支持js调模块扩展出来的方法,编写扩展方法WX_EXPORT_METHOD(@selector(method))扩展
6. 使用WXSDKEngine的+registerComponent:withClass:去注册

js端
1. 直接在需要该组件的template中使用
2. 如果组件需要传递参数,则可以通过:key=value的形式传递,方法@methodName=JSmethod,实现js方法
3. 调用扩展方法:this.$refs.refName.methodName

iOS模块Module扩展步骤

iOS端
1. 创建自定义的模块实现协议
2. 实现自定义的功能并callback回调给js
3. 使用WX_EXPORT_METHOD或WX_EXPORT_METHOD_SYNC来抛出native方法给js
4. 使用WXSDKEngine的+registerModule:withClass:去注册

js端
1. 直接在需要该组件的script中使用weex.requireModule()获得已注册的模块
2. 在需要的位置调用注册的方法


六、weex-android插件扩展方式介绍

android组件Component扩展步骤

android端
1. 创建自定义的组件继承WXComponent/WXVContainer
2. 使用initComponentHostView(context)初始化,initView()方法已过时
3. 现实自定义的UI样式, 通过添加注解@WXComponentProp设置属性
4. 使用instance.fireEvent()方法执行对应的js方法
5. 支持js调模块扩展出来的方法,编写扩展方法@JSMethod(uiThread = false或true)扩展
6. 使用WXSDKEngineWXSDKEngine.registerComponent()去注册

js端
1. 直接在需要该组件的template中使用
2. 如果组件需要传递参数,则可以通过:key=value的形式传递,方法@methodName=JSmethod,实现js方法
3. 调用扩展方法:this.$refs.refName.methodName

七、android模块Module扩展步骤

android端

  1. 创建自定义的模块继承WXModule
  2. 实现自定义的功能并callback回调给js
  3. 使用@JSMethod(uiThread = false或true)将自定义的方法抛给js
  4. 使用WXSDKEngineWXSDKEngine.registerModule()去注册

js端

  1. 直接在需要该组件的script中使用weex.requireModule()获得已注册的模块
  2. 在需要的位置调用注册的方法

八、web组件Component扩展步骤

js端
1.使用npm install加载weex-vue-render组件
2.使用Weex.registerComponent(‘name’, component); 注册组件
3.在webpack.config中使用weex.install(components)加载所有组件
4.调用扩展方法:
web组件Module扩展步骤

js端
1. 使用npm install加载weex-vue-render组件
2. 使用Weex.registerModule(‘name’, module)
3. 在webpack.config中使用weex.install(modules)加载所有组件
4.调用扩展方法:const moduleName = weex.requireModule(‘ModuleName’); 调用模块方法moduleName.xx()


九、Weex 交互(有相关经验的小伙伴可忽略)

3.1 Weex-web和native交互iOS使用WKWebViewandroid使用WebView
Weex-web端

  1. Weex-web调用native提供的方法
    iOS:webkit.messageHandlers.weexCallHandler.postMessage(data)
    android: window.dianwoda.weexCallHandler(data);

  2. 解决方案:使用callHandler的调用方式来实现
    参数:
    a. name:调用native的方法名,即约定的具体需要调用native的什么方法,例:setHeaderTitle(设置header的title)
    b. params:传给native端的参数,例:{‘title’: ‘这是商品详情页的标题’}
    c. onSuccess:调用native方法成功后的回调方法名
    d. onFail:调用native的方法名,即约定的具体需要调用native的什么方法,例:setHeaderTitle(设置header的title)

  3. 问题:由webpack打包生成的Weex-web的vuejs文件的methods方法不在window下native无法调用到,
    解决方案:

var hybrid = {}  
if (weex.config.env.platform === 'Web') {  
    window.Hybrid = hybrid
}

将方法绑到window下面才能调到

iOS端
1. iOS调用Weex-web的方法回传数据:[webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {}];
android端
1.. android调用Weex-web的方法回传数据:通过getSettings()获得WebSettings,然后用setJavaScriptEnabled()调用Js


十、Weex和iOS交互

  1. Weex调用iOS的方法
    方式1:通过iOS注册的Module方式来抛出方法供weex调用
  2. iOS调用weex的方法

    方式1:拿到weex页面的instanceId通过fireEvent方法调用weex方法
    如:[[WXSDKManager bridgeMgr] fireEvent:weexInstance.instanceId ref:WX_SDK_ROOT_REF type:type params:params domChanges:nil];

    方式2:在组件中使用fireEvent方法来调用weex方法

    方式3:使用fireGlobalEvent来通知调用weex方法

注:fireEvent方式是通过JSContext实现,fireGlobalEvent是通过通知实现

十一、Weex和android交互

1.Weex调用android的方法

方式1:通过android注册的Module方式来抛出方法供weex调用

  1. android调用weex的方法

方式1:拿到weex页面的instance通过fireEvent(getRef(), numClick, data, null);方法来调用weex方法

方式3:使用fireGlobalEvent来广播调用weex方法

注:fireEvent方式是通过webView调用js实现,fireGlobalEvent是通过广播实现

部分资料摘自点我达
weex

阅读更多
文章标签: 移动开发 weex
个人分类: weex ios
上一篇一些微不足道的Android总结(一)
下一篇MVP模式解析
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭