or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

api-integration.mdbuild-system.mdindex.mdparsing-utilities.mdplatform-services.mdruntime.md
tile.json

runtime.mddocs/

Runtime Management

Core runtime functions for creating and managing Toutiao mini-program applications, pages, and components with proper lifecycle adaptations and platform-specific behavior handling.

Capabilities

App Creation

Creates a Toutiao mini-program application with proper lifecycle management and platform-specific adaptations.

/**
 * Creates a Toutiao mini-program application
 * @param options - Application configuration options
 * @returns App instance with Toutiao-specific adaptations
 */
function createApp(options: AppOptions): App;

interface AppOptions {
  /** Called when the mini-program launches */
  onLaunch?: () => void;
  /** Called when the mini-program becomes visible */
  onShow?: () => void;
  /** Called when the mini-program becomes hidden */
  onHide?: () => void;
  /** Called when an uncaught error occurs */
  onError?: (error: string) => void;
  /** Additional app-level configuration */
  [key: string]: any;
}

Usage Example:

import { createApp } from "@dcloudio/uni-mp-toutiao/runtime";

const app = createApp({
  onLaunch() {
    console.log('Toutiao Mini Program Started');
    // Initialize global data or configurations
  },
  onShow() {
    console.log('App became visible');
  },
  onHide() {
    console.log('App became hidden');
  },
  onError(error) {
    console.error('App error:', error);
  }
});

Page Creation

Creates mini-program pages with Toutiao-specific lifecycle management and proper mock property initialization.

/**
 * Creates a mini-program page with Toutiao-specific lifecycle
 * @param options - Page configuration options
 * @returns Page instance with platform adaptations
 */
function createPage(options: PageOptions): Page;

interface PageOptions {
  /** Page data object */
  data?: Record<string, any>;
  /** Called when page loads with query parameters */
  onLoad?: (options: Record<string, any>) => void;
  /** Called when page becomes visible */
  onShow?: () => void;
  /** Called when page is ready for interaction */
  onReady?: () => void;
  /** Called when page becomes hidden */
  onHide?: () => void;
  /** Called when page is unloaded */
  onUnload?: () => void;
  /** Called when page is pulled down to refresh */
  onPullDownRefresh?: () => void;
  /** Called when page reaches bottom */
  onReachBottom?: () => void;
  /** Additional page methods and properties */
  [key: string]: any;
}

Usage Example:

import { createPage } from "@dcloudio/uni-mp-toutiao/runtime";

const pageOptions = createPage({
  data: {
    userInfo: null,
    loading: false
  },
  onLoad(query) {
    console.log('Page loaded with:', query);
    this.loadUserData();
  },
  onShow() {
    console.log('Page shown');
  },
  onReady() {
    console.log('Page ready for interaction');
  },
  loadUserData() {
    this.setData({ loading: true });
    // Load user data...
  }
});

Component Creation

Creates mini-program components with enhanced lifecycle management, relationship support, and Toutiao-specific behavior handling.

/**
 * Creates a mini-program component with Toutiao-specific behavior
 * @param options - Component configuration options
 * @returns Component instance with platform adaptations
 */
function createComponent(options: ComponentOptions): Component;

interface ComponentOptions {
  /** Component data object */
  data?: Record<string, any>;
  /** Component properties definition */
  props?: Record<string, PropDefinition>;
  /** Called when component is attached to DOM */
  attached?: () => void;
  /** Called when component is ready for interaction */
  ready?: () => void;
  /** Called when component is detached from DOM */
  detached?: () => void;
  /** Component relationship definitions */
  relations?: Record<string, RelationDefinition>;
  /** Custom component methods */
  methods?: Record<string, (...args: any[]) => any>;
  /** Additional component configuration */
  [key: string]: any;
}

interface PropDefinition {
  type: any;
  value?: any;
  observer?: (newVal: any, oldVal: any, changedPath: string) => void;
}

interface RelationDefinition {
  type: 'parent' | 'child' | 'ancestor' | 'descendant';
  target: string;
  linked?: (target: any) => void;
  linkChanged?: (target: any) => void;
  unlinked?: (target: any) => void;
}

Usage Example:

import { createComponent } from "@dcloudio/uni-mp-toutiao/runtime";

const componentOptions = createComponent({
  data: {
    count: 0,
    visible: true
  },
  props: {
    title: {
      type: String,
      value: 'Default Title',
      observer(newVal, oldVal) {
        console.log('Title changed:', newVal);
      }
    },
    initialCount: {
      type: Number,
      value: 0
    }
  },
  attached() {
    console.log('Component attached');
    this.setData({ count: this.properties.initialCount });
  },
  ready() {
    console.log('Component ready');
  },
  detached() {
    console.log('Component detached');
  },
  relations: {
    './parent-component': {
      type: 'parent',
      linked(target) {
        console.log('Linked to parent:', target);
      }
    }
  },
  methods: {
    increment() {
      this.setData({ count: this.data.count + 1 });
      this.triggerEvent('countChanged', { count: this.data.count });
    }
  }
});

Subpackage App Creation

Creates subpackage applications for advanced mini-program architecture with independent lifecycle management.

/**
 * Creates a subpackage application
 * @param options - Subpackage application options
 * @returns SubpackageApp instance
 */
function createSubpackageApp(options: SubpackageAppOptions): SubpackageApp;

interface SubpackageAppOptions {
  /** Subpackage launch handler */
  onLaunch?: () => void;
  /** Subpackage show handler */
  onShow?: () => void;
  /** Subpackage hide handler */
  onHide?: () => void;
  /** Additional subpackage configuration */
  [key: string]: any;
}

Usage Example:

import { createSubpackageApp } from "@dcloudio/uni-mp-toutiao/runtime";

const subpackageApp = createSubpackageApp({
  onLaunch() {
    console.log('Subpackage launched');
  },
  onShow() {
    console.log('Subpackage shown');
  },
  onHide() {
    console.log('Subpackage hidden');
  }
});

Special Toutiao Behaviors

Component Lifecycle Fixes

The runtime includes special handling for Toutiao platform quirks:

  • Attached Order Fix: Handles attachment order issues in Toutiao base library 2.0+
  • Event Timing: Special handling for late event reception after ready lifecycle
  • Virtual Host Support: Alternative component linking for virtualHost components
  • Inject/Provide Delay: Workaround for delayed inject/provide initialization

Mock Properties

Pages automatically receive mock properties for compatibility:

  • __route__: Current page route
  • __webviewId__: Webview identifier
  • __nodeId__: Node identifier (0 for pages)
  • __nodeid__: Alternative node identifier

Global Component Registry

Components are automatically registered in a global instances registry for relationship management and debugging purposes. Pages are identified by having nodeId === 0.

Event Communication

class EventChannel {
  /** Emit an event to all listeners */
  emit(eventName: string, ...args: any[]): void;
  /** Listen for events */
  on(eventName: string, callback: (...args: any[]) => void): void;
  /** Remove event listeners */
  off(eventName: string, callback?: (...args: any[]) => void): void;
  /** Listen for events once only */
  once(eventName: string, callback: (...args: any[]) => void): void;
}

EventChannel provides inter-component communication and is available globally via tt.EventChannel.