CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-mp-toutiao

This package is the uni-app Toutiao (ByteDance) mini-program support module that enables developers to compile and deploy uni-app applications to the Toutiao mini-program platform.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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.

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-mp-toutiao

docs

api-integration.md

build-system.md

index.md

parsing-utilities.md

platform-services.md

runtime.md

tile.json