1.根据模板创建页面

在src/pages下新建页面index,包含了index.axml，index.acss，index.ts，index.json4个文件

2.在app.json中配置页面

  1. {
  2.   "pages": [
  3.     "pages/index/index"
  4.   ],
  5.   "default": "pages/index/index"
  6. }

3.【可选】在app.json配置页面渲染基准：

waft支持配置viewport。viewport代表了视觉布局的卡片总宽度基准（手机上都按750px布局），如果你的页面设计宽度总像素是按1024px布局，那只要设置viewport为1024，css即可按照1024rpx来写。（可以不配置，默认waft会按1024px来布局）

{
  "pages": [
    "pages/index/index"
  ],
  "default": "pages/index/index",
  "viewport":{
    "width": 1024,
    "height": 600,
    "scaleMode": "fixedHeight"
  }
}

4.在axml文件中开发界面：

开发界面和数据绑定

<div>
  <div onTap="tapTitle">{{title}}</div>
</div>

5.在ts文件中开发逻辑：

  • 可以在页面初始化时，通过全局的getLaunchData()方法，获取到应用启动的信息
  • 取出其中的dataSource字段，设置到默认的state

  • 在生命周期中，可以进行您的定制操作

    import { JSON, JSONObject } from "waft-json";
import { console, Page, Props, Event, MessageEvent, setTimeout,window, getLaunchDataSource, mergeState } from "waft";
export class Index extends Page {
constructor(props: Props){
  super(props);
}

// 设置默认的state
static state(): JSONObject{
  // 1.此处默认的state，可以前端固定
  // const obj = new JSONObject();
  // obj.set("title", "测试标题");
  // return obj;

  // 2.也可以指定服务端render指令中的dataSource内容，作为默认state
  return getLaunchDataSource(); 
}

// 点击事件
tapTitle(e: Event): void{
 console.log("被点击了");
}

// 页面显示
onShow(): void{}

// 页面加载后
onLoad(query: JSONObject): void{}

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

// 界面更新事件
onUpdate(data: JSONObject): void{}

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

    6.数据源结构：

    技能render方式下发，可以把数据携带在dataSource字段中传给前端应用，并进行数据绑定显示。

    {
  "context": {
    "sys.userId": "501617996"
  },
  "logo": "https://ailabs.alibabausercontent.com/images/25277/1545910761253.png",
  "id": "logistics",
  "title": "物流查询-快递",
  "bundle": "http://ailabs-iot.aligenie.com/tpl2/21d0753c0c0fafac99a2d4b3091cb9ed/index.aot",
      "path": "pages/index/index",
  "query": {
    "darkMode": "true"
  }
  "dataSource": {
      "title": "测试标题展示",
  },
  "version": "1614848052239",
     "md5": "21d0753c0c0fafac99a2d4b3091cb9ed"
}

    7.【调试方法】在mock.json中配置页面mock启动参数：

    启动参数包含了以下值：

    - **path: 启动页面路径；（默认为首页）**
- **query:  启动的query参数**
- **dataSource：启动的额外下发数据 （如服务端预先请求完数据，会放到dataSource下）**

可以在src目录下的mock.json文件中配置数据，该数据可以在运行环境中通过getLaunchData()函数调用。
会在实际下发时按照实际运行，该参数只影响调试环境，不影响生产运行环境。

{
    "path": "pages/demo/demo",
  "query": {
    "id": "123456"
  }
  "dataSource":{
      "title": "hello"
    }
}