weex-28-自定义AR组件

本节学习目标

如何自定义一个组件

什么时候该自定义组件?

当weex提供给我们的默认组件满足不了我们的需求的时候这个时候,就需要自定义组件了。

下面就以iOS 自定义组件为例演示一下 如何自定义一个AR 组件

使用方式如下

<template>
<div class="root">
    <ar class="model" name='boss.dae'> </ar>
</div>
</template>

你可以这这段代码写到你的vue文件中,使用app左上角的扫描功能进行扫描测试

效果图如下

Scenekit_17.gif

接下来是自定义组件(component)的详细步骤

• step-1

创建一个类继承WXComponent

AC26A898-6617-4663-9B29-38FABB90C700.png

• step-2

上述ar标签有一个属性name 接下来看如何实现

在WXARComponent.m文件定义一个属性

@property(nonatomic,strong)NSString *fileName; // 模型文件的名字

然后重写下面的方法

-(instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance{
  if(self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]){
    self.fileName = [WXConvert NSString:attributes[@"name"]];
  }
  return self;
}

解释一下

[WXConvert NSString:attributes[@"name"]] WXConvert 定义了很多数据转换方法

• step-3
  我们知道,vue.js 的标签属性是进行了数据绑定了的,如果我们在js中修改了name的值,页面会自动刷新,这个是怎么做到的呢？

当js修改属性的值之后,会自动调用下面的方法

-(void)updateAttributes:(NSDictionary *)attributes{
  // 处理 刷新逻辑
 }

• step-4

如何给组件自定义绑定事件,如下

<ar class="model" :name='modelName' @update="update"> </ar>

接下来 我们看看原生中如何触发这个事件

[self fireEvent:@"go" params:@{@"name":self.filename}];

上面是介绍了定义组件的基本用法,下面一步很重要的内容

• step-5

我们要让weex框架识别这个我们自定义的组件,必须注册这个组件,如下

WXSDKEngine.registerComponent("ar", with: WXARComponent.self);