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

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@dcloudio/uni-mp-toutiao@3.0.x

To install, run

npx @tessl/cli install tessl/npm-dcloudio--uni-mp-toutiao@3.0.0

index.mddocs/

uni-app MP-Toutiao

uni-app MP-Toutiao is a specialized platform adapter that enables uni-app applications to run on ByteDance's Toutiao (今日头条/抖音) mini-program platform. It provides comprehensive runtime adaptations, API mappings, compiler transformations, and build configurations necessary for deploying cross-platform uni-app applications to the Toutiao ecosystem.

Package Information

  • Package Name: @dcloudio/uni-mp-toutiao
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @dcloudio/uni-mp-toutiao
  • Platform: ByteDance Toutiao Mini Program Platform

Core Imports

// Main package exports (parsing utilities only)
import { parsePage, parseComponent, initPageLifetimes, initComponentLifetimes, instances } from "@dcloudio/uni-mp-toutiao";

// Runtime components (imported from separate runtime module)
import { createApp, createPage, createComponent, createSubpackageApp } from "@dcloudio/uni-mp-toutiao/runtime";

// API runtime initialization (default export)
import initUni from "@dcloudio/uni-mp-toutiao/api";

// Compiler plugin (default export array)
import uniMiniProgramToutiaoPlugin from "@dcloudio/uni-mp-toutiao/compiler";

For CommonJS:

const { parsePage, parseComponent, initPageLifetimes, initComponentLifetimes, instances } = require("@dcloudio/uni-mp-toutiao");
const { createApp, createPage, createComponent, createSubpackageApp } = require("@dcloudio/uni-mp-toutiao/runtime");
const initUni = require("@dcloudio/uni-mp-toutiao/api").default;
const uniMiniProgramToutiaoPlugin = require("@dcloudio/uni-mp-toutiao/compiler").default;

Basic Usage

import { createApp, createPage } from "@dcloudio/uni-mp-toutiao/runtime";
import initUni from "@dcloudio/uni-mp-toutiao/api";

// Initialize uni-app runtime for Toutiao platform (initUni is already called during import)
// initUni() is not needed as it's automatically executed

// Create Toutiao mini-program app
const app = createApp({
  onLaunch() {
    console.log('Toutiao Mini Program Launched');
  }
});

// Create a page with Toutiao-specific lifecycle
const pageOptions = createPage({
  data: {
    message: 'Hello Toutiao!'
  },
  onLoad() {
    // Page loaded with Toutiao adaptations
  }
});

Architecture

uni-app MP-Toutiao is built around several key components:

  • Runtime Layer: Provides createApp, createPage, and createComponent functions with Toutiao-specific lifecycle management and component behavior adaptations
  • API Layer: Maps uni-app APIs to Toutiao platform equivalents through protocols and shims, handling platform differences transparently
  • Compiler Layer: Vite plugin and build transformations that convert uni-app templates and components to Toutiao-compatible format
  • Platform Integration: Direct integration with Toutiao's tt global object and platform-specific services
  • Component System: Enhanced component lifecycle management with support for virtual hosts, proper event timing, and relationship handling

Capabilities

Parsing Utilities

Main package exports for parsing and managing page and component options with Toutiao-specific adaptations.

function parsePage(options: PageOptions): ParsedPageOptions;
function parseComponent(options: ComponentOptions): ParsedComponentOptions;
function initPageLifetimes(): void;
function initComponentLifetimes(): void;

interface GlobalInstances {
  [key: string]: ComponentInstance;
}
const instances: GlobalInstances;

Parsing Utilities

Runtime Management

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

function createApp(options: AppOptions): App;
function createPage(options: PageOptions): Page;
function createComponent(options: ComponentOptions): Component;
function createSubpackageApp(options: SubpackageAppOptions): SubpackageApp;

Runtime Management

API Integration

Seamless API integration that bridges uni-app's universal APIs with Toutiao's platform-specific implementations through protocols and shims.

// Default export: initialized uni API runtime
declare const initUni: any;

interface ApiShims {
  getProvider: (options: ProviderOptions) => void;
}

interface ApiProtocols {
  redirectTo: any;
  previewImage: any;
  getSystemInfo: any;
  getSystemInfoSync: any;
  onError: any;
  offError: any;
  navigateTo: any;
  connectSocket: any;
  scanCode: any;
  startAccelerometer: any;
  login: any;
  getUserInfo: any;
  requestPayment: any;
}

API Integration

Build System

Compiler integration and build system that transforms uni-app code into Toutiao mini-program compatible format.

// Default export: array of Vite plugins including custom Toutiao plugin
declare const uniMiniProgramToutiaoPlugin: Plugin[];

interface Plugin {
  name: string;
  config?: () => ViteConfig;
  [key: string]: any;
}

interface ViteConfig {
  define?: Record<string, any>;
  build?: {
    assetsInlineLimit?: number;
  };
}

Build System

Platform Services

Direct integration with Toutiao platform services and ByteDance-specific functionality.

interface ToutiaoGlobal {
  createApp: (options: any) => any;
  createPage: (options: any) => any;
  createComponent: (options: any) => any;
  createSubpackageApp: (options: any) => any;
  EventChannel: typeof EventChannel;
  getSystemInfoSync: () => any;
}

declare const tt: ToutiaoGlobal;

// Platform utility functions
function getBaseSystemInfo(): any;

Platform Services

Types

interface AppOptions {
  onLaunch?: () => void;
  onShow?: () => void;
  onHide?: () => void;
  onError?: (error: string) => void;
  [key: string]: any;
}

interface PageOptions {
  data?: Record<string, any>;
  onLoad?: (options: Record<string, any>) => void;
  onShow?: () => void;
  onReady?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
  [key: string]: any;
}

interface ComponentOptions {
  data?: Record<string, any>;
  props?: Record<string, any>;
  attached?: () => void;
  ready?: () => void;
  detached?: () => void;
  relations?: Record<string, RelationDefinition>;
  [key: string]: any;
}

interface SubpackageAppOptions {
  [key: string]: any;
}

interface ProviderOptions {
  service: 'oauth' | 'share' | 'payment' | 'push';
  success?: (result: ProviderResult) => void;
  fail?: (error: any) => void;
}

interface ProviderResult {
  service: string;
  provider: string[];
}

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

interface ValidationError {
  path: string;
  message: string;
  value: any;
}

class EventChannel {
  emit(eventName: string, ...args: any[]): void;
  on(eventName: string, callback: (...args: any[]) => void): void;
  off(eventName: string, callback?: (...args: any[]) => void): void;
  once(eventName: string, callback: (...args: any[]) => void): void;
}