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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小作坊

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

851
来自专栏游戏杂谈

Bootstrap的表单设计器

如果是内部系统或是自己需要写个简单点的页面,可以直接使用Twitter的Bootstrap,而这个表单器也是非常好用,直接拖拽,设置属性,得到一个很漂亮的表单...

2422
来自专栏前端杂货铺

文本框的属性监测

之前很简单的认为对input的value监测就用2个事件可以搞定兼容性,知道我看了司徒正美的这篇博客,还是感慨自己不够深入,接触的太少。   对于IE全系列,可...

3206
来自专栏州的先生

快速掌握使用Selenium进行网页操作

1383
来自专栏技术墨客

React中的模式对话框 转

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题,本文来自Da...

793
来自专栏React Native开发圈

React Native 图片查看组件

npm i react-native-image-zoom-viewer--save

1162
来自专栏web开发

VUE路由去除#问题

最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看。为了解决此问题,大家一般都会想到:mode: 'history'。可是在开发...

2794
来自专栏DeveWork

替换WordPress 自带默认的 jQuery库, jQuery库页脚加载

在开发WordPress 主题或者WordPress 插件时候,常常要通过wp_enqueue_script这个钩子挂载WordPress 自带的 jQuery...

22910
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用④TodoList下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

3745
来自专栏谦谦君子修罗刀

RN项目第一节

一、项目说明 本项目为模仿美团的项目,采用的是网上提供的API接口。导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-na...

3526

扫码关注云+社区

领取腾讯云代金券