本節(jié)學(xué)習(xí)目標(biāo)

如何自定義一個組件

什么時候該自定義組件?

當(dāng)weex提供給我們的默認(rèn)組件滿足不了我們的需求的時候這個時候,就需要自定義組件了。

下面就以iOS 自定義組件為例演示一下 如何自定義一個AR 組件

使用方式如下

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

你可以這這段代碼寫到你的vue文件中,使用app左上角的掃描功能進(jìn)行掃描測試

效果圖如下

Scenekit_17.gif

接下來是自定義組件(component)的詳細(xì)步驟

• step-1

創(chuàng)建一個類繼承WXComponent

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

• step-2

上述ar標(biāo)簽有一個屬性name 接下來看如何實(shí)現(xiàn)

在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 定義了很多數(shù)據(jù)轉(zhuǎn)換方法

• step-3
  我們知道,vue.js 的標(biāo)簽屬性是進(jìn)行了數(shù)據(jù)綁定了的,如果我們在js中修改了name的值,頁面會自動刷新,這個是怎么做到的呢？

當(dāng)js修改屬性的值之后,會自動調(diào)用下面的方法

-(void)updateAttributes:(NSDictionary *)attributes{
  // 處理 刷新邏輯
 }

• step-4

如何給組件自定義綁定事件,如下

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

接下來 我們看看原生中如何觸發(fā)這個事件

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

上面是介紹了定義組件的基本用法,下面一步很重要的內(nèi)容

• step-5

我們要讓weex框架識別這個我們自定義的組件,必須注冊這個組件,如下

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