tessl/npm-miniprogram-api-typings

Type definitions for APIs of WeChat Mini Program in TypeScript

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Event System

Name: tessl/npm-miniprogram-api-typings
Author: tessl

Comprehensive event type definitions for touch interactions, UI components, media events, and custom events in WeChat Mini Programs.

Capabilities

Touch Events

Touch interaction events for user input handling.

interface TouchEvent {
  /** Event type */
  type: string;
  /** Event timestamp */
  timeStamp: number;
  /** Event target element */
  target: EventTarget;
  /** Current event target */
  currentTarget: EventTarget;
  /** Touch detail information */
  detail: TouchDetail;
  /** All active touches */
  touches: Touch[];
  /** Changed touches in this event */
  changedTouches: Touch[];
}

interface Touch {
  /** Touch identifier */
  identifier: number;
  /** X coordinate relative to page */
  pageX: number;
  /** Y coordinate relative to page */
  pageY: number;
  /** X coordinate relative to client */
  clientX: number;
  /** Y coordinate relative to client */
  clientY: number;
}

interface TouchDetail {
  /** X coordinate */
  x: number;
  /** Y coordinate */
  y: number;
  /** Source (touch/mouse) */
  source: string;
}

interface TouchCanvas {
  /** Canvas touch event specific properties */
  identifier: number;
  x: number;
  y: number;
}

Usage Examples:

Page({
  onTouchStart(e: TouchEvent) {
    console.log('Touch started at:', e.touches[0].pageX, e.touches[0].pageY);
    console.log('Active touches:', e.touches.length);
  },
  
  onTouchMove(e: TouchEvent) {
    console.log('Touch moved to:', e.touches[0].pageX, e.touches[0].pageY);
  },
  
  onTouchEnd(e: TouchEvent) {
    console.log('Touch ended');
    console.log('Changed touches:', e.changedTouches.length);
  },
  
  onTap(e: TouchEvent) {
    console.log('Tapped at:', e.detail.x, e.detail.y);
  },
  
  onLongPress(e: TouchEvent) {
    console.log('Long pressed at:', e.detail.x, e.detail.y);
  }
});

UI Component Events

Events from built-in WeChat Mini Program components.

// Button events
interface ButtonTapEvent {
  type: 'tap';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {};
}

interface ButtonGetUserInfoEvent {
  type: 'getuserinfo';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    userInfo?: {
      nickName: string;
      avatarUrl: string;
      gender: number;
      city: string;
      province: string;
      country: string;
      language: string;
    };
    rawData?: string;
    signature?: string;
    encryptedData?: string;
    iv?: string;
    errMsg: string;
  };
}

// Form events
interface FormSubmitEvent {
  type: 'submit';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: Record<string, any>;
    formId: string;
  };
}

interface FormResetEvent {
  type: 'reset';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {};
}

// Input events
interface InputEvent {
  type: 'input';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string;
    cursor: number;
    keyCode: number;
  };
}

interface InputConfirmEvent {
  type: 'confirm';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string;
  };
}

interface InputFocusEvent {
  type: 'focus';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string;
    height: number;
  };
}

interface InputBlurEvent {
  type: 'blur';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string;
    cursor: number;
  };
}

Usage Examples:

Page({
  onFormSubmit(e: FormSubmitEvent) {
    console.log('Form submitted:', e.detail.value);
    // e.detail.value contains form field values
    const { username, email, age } = e.detail.value;
  },
  
  onInputChange(e: InputEvent) {
    console.log('Input value:', e.detail.value);
    console.log('Cursor position:', e.detail.cursor);
  },
  
  onButtonTap(e: ButtonTapEvent) {
    console.log('Button tapped');
  },
  
  onGetUserInfo(e: ButtonGetUserInfoEvent) {
    if (e.detail.userInfo) {
      console.log('User info:', e.detail.userInfo);
      this.setData({
        userInfo: e.detail.userInfo
      });
    } else {
      console.log('User denied authorization');
    }
  }
});

Picker Events

Events from picker components for selecting values.

interface PickerChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: number | number[] | string;
  };
}

interface PickerCancelEvent {
  type: 'cancel';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {};
}

interface PickerColumnChangeEvent {
  type: 'columnchange';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    column: number;
    value: number;
  };
}

// Date/Time picker specific
interface DateTimePickerChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string; // Date string in YYYY-MM-DD or HH:mm format
  };
}

// Region picker specific  
interface RegionPickerChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: [string, string, string]; // [province, city, district]
    code: [string, string, string];  // Region codes
  };
}

Switch and Slider Events

Events from switch and slider components.

interface SwitchChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: boolean;
  };
}

interface SliderChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: number;
  };
}

interface SliderChangingEvent {
  type: 'changing';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: number;
  };
}

Checkbox and Radio Events

Events from checkbox and radio group components.

interface CheckboxGroupChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string[]; // Array of selected checkbox values
  };
}

interface RadioGroupChangeEvent {
  type: 'change';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    value: string; // Selected radio value
  };
}

Media Events

Events from video, audio, and camera components.

interface VideoEvent {
  type: 'play' | 'pause' | 'ended' | 'timeupdate' | 'error' | 'waiting' | 'progress' | 'loadedmetadata' | 'fullscreenchange';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    currentTime?: number;
    duration?: number;
    buffered?: number;
    fullScreen?: boolean;
    direction?: 'vertical' | 'horizontal';
  };
}

interface AudioEvent {
  type: 'play' | 'pause' | 'ended' | 'timeupdate' | 'error';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    currentTime?: number;
    duration?: number;
  };
}

