本節(jié)學(xué)習(xí)目標(biāo)
如何自定義一個(gè)組件
什么時(shí)候該自定義組件?
當(dāng)weex提供給我們的默認(rèn)組件滿足不了我們的需求的時(shí)候這個(gè)時(shí)候,就需要自定義組件了例诀。
下面就以iOS 自定義組件為例演示一下 如何自定義一個(gè)AR 組件
使用方式如下
<template>
<div class="root">
<ar class="model" name='boss.dae'> </ar>
</div>
</template>
你可以這這段代碼寫到你的vue文件中,使用app左上角的掃描功能進(jìn)行掃描測(cè)試
效果圖如下
Scenekit_17.gif
接下來是自定義組件(component)的詳細(xì)步驟
- step-1
創(chuàng)建一個(gè)類繼承WXComponent
AC26A898-6617-4663-9B29-38FABB90C700.png
- step-2
上述ar標(biāo)簽有一個(gè)屬性name 接下來看如何實(shí)現(xiàn)
在WXARComponent.m文件定義一個(gè)屬性
@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 定義了很多數(shù)據(jù)轉(zhuǎn)換方法
- step-3
我們知道,vue.js 的標(biāo)簽屬性是進(jìn)行了數(shù)據(jù)綁定了的,如果我們?cè)趈s中修改了name的值,頁面會(huì)自動(dòng)刷新,這個(gè)是怎么做到的呢？
當(dāng)js修改屬性的值之后,會(huì)自動(dòng)調(diào)用下面的方法
-(void)updateAttributes:(NSDictionary *)attributes{
// 處理 刷新邏輯
}
- step-4
如何給組件自定義綁定事件,如下
<ar class="model" :name='modelName' @update="update"> </ar>
接下來 我們看看原生中如何觸發(fā)這個(gè)事件
[self fireEvent:@"go" params:@{@"name":self.filename}];
上面是介紹了定義組件的基本用法,下面一步很重要的內(nèi)容
- step-5
我們要讓weex框架識(shí)別這個(gè)我們自定義的組件,必須注冊(cè)這個(gè)組件,如下
WXSDKEngine.registerComponent("ar", with: WXARComponent.self);
