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

build-system.mddocs/

Build System

Compiler integration and build system that transforms uni-app code into Toutiao mini-program compatible format, including Vite plugin configuration, template processing, and platform-specific transformations.

Capabilities

Vite Plugin

Main compiler plugin that integrates uni-app with Vite for Toutiao mini-program compilation.

/**
 * Vite plugin for Toutiao mini-program compilation
 * @param options - Plugin configuration options
 * @returns Vite plugin instance configured for Toutiao platform
 */
function uniMiniProgramToutiaoPlugin(options?: PluginOptions): Plugin;

interface PluginOptions {
  /** Asset inlining size limit in bytes */
  assetsInlineLimit?: number;
  /** Vue compilation options */
  vueOptions?: VueOptions;
  /** Additional platform-specific options */
  [key: string]: any;
}

interface VueOptions {
  /** Vue template compilation options */
  template?: TemplateOptions;
  /** Vue script compilation options */
  script?: ScriptOptions;
  /** Vue style compilation options */
  style?: StyleOptions;
}

interface TemplateOptions {
  /** Custom template transformations */
  transforms?: Transform[];
  /** Template compilation mode */
  mode?: 'function' | 'module';
}

interface ScriptOptions {
  /** Script language */
  lang?: 'js' | 'ts';
  /** Additional script options */
  [key: string]: any;
}

interface StyleOptions {
  /** Style language */
  lang?: 'css' | 'scss' | 'less';
  /** Style scoping */
  scoped?: boolean;
}

Usage Example:

import { defineConfig } from 'vite';
import { uniMiniProgramToutiaoPlugin } from '@dcloudio/uni-mp-toutiao/compiler';

export default defineConfig({
  plugins: [
    uniMiniProgramToutiaoPlugin({
      assetsInlineLimit: 4096,
      vueOptions: {
        template: {
          transforms: [], // Custom transformations
        }
      }
    })
  ]
});

Template Processing

Toutiao-specific template file processing and transformations.

interface TemplateProcessing {
  /** Template file extensions */
  extensions: {
    template: '.ttml';
    style: '.ttss';
    script: '.sjs';
  };
  /** Directive prefix for Toutiao platform */
  directivePrefix: 'tt:';
  /** Custom element support */
  customElements: string[];
}

Supported File Extensions:

  • Templates: .ttml (Toutiao Template Markup Language)
  • Styles: .ttss (Toutiao Template Style Sheets)
  • Scripts: .sjs (Simple JavaScript for filters and computations)

Directive Examples:

<!-- Conditional rendering -->
<view tt:if="{{show}}">Visible content</view>

<!-- List rendering -->
<view tt:for="{{items}}" tt:key="id">
  {{item.name}}
</view>

<!-- Event binding -->
<button bindtap="handleClick">Click me</button>

Component Transformations

Specific transformations for compatibility with Toutiao platform requirements.

interface ComponentTransforms {
  /** Swiper component transformation */
  transformSwiper: (node: ASTNode) => ASTNode;
}

interface ASTNode {
  type: string;
  props?: Record<string, any>;
  children?: ASTNode[];
}

Swiper Transform Example:

The transformSwiper function previously converted disable-touch property to touchable property for ByteDance API compatibility. However, this transformation is no longer needed as the Toutiao swiper component no longer supports the touchable parameter.

<!-- Legacy transformation (no longer applied) -->
<!-- Input: <swiper disable-touch="{{true}}"></swiper> -->
<!-- Output: <swiper touchable="{{false}}"></swiper> -->

<!-- Current behavior: disable-touch is preserved as-is -->
<swiper disable-touch="{{true}}"></swiper>

Note: As per Toutiao platform documentation, the transformation logic is retained for backward compatibility but is no longer actively applied.

Custom Elements

Extended set of custom elements including ByteDance-specific components.

interface CustomElements {
  /** Complete list of Toutiao-specific custom elements */
  elements: [
    'draw-ad',
    'aweme-data', 
    'consume-card',
    'pay-button',
    'rate-button', 
    'member-button',
    'confirm-receipt-button',
    'live-preview',
    'aweme-live-book',
    'aweme-user-card',
    'rtc-room',
    'clue-order-form',
    'shop-follow-card',
    'match-media'
  ];
}

