or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tarojs--plugin-platform-tt

Taro platform plugin for compiling applications to TouTiao (ByteDance) mini program platform

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tarojs/plugin-platform-tt@4.1.x

To install, run

npx @tessl/cli install tessl/npm-tarojs--plugin-platform-tt@4.1.0

index.mddocs/

@tarojs/plugin-platform-tt

The @tarojs/plugin-platform-tt is a Taro platform plugin that enables compilation and deployment of Taro applications to TouTiao (ByteDance) mini program platform. This plugin provides platform-specific APIs, components, build configurations, and runtime support necessary for TouTiao mini program development.

Package Information

  • Package Name: @tarojs/plugin-platform-tt
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tarojs/plugin-platform-tt

Core Imports

import ttPlatformPlugin from "@tarojs/plugin-platform-tt";
import { TT } from "@tarojs/plugin-platform-tt";

For CommonJS:

const ttPlatformPlugin = require("@tarojs/plugin-platform-tt");
const { TT } = require("@tarojs/plugin-platform-tt");

Runtime utilities and components:

import { 
  initNativeApi, 
  needPromiseApis, 
  components, 
  hostConfig 
} from "@tarojs/plugin-platform-tt/dist/runtime-utils";

Basic Usage

import type { IPluginContext } from '@tarojs/service';
import ttPlatformPlugin from '@tarojs/plugin-platform-tt';

// In a Taro config file
export default {
  plugins: [
    // Register the TouTiao platform plugin
    ttPlatformPlugin
  ]
};

// The plugin will automatically register the 'tt' platform
// when Taro builds with --type tt

Architecture

The plugin is built around several key components:

  • Platform Registration: Integrates with Taro's plugin system to register the TouTiao platform
  • Template System: Provides TouTiao-specific template compilation with SJS support
  • Component System: Maps standard Taro components to TouTiao-specific implementations
  • API Adaptation: Transforms Taro APIs to work with TouTiao's native APIs
  • Build Configuration: Handles platform-specific build settings and file types
  • Runtime Support: Provides runtime utilities for TouTiao mini program execution

Capabilities

Platform Plugin Registration

The main plugin function that registers TouTiao platform support with Taro.

/**
 * Main plugin function that registers TouTiao platform support
 * @param ctx - Taro plugin context providing platform registration capabilities
 */
export default (ctx: IPluginContext) => {
  ctx.registerPlatform({
    name: 'tt',
    useConfigName: 'mini',
    async fn ({ config }) {
      // Handles external pages and app configuration
      // Creates and starts TT platform instance
    }
  });
};

TT Platform Class

Platform implementation class that can be extended by other platform plugins.

/**
 * TouTiao platform implementation class extending TaroPlatformBase
 */
export class TT extends TaroPlatformBase {
  platform: 'tt';
  globalObject: 'tt';
  projectConfigJson: 'project.tt.json';
  runtimePath: string;
  taroComponentsPath: string;
  fileType: {
    templ: '.ttml';
    style: '.ttss';
    config: '.json';
    script: '.js';
    xs: '.sjs';
  };
  template: Template;
  
  constructor(ctx: any, config: any);
  modifyTemplate(): void;
}

Template Engine

Template compilation system for TouTiao mini program templates.

/**
 * Template engine for TouTiao mini program template compilation
 */
export class Template extends RecursiveTemplate {
  supportXS: true;
  Adapter: {
    if: 'tt:if';
    else: 'tt:else';
    elseif: 'tt:elif';
    for: 'tt:for';
    forItem: 'tt:for-item';
    forIndex: 'tt:for-index';
    key: 'tt:key';
    xs: 'sjs';
    type: 'tt';
  };
  
  replacePropName(name: string, value: string): string;
  buildXsTemplate(filePath?: string): string;
}

API Transformation

Functions for adapting Taro APIs to work with TouTiao platform.

/**
 * Transforms API calls for TouTiao platform compatibility
 * @param api - API name to transform
 * @param options - API options to modify
 * @returns Transformed API configuration
 */
export function transformMeta(
  api: string, 
  options: Record<string, any>
): { key: string; options: Record<string, any> };

/**
 * Initializes native TouTiao APIs in Taro runtime
 * @param taro - Taro instance to enhance with TouTiao APIs
 */
export function initNativeApi(taro: any): void;

Component Configuration

