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. 使用WXSDKEngine的WXSDKEngine.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. 使用WXSDKEngine的WXSDKEngine.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使用WKWebView，android使用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