// Categorized by functionality
interface CustomElementCategories {
  /** Advertising components */
  advertising: ['draw-ad', 'aweme-data'];
  /** E-commerce components */
  ecommerce: [
    'consume-card',
    'pay-button', 
    'rate-button',
    'member-button',
    'confirm-receipt-button',
    'shop-follow-card'
  ];
  /** Live streaming and social components */
  social: [
    'live-preview',
    'aweme-live-book',
    'aweme-user-card',
    'rtc-room'
  ];
  /** Form components */
  forms: ['clue-order-form'];
  /** Media components */
  media: ['match-media'];
}

Usage Example:

<!-- E-commerce components -->
<pay-button product-id="123" bind:success="onPaymentSuccess"></pay-button>
<rate-button order-id="456" bind:rated="onRated"></rate-button>

<!-- Live streaming components -->
<live-preview stream-id="789" bind:play="onPlay"></live-preview>
<aweme-user-card user-id="abc" bind:follow="onFollow"></aweme-user-card>

<!-- Advertising -->
<draw-ad ad-id="def" bind:loaded="onAdLoaded"></draw-ad>

Component Features

Configuration for Toutiao-specific component behavior.

interface ComponentFeatures {
  /** Slot configuration */
  slot: {
    fallbackContent: true;
    dynamicSlotNames: true;
  };
  /** Class binding configuration */
  class: {
    array: false; // Only object-style class binding
  };
  /** Component directory */
  componentDir: 'ttcomponents/';
  /** Custom v-show handling */
  customHiddenBind: true;
}

Class Binding Example:

<!-- Supported: Object-style class binding -->
<view class="{{classObject}}"></view>

<!-- Not supported: Array-style class binding -->
<!-- <view class="{{[class1, class2]}}"></view> -->

Build Configuration

Platform-specific build configuration and constants.

interface BuildConfiguration {
  /** Platform detection constants */
  constants: {
    __PLATFORM__: 'mp-toutiao';
    __GLOBAL__: 'tt';
  };
  /** Platform title */
  platformTitle: '字节跳动小程序';
  /** Asset inlining limit */
  assetsInlineLimit: number;
  /** Component directory for mini-program components */
  componentDir: 'ttcomponents/';
}

Distribution Builds

Information about built distribution files and their purposes.

interface DistributionFiles {
  /** API runtime module */
  'dist/uni.api.esm.js': {
    size: '41KB';
    purpose: 'API runtime functionality';
  };
  /** Compiler module */
  'dist/uni.compiler.js': {
    size: '3.6KB';
    purpose: 'Compilation functionality';
  };
  /** Mini-program runtime module */
  'dist/uni.mp.esm.js': {
    size: '36KB';
    purpose: 'Mini-program runtime';
  };
  /** Extended UTS support */
  'dist-x/': {
    purpose: 'uni-app TypeScript extended builds';
  };
}

Advanced Build Features

External Component Integration

Support for external components and plugins.

<!-- External mini-program components -->
<ttcomponent-external bind:event="handler"></ttcomponent-external>

<!-- External plugins -->
<ext-component plugin="ext://industry/pay-button"></ext-component>

Testing Integration

Build system includes comprehensive testing support:

interface TestingFeatures {
  /** Component testing */
  componentTesting: {
    /** v-show directive transformation testing */
    vShowTransform: boolean;
    /** Native component pass-through testing */
    nativeComponents: boolean;
  };
  /** Mini-program component testing */
  miniProgramTesting: {
    /** External component integration */
    externalComponents: boolean;
    /** Plugin support testing */
    pluginSupport: boolean;
    /** Built-in components compilation */
    builtinComponents: boolean;
  };
}

UTS (Uni-app TypeScript) Support

Extended TypeScript support for enhanced development experience:

interface UTSSupport {
  /** Extended build output */
  distX: string; // 'dist-x/' directory
  /** Enhanced type safety */
  typeChecking: boolean;
  /** Advanced transformations */
  advancedTransforms: boolean;
}

Platform Integration Constants

Build-time constants available during compilation:

declare const __PLATFORM__: 'mp-toutiao';
declare const __GLOBAL__: 'tt';

// Usage in code
if (__PLATFORM__ === 'mp-toutiao') {
  // Toutiao-specific code
  tt.showToast({ title: 'Toutiao Platform' });
}

Webpack Configuration

For projects using Webpack instead of Vite:

const { uniMiniProgramToutiaoPlugin } = require('@dcloudio/uni-mp-toutiao/compiler');

module.exports = {
  plugins: [
    uniMiniProgramToutiaoPlugin({
      assetsInlineLimit: 4096
    })
  ],
  resolve: {
    extensions: ['.js', '.ts', '.vue', '.ttml', '.ttss']
  }
};

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