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

标签: 移动开发 weex
21人阅读 评论(0) 收藏 举报
分类:

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 for VUE前端工程师

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。
  • 2017年05月16日 13:40

weex 入门Demo

  • 2018年01月10日 12:00
  • 55.06MB
  • 下载

weex android Demo

  • 2018年01月10日 12:03
  • 53.98MB
  • 下载

Weex工作原理浅析

  • 2017年12月03日 17:24
  • 12.74MB
  • 下载

weex在iOS环境加载本地图片的方法

从weex的API中,我们知道加载本地图片的方法是: 在 iOS 中,Weex 会在 bundle resources 中查找。例如,image 组件的 src 属性为 local:///ap...
  • CodingFire
  • CodingFire
  • 2018-03-12 16:13:46
  • 204

ios集成weex案例

  • 2017年03月29日 15:57
  • 21.81MB
  • 下载

关于cocos2dx嵌入到iOS应用中遇到触摸机制异常的问题

第一点:在项目进行中,出现的触摸被中断的问题,即:我在iOS 项目中的首页使用的cocos2dx写的,为了使首页能够有游戏中的动画效果。在交互过程中,首页精灵的触摸触发相应的方法中,我使用的是coco...
  • rookie_cainiao
  • rookie_cainiao
  • 2017-07-28 10:58:01
  • 143

Weex iOS 端集成的一些感想

身边一直充斥着Weex的消息(从内测到现在),几乎每一个移动端的人都在我面前提过它。我隐约的知道它其实是和ReactNative类似的东西。因为年初也玩了会儿RN,弄环境弄了挺久了,然后因为教程少,写...
  • voidxinnn
  • voidxinnn
  • 2016-12-15 14:07:30
  • 2734

与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)

全平台使用一套代码
  • doubleuto
  • doubleuto
  • 2017-06-03 23:20:26
  • 1301

Weex开发中native如何主动发送事件到weex

项目中有个weex页面需要选择时间,在不清楚weex写时间选择器复不复杂的情况下,我觉得还是直接调用native的时间选择控件,选择完时间之后把时间传递到weex然后刷新页面。 但问题也随之而来:我...
  • voidxinnn
  • voidxinnn
  • 2016-12-15 14:10:20
  • 4960
    个人资料
    等级:
    访问量: 0
    积分: 20
    排名: 0
    文章分类
    文章存档