mipp

小程序ts

Usage no npm install needed!

<script type="module">
  import mipp from 'https://cdn.skypack.dev/mipp';
</script>

README

Mipp

小程序 typescript 基类

Installation

使用 class 风格时,小程序继承的父类

Import

Import PageBase:

import { PageBase } from "mipp";

or import all:

import Mipp from "mipp";

Api

  • PageBase

Interface

  • IMippWeApp
  • IMippWePage
  • IMippWeComponent
  • IMippWeEvent
  • IMippWeCommon

PageBase

逻辑页面的父类,所有页面都需要继承该父类;

<IData>

是页面渲染的数据类或 interface,即data中所包含的数据或者 interface

特别注意 constructor构造方法中不能使用小程序内置的属性和方法;比如:this.setData(opts?)this.options;因为此时还没有注入到 Page 函数中,并没有小程序内置的对象

(除非必须)尽量不要在 constructor里面执行初始化的工作,因为加载小程序后,会执行所有页面前置的 js 代码(Page()之前执行的代码),导致小程序渲染变慢。可以在onLoad生命周期函数中执行初始化的工作,onLoad只在打开该页面时执行

data初始化

data初始化有两种方式:

  1. constructor中初始化,使用this.data = new Data()data进行初始化;建议使用这方式
  2. onLoad中初始化,在onLoad中初始化需要执行this.setData()
data初始化示例
  • 建议使用在constructor中初始化:
class Data {
  username = "";
}


class Index extends PageBase<Data> implements IMippWePage.ILifetime {
  data: Data;

  constructor () {
    super();
    this.data = new Data();
  }

  onLoad(): void {
    console.log("onLoad", this);
  }
}

Page(new Index());
  • onLoad中初始化:
class Data {
  username = "";
}


class Index extends PageBase<Data> implements IMippWePage.ILifetime {
  data: Data;

  onLoad(): void {
    this.setData(new Data());
    console.log("onLoad", this);
  }
}

Page(new Index());

Example1

class Data {
  username = "";
}


class Index extends PageBase<Data> implements IMippWePage.ILifetime {
  data: Data;

  constructor () {
    super();
    this.data = new Data();
    //不能在constructor中使用 this.setData({}); 因为还没有注入到Page函数中,并没有小程序内置的对象
  }

  onLoad(): void {
    console.log("onLoad", this);
  }
}

Page(new Index());

Example2

class Data {
  username = "";
}

// 不推荐的方式
class Index extends PageBase<Data> implements IMippWePage.ILifetime {
  data = new Data();

  onLoad(): void {
    console.log("onLoad", this);
  }
}

// 推荐的方式
class Index extends PageBase<Data> implements IMippWePage.ILifetime {
  data: Data;

  constructor() {
    super();
    this.data = new Data();
  }

  onLoad(): void {
    console.log("onLoad", this);
  }
}

Page(new Index());

IMippWePage.ILifetime

小程序生命周期函数的 interface

{
  onLoad
  onShow
  onReady
  onHide
  onUnload
  onPullDownRefresh
  onReachBottom
  onShareAppMessage
  onPageScroll
  onTabItemTap
  onResize
  onAddToFavorites
}

Example

interface IData {
  username: string;
}

class Index extends PageBase<IData> implements IMippWePage.ILifetime {
  data: IData = {
    username: "",
  };

  onLoad(): void {
    console.log("onLoad", this);
  }
}

Page(new Index());