## 使用 Class 类开发小程序

在整个小程序最佳实践选型上采用 TypeScript 的背景下，

- 为了提供原生对应的代码提示功能，例如生命周期提示，this.setData 方法提示等特性；
- 由于官方微信的 typings 更新，因此无法像旧的使用方法一样直接继承一个 Page.Instance 来封装

> [原文链接](https://iwiki.woa.com/pages/viewpage.action?pageId=67115648)

### 页面 Page 类

```ts
import { SuperPage, wxPage } from '@core/setup';

@wxPage()
export default class Home extends SuperPage {
  data = {
    title: '首页',
  };

  onReady() {}
  onShow() {}
  onHide() {}
  onLoad() {}
  onUnload() {}

  onClickItem() {
    console.log(this);
  }
}
```

### 组件 Component 类

```ts
import { SuperComponent, wxComponent } from '@core/setup';

@wxComponent()
export default class NoticeBar extends SuperComponent {
  properties = {
    data: {
      type: Object,
      value: {},
    },
  };

  onClickNoticeBar(e: WechatMiniprogram.TouchEvent) {
    const { row } = e.currentTarget.dataset;

    if (!row.url) return;

    wx.navigateTo({
      url: row.url,
    });
  }
}
```