Waft基于核心的响应式的数据绑定模块，来实现逻辑层修改数据，就能驱动视图层的更新的效果。

XML示例

  1. <div>
  2.   <div>{{title}}</div>
  3.     <div onTap="tapMe">示例按钮</div>
  4. </div>

逻辑脚本：

  1. export class Index extends Page {
  2.   constructor(props: Props) {
  3.     super(props);
  4.   }
  5.   tapMe(e: Event): void{
  6.    this.setState(JSON.parseObject(`{"title":"Hello Waft"}`));
  7.   }
  8.   onLoad(query: JSONObject): void{
  9.     console.log('onload')
  10.   }
  11. }

如上所示，只要点击示例按钮，就会触发执行tapMe的函数回调，从而进行title字段的状态更新，视图因此会根据状态更新内容。

样式示例

Waft支持了主流的css样式，以及web规范的css写法，布局的单位为rpx，示例如下：

  1. .title-div{
  2.     width: 30rpx;
  3.     height: 10rpx;
  4.     background-color: red;
  5. }
  7. .title-text{
  8.     font-size: 20rpx;
  9.     color: #FFFFFF;
  10. }

目前对rules规则如@media，css变量等能力暂未支持，具体可以参考ACSS规范：https://www.yuque.com/waft/docs/taglw5

布局基准：

默认框架的布局基准为1024px（指的是布局设计的全屏宽度像素）。
具体如何设置自己应用的布局基准可以参考viewport文档。