or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

api.mdcompiler.mdindex.mdruntime.md
tile.json

runtime.mddocs/

Runtime Layer

Core runtime functions for creating and managing uni-app applications, pages, and components in the Alipay Mini Program environment. This module provides the bridge between Vue.js component instances and Alipay's mini program lifecycle system.

Capabilities

App Creation Functions

Functions for creating different types of application instances in the Alipay Mini Program environment.

/**
 * Creates a standard uni-app application instance
 * @param parseAppOptions - App options parsing configuration
 * @returns App creation function
 */
function createApp(parseAppOptions: any): any;

/**
 * Creates a plugin application instance for mini program plugins
 * @param parseAppOptions - App options parsing configuration
 * @returns Plugin app creation function
 */
function createPluginApp(parseAppOptions: any): any;

/**
 * Creates a subpackage application instance for lazy-loaded modules
 * @param parseAppOptions - App options parsing configuration
 * @returns Subpackage app creation function
 */
function createSubpackageApp(parseAppOptions: any): any;

Usage Example:

// Automatically available in Alipay Mini Program runtime
const app = my.createApp({
  onLaunch() {
    console.log('App launched');
  },
  onShow() {
    console.log('App shown');
  }
});

Page Creation

Function factory for creating page instances that bridge Vue components with Alipay Mini Program page lifecycle.

/**
 * Creates a page creation function for Alipay Mini Program
 * @returns Function that creates pages from Vue component options
 */
function initCreatePage(): CreatePageFunction;

type CreatePageFunction = (vueOptions: ComponentOptions) => void;

interface ComponentOptions {
  /** Vue component default export or options */
  default?: ComponentOptions;
  /** Component data function */
  data?: () => any;
  /** Component methods */
  methods?: Record<string, Function>;
  /** Lifecycle hooks */
  onLoad?: (query: any) => void;
  onShow?: () => void;
  onReady?: () => void;
  onUnload?: () => void;
  /** Alipay-specific events */
  events?: Record<string, Function>;
  /** Runtime hooks */
  __runtimeHooks?: any;
  /** WeChat XML Script call methods */
  wxsCallMethods?: any;
}

Usage Example:

// Page definition in .vue file gets compiled to:
const createPage = my.createPage;

createPage({
  data() {
    return { message: 'Hello Alipay' };
  },
  onLoad(query) {
    console.log('Page loaded with query:', query);
    this.$page = {
      fullPath: this.route + stringifyQuery(query)
    };
  },
  onShow() {
    console.log('Page shown');
  },
  methods: {
    handleClick() {
      this.message = 'Clicked!';
    }
  }
});

Component Creation

Function factory for creating component instances that integrate Vue components with Alipay Mini Program component system.

/**
 * Creates a component creation function for Alipay Mini Program
 * @returns Function that creates components from Vue component options
 */
function initCreateComponent(): CreateComponentFunction;

type CreateComponentFunction = (vueOptions: ComponentOptions) => void;

interface ComponentCreationOptions {
  /** Component properties configuration */
  props: Record<string, any>;
  /** Component lifecycle - called when component mounts */
  didMount: () => void;
  /** Component lifecycle - called when component unmounts */
  didUnmount: () => void;
  /** Component methods including internal handlers */
  methods: ComponentMethods;
  /** Component options (Alipay-specific) */
  options?: any;
  /** Component initialization (for Component2 API) */
  onInit?: () => void;
  /** Component data */
  data?: any;
  /** Component mixins */
  mixins?: any[];
}

interface ComponentMethods {
  /** Internal ref handler */
  __r: Function;
  /** Internal link handler */
  __l: Function;
  /** Event trigger function */
  triggerEvent: Function;
}

Usage Example:

// Component definition in .vue file gets compiled to:
const createComponent = my.createComponent;

createComponent({
  props: {
    title: { type: String, default: '' },
    visible: { type: Boolean, default: false }
  },
  data() {
    return { internalState: 'idle' };
  },
  methods: {
    handleClose() {
      this.triggerEvent('close');
    }
  }
});

Runtime Utilities

Core utility functions used by the runtime system for component management and lifecycle handling.

/**
 * Creates a Vue component instance adapted for mini program environment
 * @param type - Component type ('page' | 'component')
 * @param mpInstance - Mini program instance
 * @param vueOptions - Vue component options
 * @param parent - Parent component instance (optional)
 * @returns Vue component instance
 */
declare function createVueComponent(
  type: string,
  mpInstance: any,
  vueOptions: ComponentOptions,
  parent?: ComponentPublicInstance
): ComponentPublicInstance;

/**
 * Handles component reference binding
 * @param mpInstance - Mini program component instance
 */
declare function handleRef(mpInstance: any): void;

/**
 * Handles component linking for parent-child relationships
 * @param event - Link event data
 */
declare function handleLink(event: any): void;

/**
 * Initializes child Vue components
 * @param mpInstance - Parent mini program instance
 */
declare function initChildVues(mpInstance: any): void;

/**
 * Initializes special methods for component interaction
 * @param mpInstance - Mini program instance
 */
declare function initSpecialMethods(mpInstance: any): void;

Platform Integration

The runtime layer automatically integrates with Alipay Mini Program global environment:

/**
 * Global bindings automatically created in Alipay Mini Program environment
 */
declare global {
  interface AlipayMy {
    /** Event channel for inter-component communication */
    EventChannel: typeof EventChannel;
    /** App creation function */
    createApp: typeof createApp;
    /** Page creation function */
    createPage: typeof createPage;
    /** Component creation function */
    createComponent: typeof createComponent;
    /** Plugin app creation function */
    createPluginApp: typeof createPluginApp;
    /** Subpackage app creation function */
    createSubpackageApp: typeof createSubpackageApp;
  }
}

Lifecycle Integration

The runtime layer provides seamless integration between Vue.js lifecycle hooks and Alipay Mini Program lifecycle events:

Page Lifecycle Mapping:

  • onLoad → Vue component creation + onLoad hook
  • onShow → Vue onShow hook + devtools integration
  • onReady → Vue mounted + onReady hook
  • onUnload → Vue onUnload + component destruction
  • onBack → Vue onBackPress hook (Alipay-specific)

Component Lifecycle Mapping:

  • didMount → Vue component creation + mounted hook
  • didUnmount → Vue component destruction + cleanup
  • onInit → Early component initialization (Component2 API)

Error Handling

The runtime provides robust error handling and cleanup:

/**
 * Component destruction and cleanup
 * @param vm - Vue component instance
 */
declare function $destroyComponent(vm: ComponentPublicInstance): void;

/**
 * Component props cache cleanup
 * @param uid - Component unique identifier
 */
declare function pruneComponentPropsCache(uid: number): void;

Platform Detection

Runtime utilities for detecting and handling platform-specific behaviors:

/**
 * Detects if running in DingTalk mini program environment
 * DingTalk requires special handling for component timing
 */
declare const isDingTalk: boolean;

/**
 * Detects Component2 API availability
 * Component2 provides enhanced component lifecycle
 */
declare const isComponent2: boolean;

Usage in Components:

// DingTalk timing workaround
if (isDingTalk) {
  setTimeout(() => {
    initVm(this, createComponent);
  }, 4);
} else {
  initVm(this, createComponent);
}

// Component2 API usage
if (isComponent2) {
  componentOptions.onInit = function() {
    // Early initialization
  };
}