Pre-configured component settings for TouTiao platform compatibility.

/**
 * Component configuration object for TouTiao-specific components
 */
export const components: {
  // Standard components with TouTiao-specific attributes
  Icon: { size: '24' };
  Input: {
    'adjust-position': '!0';
    'hold-keyboard': '!1';
    'clue-type': '0';
    bindKeyboardHeightChange: '';
  };
  Button: {
    bindGetPhoneNumber: '';
    'data-channel': '';
    'data-aweme-id': '';
    'group-id': '';
    'data-is-half-page': '';
    bindOpenAwemeUserProfile: '';
    bindJoinGroup: '';
  };
  Form: {
    'report-submit-timeout': '0';
  };
  Slider: {
    color: "'#e9e9e9'";
    'selected-color': "'#1aad19'";
  };
  WebView: {
    'progressbar-color': "'#51a0d8'";
  };
  Video: {
    'play-btn-position': "'center'";
    'pre-roll-unit-id': '';
    'post-roll-unit-id': '';
    'vslide-gesture': '!1';
    'vslide-gesture-in-fullscreen': '!0';
    'enable-play-gesture': '!1';
    'show-playback-rate-btn': '!1';
    'enable-play-in-background': '!1';
    signature: '';
    bindProgress: '';
    bindSeekComplete: '';
    bindAdLoad: '';
    bindAdStart: '';
    bindAdEnded: '';
    bindAdError: '';
    bindAdClose: '';
    bindLoadedMetadata: '';
    bindPlaybackRateChange: '';
    bindMuteChange: '';
    bindControlTap: '';
    bindEnterBackground: '';
    bindCloseBackground: '';
    bindLeaveBackground: '';
  };
  Ad: {
    fixed: '';
    type: "'banner'";
    scale: '100';
  };
  Textarea: {
    'disable-default-padding': '!1';
    'confirm-type': "'return'";
    'confirm-hold': '!1';
    'show-confirm-bar': '!0';
    'adjust-position': '!0';
    'hold-keyboard': '!1';
  };
  ScrollView: {
    enhanced: '!1';
    bounces: '!0';
    'refresher-enabled': '!1';
    'refresher-threshold': '55';
    'refresher-default-style': "'black'";
    'refresher-background': "'#FFF'";
    'refresher-triggered': '!1';
    bindRefresherPulling: '';
    bindRefresherRefresh: '';
    bindRefresherRestore: '';
    bindRefresherAbort: '';
  };
  Canvas: {
    type: '';
  };
  Map: {
    polygons: '[]';
    rotate: '0';
    skew: '0';
    'max-scale': '19';
    'min-scale': '3';
    'enable-3D': '!1';
    'show-compass': '!1';
    'show-scale': '!1';
    'enable-overlooking': '!1';
    'enable-zoom': '!0';
    'enable-scroll': '!0';
    'enable-rotate': '!1';
    'enable-satellite': '!1';
    'enable-traffic': '!1';
    'enable-poi': '!0';
    'enable-building': '!0';
    bindLabelTap: '';
    bindRegionChange: '';
    bindAnchorPointTap: '';
  };
  // TouTiao-specific components
  RtcRoom: {
    'user-id': '';
    mode: 'camera';
    'device-position': 'front';
    bindError: '';
  };
  PayButton: {
    mode: '1';
    'goods-id': '';
    'goods-type': '';
    'order-status': '0';
    'order-id': '';
    'refund-id': '';
    'refund-total-amount': '';
    'biz-line': '1';
    'marketing-ready': '!1';
    bindGetGoodsInfo: '';
    bindPlaceOrder: '';
    bindError: '';
    bindApplyRefund: '';
    bindRefund: '';
    bindPay: '';
  };
  ConsumeCard: {
    'order-id': '';
    bindConsume: '';
    bindRefund: '';
    bindApplyRefund: '';
    bindError: '';
  };
  AwemeData: {
    'aweme-id': '';
    type: "'avatar'";
    'disable-default': '';
    'default-avatar': '';
    'default-text': '';
    bindError: '';
  };
  RateButton: {
    'order-id': '';
    bindInit: '';
    bindSuccess: '';
    bindError: '';
  };
  OpenData: {
    type: '';
    'default-text': '';
    'default-avatar': '';
    'use-empty-value': '!1';
    bindError: '';
  };
  AwemeUserCard: {
    'aweme-id': '';
    width: '504';
    height: '144';
    fixed: '!1';
    'left-right-padding': '';
    bindError: '';
  };
};

