Page

Page class是当前页面的构建函数，会在该页面实例化时调用。
开发者需要通过继承Page 来开发一个自己的页面逻辑类。
Page包括了一个页面的构建、生命周期、state设置方法等。

xml：

<div class="warpper">
  <image class="img" src="https://gw.alicdn.com/imgextra/i4/O1CN01KoLIjy1xrDXBCZMUK_!!6000000006496-2-tps-424-424.png"/>
  <div class="bottom">
    <div class="button" onTap="minus">-</div>
    <div class="text">
      <text class="hello-font">HELLO WORLD ... {{percent ? percent : ""}}</text>
      <x-text a:if="{{desc}}" value="{{desc}}"/>
    </div>
    <div class="button" onTap="plus">+</div>
  </div>
</div>

ts：

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, Props, Event, MessageEvent, setTimeout,window } from "waft";
export class Index extends Page {
  constructor(props: Props){
    super(props);
    // 获取query
    const query = this.query;
    // 获取dataSource
    const dataSource = this.dataSource;
    // 设置到state的示例
    this.setState(dataSource);
  }

  onPlus(e: Event): void{
    const percent = this.state.getInteger("percent");
    this.setState(JSON.parseObject(`{"percent": ${(percent + 1).toString()}}`));
  }

  onMinus(e: Event): void{
    const percent = this.state.getInteger("percent");
    this.setState(JSON.parseObject(`{"percent": ${(percent - 1).toString()}}`));
  }

  onShow(): void{
    // 页面显示
    console.log('page onShow');
  }

  onLoad(query: JSONObject): void{
    // 页面加载后
    console.log('page onLoad:' + JSON.stringify(query));
  }

  // 语音事件
  onVoice(data: JSONObject): void{}

  // 界面更新事件
  onUpdate(data: JSONObject): void{
    console.log("onUpdate:" + data.toString())
  }

  // 音频事件
  onAudio(data: JSONObject): void{}
}