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.
npm install @dcloudio/uni-mp-toutiao// 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;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
}
});uni-app MP-Toutiao is built around several key components:
createApp, createPage, and createComponent functions with Toutiao-specific lifecycle management and component behavior adaptationstt global object and platform-specific servicesMain 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;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;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;
}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;
};
}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;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;
}