本节学习目标
如何自定义一个组件
什么时候该自定义组件?
当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);
