How to use @tarojs/taro-h5 - 10 common examples

history: Types.History;
  mode: 'multi' | 'hash' | 'browser';
  routes: Types.RouteObj[];
  children?: any[];
  customRoutes: Types.CustomRoutes;
}

interface State {
  location: Types.Location;
  routeStack: Types.RouteObj[];
}

type OriginalRoute = string;
type MappedRoute = string;

class Router extends Taro.Component {
  unlisten: () => void;
  lastLocation: Types.Location;
  currentPages: any[] = [];
  customRoutes: [OriginalRoute, MappedRoute][] = [];

  state = {
    location: this.props.history.location,
    routeStack: [] as Types.RouteObj[]
  };

  mountApis () {
    // 挂载Apis
    Taro.getCurrentPages = () => {
      return this.currentPages
    }
  }

// 记录最后一个location，浏览器前进后退按钮用
    lastLocation = {...nextState.location}

    stateKey = Number(nextState.location.state!.key)

    serialize()

    history.length = globalHistory.length
    const params = {
      fromLocation,
      toLocation: history.location,
      action: history.action
    }

    Taro._$router = history.location
    Taro.eventCenter.trigger('__taroRouterChange', {...params})
    transitionManager.notifyListeners({...params})
  }

// 记录最后一个location，浏览器前进后退按钮用
    lastLocation = {...nextState.location}

    stateKey = Number(nextState.location.state!.key)

    serialize()

    history.length = globalHistory.length
    const params = {
      fromLocation,
      toLocation: history.location,
      action: history.action
    }

    Taro._$router = history.location
    Taro.eventCenter.trigger('__taroRouterChange', {...params})
    transitionManager.notifyListeners({...params})
  }

mountApis () {
    // 挂载Apis
    Taro.getCurrentPages = () => {
      return this.currentPages
    }
  }

* @property {String} onSuccess 当target="miniProgram"时有效，跳转小程序成功
 */

/**
 * TODO: 参数还需要进一步细化对齐
 * Navigator组件
 * https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
 **/

@hoverable({
  hoverClass: 'navigator-hover',
  hoverStopPropergation: false,
  hoverStartTime: 50,
  hoverStayTime: 600
})
class Navigator extends Taro.Component {
  /** @type {NavigatorProps} */
  static defaultProps = {
    target: 'self',
    url: null,
    openType: 'navigate',
    delta: null,
    appId: null,
    path: null,
    extraData: {},
    version: 'release',
    onSuccess: null,
    onFail: null,
    onComplete: null,
    isHover: false
  }
  /** @type {NavigationProps}  */

import Taro from '@tarojs/taro-h5'
import classNames from 'classnames'
import Nerv from 'nervjs'

const noop = () => {}

export default class Tabbar extends Taro.Component {
  static defaultProps = {
    index: null,
    isSelected: false,
    textColor: {},
    iconPath: '',
    onSelect: noop,
    badgeText: null,
    showRedDot: false
  }

  onClick = () => {
    this.props.onSelect(this.props.index)
  }

  render () {
    const { isSelected, index, textColor, iconPath, text, badgeText, showRedDot } = this.props

import { Children } from 'nervjs'
import Taro from '@tarojs/taro-h5'
import { setStore } from '@tarojs/mobx-common'

export default class Provider extends Taro.Component {
  constructor (props) {
    super(props)
    setStore(props.store)
  }

  render () {
    return Children.only(this.props.children)
  }
}

return ComponentClass => {
    return class HoverableComponent extends Taro.Component {
      static defaultProps = {
        hoverClass,
        hoverStopPropergation,
        hoverStartTime,
        hoverStayTime
      }
      constructor (props, ctx) {
        super(props, ctx)
        this.state = this.getInitState(this.props)
      }

      touchStartTimer = null
      touchEndTimer = null

      state = {
        isHover: false,

return ComponentClass => {
    return class TouchableComponent extends Taro.Component {
      static defaultProps = {
        onTouchStart: null,
        onTouchMove: null,
        onTouchEnd: null,
        onTouchCancel: null,
        onLongTap: null
      }
      timer = null
      offset = {
        offsetX: 0,
        offsetY: 0
      }

      onTouchStart = e => {
        const { onTouchStart, onLongTap } = this.props
        Object.defineProperty(e, 'touches', { value: transformTouches(e.touches, this.offset) })

if (panel) {
    res = {
      set: pos => { panel.scrollTop = pos },
      get: () => panel.scrollTop
    }
  } else {
    res = {
      set: pos => window.scrollTo(0, pos),
      get: () => window.pageYOffset
    }
  }
  return res
}
let scroller

class Route extends Taro.Component {
  matched = false;
  wrappedComponent;
  componentRef;
  containerRef;
  isRoute = true;
  scrollPos = 0;

  constructor (props, context) {
    super(props, context)
    this.matched = this.computeMatch(this.props.currentLocation)
  }

  computeMatch (currentLocation) {
    const path = currentLocation.path;
    const key = currentLocation.state.key;
    const isIndex = this.props.isIndex;