MP Runtime Components

/**
 * Creates a WeChat Mini Program page with Vue.js integration
 * @param options - Page configuration with lifecycle hooks and methods
 */
function Page(options: PageOptions): void;

import { Page } from "@dcloudio/uni-mp-weixin";

Page({
  data() {
    return {
      title: 'Native Page',
      userInfo: null
    };
  },
  onLoad(query) {
    console.log('Page loaded with query:', query);
    this.setData({
      title: `Welcome ${query.name || 'User'}`
    });
  },
  onShow() {
    console.log('Page shown');
  },
  onReady() {
    console.log('Page ready');
    // Page initial render completed
  },
  onHide() {
    console.log('Page hidden');
  },
  onUnload() {
    console.log('Page unloaded');
    // Cleanup resources
  },
  onPullDownRefresh() {
    // Handle pull-to-refresh
    this.refreshData();
  },
  onReachBottom() {
    // Load more data when reaching bottom
    this.loadMoreData();
  },
  onShareAppMessage() {
    return {
      title: this.data.title,
      path: '/pages/share/share'
    };
  },
  refreshData() {
    // Refresh page data
    setTimeout(() => {
      wx.stopPullDownRefresh();
    }, 1000);
  },
  loadMoreData() {
    // Load additional data
  }
});

/**
 * Creates a WeChat Mini Program component with Vue.js integration
 * @param options - Component configuration with properties, methods, and lifecycle hooks
 */
function Component(options: ComponentOptions): void;

import { Component } from "@dcloudio/uni-mp-weixin";

Component({
  properties: {
    text: {
      type: String,
      value: 'Default Text'
    },
    count: {
      type: Number,
      value: 0
    },
    disabled: {
      type: Boolean,
      value: false
    }
  },
  data: {
    internalState: 'ready'
  },
  lifetimes: {
    created() {
      console.log('Component created');
    },
    attached() {
      console.log('Component attached to DOM');
      this.setData({
        internalState: 'attached'
      });
    },
    ready() {
      console.log('Component ready');
      this.setData({
        internalState: 'ready'
      });
    },
    detached() {
      console.log('Component detached');
      // Cleanup
    }
  },
  pageLifetimes: {
    show() {
      console.log('Page containing component shown');
    },
    hide() {
      console.log('Page containing component hidden');
    }
  },
  methods: {
    handleTap() {
      if (this.data.disabled) return;
      
      this.triggerEvent('tap', {
        text: this.data.text,
        count: this.data.count
      });
    },
    updateCount(newCount) {
      this.setData({
        count: newCount
      });
    }
  }
});

/**
 * Creates a behavior that can be mixed into components
 * @param options - Behavior configuration with properties, methods, and lifecycle hooks
 * @returns Behavior configuration object that can be used in components
 */
function Behavior(options: BehaviorOptions): BehaviorOptions;

import { Behavior, Component } from "@dcloudio/uni-mp-weixin";

// Create a reusable behavior
const tapBehavior = Behavior({
  properties: {
    tapCount: {
      type: Number,
      value: 0
    }
  },
  data: {
    lastTapTime: 0
  },
  methods: {
    handleCommonTap() {
      const now = Date.now();
      this.setData({
        tapCount: this.data.tapCount + 1,
        lastTapTime: now
      });
      
      this.triggerEvent('tapped', {
        count: this.data.tapCount + 1,
        timestamp: now
      });
    }
  }
});

// Use the behavior in a component
Component({
  behaviors: [tapBehavior],
  properties: {
    label: {
      type: String,
      value: 'Tap me'
    }
  },
  methods: {
    onTap() {
      // Use method from behavior
      this.handleCommonTap();
      console.log(`${this.data.label} tapped ${this.data.tapCount} times`);
    }
  }
});

/**
 * Vue.js nextTick function for deferring callback execution
 * @param callback - Function to execute after next DOM update
 * @returns Promise that resolves after next DOM update
 */
const nextTick: (callback?: () => void) => Promise<void>;

import { nextTick } from "@dcloudio/uni-mp-weixin";

// Usage with callback
nextTick(() => {
  console.log('DOM updated');
  // Access updated DOM elements
});

// Usage with Promise
async function updateAndAccess() {
  this.setData({ message: 'Updated' });
  
  await nextTick();
  console.log('DOM has been updated with new message');
  // Now safe to access updated DOM
}

// Page configuration options
interface PageOptions {
  /** Page data */
  data?: Record<string, any> | (() => Record<string, any>);
  /** Page load handler */
  onLoad?: (query: Record<string, any>) => void;
  /** Page show handler */
  onShow?: () => void;
  /** Page ready handler */
  onReady?: () => void;
  /** Page hide handler */
  onHide?: () => void;
  /** Page unload handler */
  onUnload?: () => void;
  /** Pull down refresh handler */
  onPullDownRefresh?: () => void;
  /** Reach bottom handler */
  onReachBottom?: () => void;
  /** Share message handler */
  onShareAppMessage?: (options?: any) => ShareMessageResult;
  /** Page scroll handler */
  onPageScroll?: (options: { scrollTop: number }) => void;
  /** Page resize handler */
  onResize?: (size: { deviceOrientation: string; size: { windowWidth: number; windowHeight: number } }) => void;
  /** Tab item tap handler */
  onTabItemTap?: (item: { index: number; pagePath: string; text: string }) => void;
  /** Custom methods */
  [key: string]: any;
}

// Component configuration options
interface ComponentOptions {
  /** Component properties definition */
  properties?: Record<string, PropertyDefinition>;
  /** Component data */
  data?: Record<string, any>;
  /** Component methods */
  methods?: Record<string, Function>;
  /** Component lifetimes */
  lifetimes?: {
    created?: () => void;
    attached?: () => void;
    ready?: () => void;
    moved?: () => void;
    detached?: () => void;
    error?: (error: Error) => void;
  };
  /** Page lifetimes for component */
  pageLifetimes?: {
    show?: () => void;
    hide?: () => void;
    resize?: (size: any) => void;
  };
  /** Component behaviors */
  behaviors?: BehaviorOptions[];
  /** External classes */
  externalClasses?: string[];
  /** Component options */
  options?: {
    multipleSlots?: boolean;
    addGlobalClass?: boolean;
    pureDataPattern?: RegExp;
    styleIsolation?: 'isolated' | 'apply-shared' | 'shared';
  };
}

// Behavior configuration options
interface BehaviorOptions {
  /** Behavior properties */
  properties?: Record<string, PropertyDefinition>;
  /** Behavior data */
  data?: Record<string, any>;
  /** Behavior methods */
  methods?: Record<string, Function>;
  /** Behavior lifetimes */
  lifetimes?: {
    created?: () => void;
    attached?: () => void;
    ready?: () => void;
    moved?: () => void;
    detached?: () => void;
  };
  /** Definite field list for pure data */
  definitionFilter?: (defFields: any) => void;
}

// Property definition for components
interface PropertyDefinition {
  /** Property type */
  type?: StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | null;
  /** Default value */
  value?: any;
  /** Property observer */
  observer?: string | ((newVal: any, oldVal: any, changedPath: string) => void);
}

// Share message result
interface ShareMessageResult {
  title?: string;
  path?: string;
  imageUrl?: string;
}