interface CameraEvent {
  type: 'stop' | 'error' | 'initdone' | 'scancode';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    msg?: string;
    result?: string;
    scanType?: string;
    charSet?: string;
    path?: string;
  };
}

interface ImageLoadEvent {
  type: 'load' | 'error';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    width?: number;
    height?: number;
    errMsg?: string;
  };
}

Usage Examples:

Page({
  onVideoPlay(e: VideoEvent) {
    console.log('Video started playing');
  },
  
  onVideoTimeUpdate(e: VideoEvent) {
    console.log('Video time:', e.detail.currentTime, '/', e.detail.duration);
  },
  
  onVideoEnded(e: VideoEvent) {
    console.log('Video playback ended');
  },
  
  onCameraScanCode(e: CameraEvent) {
    console.log('QR code scanned:', e.detail.result);
    console.log('Scan type:', e.detail.scanType);
  },
  
  onImageLoad(e: ImageLoadEvent) {
    console.log('Image loaded:', e.detail.width, 'x', e.detail.height);
  }
});

Scroll and Navigation Events

Events from scroll containers and navigation components.

interface ScrollViewEvent {
  type: 'scroll' | 'scrolltoupper' | 'scrolltolower' | 'refresherpulling' | 'refresherrefresh' | 'refresherrestore' | 'refresherabort';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    scrollLeft?: number;
    scrollTop?: number;
    scrollHeight?: number;
    scrollWidth?: number;
    deltaX?: number;
    deltaY?: number;
  };
}

interface SwiperEvent {
  type: 'change' | 'transition' | 'animationfinish';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    current: number;
    source: string;
    currentItemId?: string;
  };
}

interface NavigatorSuccessEvent {
  type: 'success';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {};
}

interface NavigatorFailEvent {
  type: 'fail';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    errMsg: string;
  };
}

Map Events

Events from map components for location and interaction handling.

interface MapEvent {
  type: 'tap' | 'markertap' | 'labeltap' | 'controltap' | 'callouttap' | 'updated' | 'regionchange' | 'poitap' | 'anchortap';
  target: EventTarget;
  currentTarget: EventTarget;
  detail: {
    markerId?: number;
    labelId?: number;
    controlId?: number;
    name?: string;
    longitude?: number;
    latitude?: number;
    causedBy?: string;
    type?: number;
  };
}

Custom Events

Custom events triggered by components.

interface CustomEvent<T = any> {
  type: string;
  target: EventTarget;
  currentTarget: EventTarget;
  detail: T;
  bubbles?: boolean;
  composed?: boolean;
  capturePhase?: boolean;
}

Usage Examples:

// Component triggering custom event
Component({
  methods: {
    handleItemClick() {
      this.triggerEvent('itemclick', {
        id: this.data.itemId,
        name: this.data.itemName,
        timestamp: Date.now()
      }, {
        bubbles: true,
        composed: true
      });
    }
  }
});

// Parent handling custom event
Page({
  onItemClick(e: CustomEvent<{ id: string; name: string; timestamp: number }>) {
    console.log('Item clicked:', e.detail.name);
    console.log('Item ID:', e.detail.id);
    console.log('Click time:', e.detail.timestamp);
  }
});

Event Target Interface

interface EventTarget {
  /** Element ID */
  id: string;
  /** Tag name */
  tagName: string;
  /** Element dataset */
  dataset: Record<string, any>;
  /** Bounding client rect */
  offsetLeft: number;
  offsetTop: number;
  offsetWidth: number;
  offsetHeight: number;
}

Event Handler Patterns

// Event handler function type
type EventHandler<T = TouchEvent> = (event: T) => void;

// Common event handler interface for components/pages
interface EventHandlers {
  // Touch events
  onTouchStart?: EventHandler<TouchEvent>;
  onTouchMove?: EventHandler<TouchEvent>;
  onTouchEnd?: EventHandler<TouchEvent>;
  onTouchCancel?: EventHandler<TouchEvent>;
  onTap?: EventHandler<TouchEvent>;
  onLongPress?: EventHandler<TouchEvent>;
  onLongTap?: EventHandler<TouchEvent>;
  
  // Form events
  onSubmit?: EventHandler<FormSubmitEvent>;
  onReset?: EventHandler<FormResetEvent>;
  onInput?: EventHandler<InputEvent>;
  onFocus?: EventHandler<InputFocusEvent>;
  onBlur?: EventHandler<InputBlurEvent>;
  
  // Picker events
  onChange?: EventHandler<PickerChangeEvent>;
  onCancel?: EventHandler<PickerCancelEvent>;
  
  // Media events
  onPlay?: EventHandler<VideoEvent>;
  onPause?: EventHandler<VideoEvent>;
  onEnded?: EventHandler<VideoEvent>;
  onError?: EventHandler<VideoEvent>;
  
  // Custom events
  [key: string]: EventHandler<any> | undefined;
}

Types

// Base event interface
interface BaseEvent {
  type: string;
  timeStamp: number;
  target: EventTarget;
  currentTarget: EventTarget;
}

// Touch-related types
interface TouchEvent extends BaseEvent {
  detail: TouchDetail;
  touches: Touch[];
  changedTouches: Touch[];
}

// Component event types
interface ComponentEvent<T = any> extends BaseEvent {
  detail: T;
}

// Event type utilities
type EventType = 
  | 'tap' | 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel'
  | 'input' | 'focus' | 'blur' | 'confirm'
  | 'change' | 'cancel' | 'columnchange'
  | 'submit' | 'reset'
  | 'play' | 'pause' | 'ended' | 'timeupdate' | 'error'
  | 'scroll' | 'scrolltoupper' | 'scrolltolower'
  | 'load' | 'complete'
  | string; // Allow custom event types