Promise-based APIs

Set of TouTiao APIs that require Promise wrapping for asynchronous operations.

/**
 * Set of API names that need Promise wrapping for TouTiao platform
 */
export const needPromiseApis: Set<string>;

The set includes these TouTiao-specific APIs:

  • applyRefund - Apply for refund operations
  • canRateAwemeOrders - Check if orders can be rated
  • checkFollowAwemeState - Check follow state for Aweme users
  • checkFollowState - Check general follow state
  • continueToPay - Continue payment process
  • createOrder - Create new orders
  • exitMiniProgram - Exit mini program
  • followAwemeUser - Follow Aweme users
  • followOfficialAccount - Follow official accounts
  • getMenuButtonLayout - Get menu button layout information
  • getUserProfile - Get user profile data
  • hideInteractionBar - Hide interaction bar
  • navigateToVideoView - Navigate to video view
  • openAwemeUserProfile - Open Aweme user profiles
  • openEcGood - Open e-commerce goods
  • openWebcastRoom - Open webcast rooms
  • pay - Process payments
  • rateAwemeOrder - Rate Aweme orders
  • showDouyinOpenAuth - Show Douyin authorization
  • showInteractionBar - Show interaction bar

React Components

TouTiao-specific React components for use in Taro applications.

/**
 * Re-exports all standard Taro mini program components
 */
export * from '@tarojs/components/mini';

/**
 * TouTiao-specific React components
 */
export const RtcRoom: 'rtc-room';
export const PayButton: 'pay-button';
export const ConsumeCard: 'consume-card';
export const AwemeData: 'aweme-data';
export const RateButton: 'rate-button';
export const OpenData: 'open-data';
export const AwemeUserCard: 'aweme-user-card';

Runtime Configuration

Runtime host configuration for TouTiao platform integration.

/**
 * Runtime host configuration for TouTiao platform
 */
export const hostConfig: {
  initNativeApi: (taro: any) => void;
  modifyMpEventImpl: (event: any) => void;
  modifyTaroEventReturn: (node: any, event: any, returnVal: any) => any;
};

The hostConfig object provides:

  • initNativeApi: Initializes TouTiao native APIs in the Taro runtime
  • modifyMpEventImpl: Modifies events, specifically transforming regionchange events to use event.detail.type
  • modifyTaroEventReturn: Handles special return value processing for pay-button component events (applyrefund and getgoodsinfo)

Type Extensions

TypeScript type extensions for Taro APIs with TouTiao-specific properties.

declare module '@tarojs/taro' {
  namespace getSystemInfoSync {
    interface Result {
      /** Host APP name for TouTiao platform */
      appName?: string;
    }
  }

  namespace getSystemInfo {
    interface Result {
      /** Host APP name for TouTiao platform */
      appName?: string;
    }
  }
}

External Page Handling

The plugin automatically handles external pages (pages with ext:// prefix) by:

  1. Filtering external pages from the main app configuration during modifyAppConfig
  2. Collecting external page references in an array
  3. Adding external pages back to the final build assets via modifyBuildAssets
  4. Ensuring external pages are properly included in the compiled app.json

This allows TouTiao mini programs to reference external pages hosted by the platform while maintaining proper build configuration.

Error Handling

The plugin handles several error scenarios:

  • Template compilation errors: Provides fallbacks for unsupported template directives
  • API transformation errors: Safely transforms API calls with error boundaries
  • Component configuration errors: Uses default values when custom configurations fail
  • Build asset errors: Handles missing or malformed app.json files gracefully

Platform-Specific Features

File Extensions

  • Templates: .ttml files for TouTiao template markup
  • Styles: .ttss files for TouTiao-specific styling
  • Scripts: .sjs files for TouTiao Script (similar to WXS)
  • Configuration: .json files for component and page configuration

Build Configuration

  • Project config: Uses project.tt.json for TouTiao-specific project settings
  • Global object: Accesses TouTiao APIs through the global tt object
  • Runtime path: Loads runtime files from the plugin's dist directory

Event System

  • Event transformation: Converts regionchange events to use event.detail.type
  • Custom event handling: Special handling for pay-button component events
  • Event binding: Automatic binding transformation (e.g., bindlongtap → bindlongpress)