自定义组件开发

在src/components中新建组件目录如x-button，新建index.acss index.axml index.json index.ts四个文件（命名不限制）

自定义组件开发

.acss

.btn {
  background-color: white;
}
.btn-main-text {
  color: red;
}
.btn-default {
  color: #red;
}

.axml

<view class="btn btn-default" data-count="{{data.count}}" onTap="buttonClick">
  <text class="btn-main-text">组件点击测试：{{ data.text }}{{ data.count }}</text>
</view>

.json

声明是一个组件

{
  "component": true
}

.ts

import { Event, Props, console, Component, Target } from "waft";
import { JSON, JSONObject } from "waft-json";

export class XButton extends Component{
  constructor(props: Props){
    super(props);
    this.addEventListener('buttonClick', (e, target): void =>{
    });
  }

  willMount(attribute: JSONObject):void{
    console.log('component willMount:' + attribute.toString());
  }

  didMount():void{
    console.log('component didMount');
  }

  didUnmount():void{
    console.log('component didUnmount');
  }
}

自定义组件使用

自定义组件支持在页面和组件中引用

page.axml

<x-button class="button" data="{{buttonData}}"></x-button>

page.json

{
  "usingComponents": {
    "x-button": "components/x-button/index"
  }
}

page.ts

this.setState(JSON.parseObject(`{"message": "logs", "buttonData":{"count":667, "text": "abcabcabc"}}`));

3.setState时，状态是diff更新的：

如默认window设置了以下变量：

this.setState(JSON.parseObject(`{"count": 88888, "result": "logs", "buttonData":{"count":667, "text": "abcabcabc"}}`));

在组件内希望只更新buttonData的count值，设置以下即可

this.setState(JSON.parseObject('{"buttonData":{"count": 668}}'));