FunctionPage

FunctionPage是Page写法的wrapper，实例化时会调用该函数式声明，用法同Page。

写法示例

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, FunctionPage, Props, Event, MessageEvent } from "waft";
// 支持function写法
let _page: FunctionPage;
let percent: i32 = 42;
export function Index(page: FunctionPage): void{
  _page = page;
  // 设置默认的state
  page.setState(JSON.stringify(getDataSource()));
  // 添加监听事件
  page.addEventListener("plus", (event: Event)=>{
    _page.setState(`{"percent": "${(percent++).toString()}%"}`);
  });
  page.addEventListener("minus", (event: Event)=>{
    _page.setState(`{"percent": "${(percent--).toString()}%"}`);
  });
  page.onshow = (): void =>{
    // 页面显示
    console.log('page onShow');
  }
  page.onload = (query: JSONObject): void=>{
    // 页面加载后
    console.log('page onLoad:' + JSON.stringify(query));
  }
  page.onmessage = (event: MessageEvent): void=>{
    // 信息推送更新
    console.log('page onMessage:' + JSON.stringify(event.data));
    // 如果需要进行更新界面
    if(event.data.has("dataSource")){
      _page.setState(event.data.getObject("dataSource").toString());
    }
  }
}

事件响应

响应xml中的事件
xml：

<div class="button" onTap="buttonClick">getSystemInfoSync</div>

.ts

component.addEventListener('buttonClick', function (event: string) {
  const result = system.getSystemInfoSync();
  log('--> getSystemInfo result:' + result)
});