Mini Program Academy

English

中文

English

中文

Theme

ByteDance Mini-Program Platform ​

ByteDance Mini-Program is a lightweight application platform developed by ByteDance, allowing users to access applications directly within ByteDance's ecosystem including TikTok, Douyin, and Toutiao without downloading separate apps.

Platform Overview ​

What is ByteDance Mini-Program? ​

ByteDance Mini-Program is a sub-application that runs within ByteDance's family of apps. It leverages ByteDance's massive user base, content ecosystem, and recommendation algorithms to provide engaging user experiences.

Key Features ​

  • Multi-App Integration: Runs across TikTok, Douyin, Toutiao, and other ByteDance apps
  • Content-Rich Ecosystem: Deep integration with ByteDance's content platform
  • AI-Powered Recommendations: Leverages ByteDance's recommendation algorithms
  • Social Features: Built-in social sharing and interaction capabilities
  • Rich Media Support: Advanced video and image processing capabilities
  • Global Reach: Access to ByteDance's international user base
  • Performance Optimized: High-performance runtime environment

Development Environment ​

Developer Tools ​

ByteDance Mini-Program Studio is the official IDE:

  • Code Editor: Advanced code editing with IntelliSense
  • Real-time Preview: Instant preview across different ByteDance apps
  • Simulator: Multi-device and multi-app simulation
  • Performance Tools: Comprehensive performance analysis
  • Debugging Tools: Advanced debugging capabilities

System Requirements ​

  • Operating System: Windows 7+, macOS 10.12+
  • ByteDance Apps: Latest versions of target apps
  • Developer Account: ByteDance Mini-Program developer account required

Getting Started ​

Registration Process ​

  1. Create Developer Account

  2. Create Mini-Program

    • Login to developer console
    • Create new mini-program project
    • Configure application information
    • Get AppID for development

Development Setup ​

bash
# Download ByteDance Mini-Program Studio
# Visit: https://microapp.bytedance.com/dev/cn/mini-app/develop/developer-instrument/developer-instrument-update-and-download

# Create new project in IDE
# Enter AppID and project details
# Choose template or start from scratch

Project Structure ​

bytedance-miniprogram/
├── pages/              # Page files
│   ├── index/
│   │   ├── index.js    # Page logic
│   │   ├── index.json  # Page configuration
│   │   ├── index.ttml  # Page structure
│   │   └── index.ttss  # Page styles
├── components/         # Custom components
├── utils/              # Utility functions
├── app.js             # App logic
├── app.json           # App configuration
├── app.ttss           # Global styles
└── project.config.json # Project configuration

Core Technologies ​

TTML (TikTok Template Markup Language) ​

TTML is ByteDance's markup language for building user interfaces:

html
<!-- Basic structure -->
<view class="container">
  <text class="title">{{title}}</text>
  <button bindtap="handleClick">Click Me</button>
</view>

<!-- Conditional rendering -->
<view tt:if="{{condition}}">
  <text>Condition is true</text>
</view>
<view tt:else>
  <text>Condition is false</text>
</view>

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

<!-- Template usage -->
<template name="item-template">
  <view class="item">
    <text>{{name}}</text>
    <image src="{{imageUrl}}" />
  </view>
</template>

<template is="item-template" data="{{name: 'Product', imageUrl: '/images/product.jpg'}}"/>

TTSS (TikTok Style Sheets) ​

TTSS is ByteDance's styling language with additional features:

css
/* Global styles */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
}

/* Responsive units */
.title {
  font-size: 32rpx;  /* rpx: responsive pixel */
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 600;
}

/* Import styles */
@import "common.ttss";

/* Animation */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30rpx, 0);
  }
  70% {
    transform: translate3d(0, -15rpx, 0);
  }
  90% {
    transform: translate3d(0, -4rpx, 0);
  }
}

.bounce {
  animation: bounce 1s ease infinite;
}

JavaScript Logic ​

javascript
// app.js - Application logic
App({
  onLaunch(options) {
    console.log('App launched', options)
    this.initializeApp()
  },
  
  onShow(options) {
    console.log('App shown', options)
    // Handle app show with source info
    console.log('Launch source:', options.scene)
  },
  
  onHide() {
    console.log('App hidden')
  },
  
  initializeApp() {
    // Initialize app
    tt.getSystemInfo({
      success: (res) => {
        console.log('System info:', res)
        this.globalData.systemInfo = res
      }
    })
  },
  
  globalData: {
    userInfo: null,
    systemInfo: null
  }
})

// page.js - Page logic
Page({
  data: {
    title: 'Hello ByteDance Mini-Program',
    items: [],
    loading: false
  },
  
  onLoad(options) {
    console.log('Page loaded with options:', options)
    this.loadData()
  },
  
  onShow() {
    console.log('Page shown')
  },
  
  onReady() {
    console.log('Page ready')
  },
  
  onShareAppMessage() {
    return {
      title: 'Share this amazing mini-program',
      path: '/pages/index/index',
      imageUrl: '/images/share.jpg'
    }
  },
  
  loadData() {
    this.setData({ loading: true })
    
    tt.request({
      url: 'https://api.example.com/data',
      method: 'GET',
      success: (res) => {
        this.setData({
          items: res.data,
          loading: false
        })
      },
      fail: (err) => {
        console.error('Request failed:', err)
        this.setData({ loading: false })
      }
    })
  },
  
  handleClick(e) {
    console.log('Button clicked', e)
    tt.showToast({
      title: 'Success!',
      icon: 'success',
      duration: 2000
    })
  }
})

API Categories ​

Basic APIs ​

Interface APIs ​

javascript
// Show toast
tt.showToast({
  title: 'Operation successful',
  icon: 'success',
  duration: 3000
})

// Show modal
tt.showModal({
  title: 'Confirm',
  content: 'Are you sure to proceed?',
  success: (res) => {
    if (res.confirm) {
      console.log('User confirmed')
    }
  }
})

// Show loading
tt.showLoading({
  title: 'Loading...'
})

tt.hideLoading()

// Show action sheet
tt.showActionSheet({
  itemList: ['Option 1', 'Option 2', 'Option 3'],
  success: (res) => {
    console.log('Selected index:', res.tapIndex)
  }
})
javascript
// Navigate to page
tt.navigateTo({
  url: '/pages/detail/detail?id=123'
})

// Redirect to page
tt.redirectTo({
  url: '/pages/login/login'
})

// Switch tab
tt.switchTab({
  url: '/pages/home/home'
})

// Go back
tt.navigateBack({
  delta: 1
})

// Relaunch app
tt.reLaunch({
  url: '/pages/index/index'
})

Network APIs ​

javascript
// HTTP request
tt.request({
  url: 'https://api.example.com/users',
  method: 'POST',
  data: {
    name: 'John',
    email: 'john@example.com'
  },
  header: {
    'Content-Type': 'application/json'
  },
  success: (res) => {
    console.log('Request success:', res.data)
  },
  fail: (err) => {
    console.error('Request failed:', err)
  }
})

// Upload file
tt.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: tempFilePath,
  name: 'file',
  formData: {
    user: 'test'
  },
  success: (res) => {
    console.log('Upload success:', res)
  }
})

// Download file
tt.downloadFile({
  url: 'https://example.com/file.pdf',
  success: (res) => {
    console.log('Download success:', res.tempFilePath)
  }
})

Storage APIs ​

javascript
// Synchronous storage
tt.setStorageSync('userToken', 'abc123')
const token = tt.getStorageSync('userToken')
tt.removeStorageSync('userToken')
tt.clearStorageSync()

// Asynchronous storage
tt.setStorage({
  key: 'userInfo',
  data: {
    name: 'John',
    age: 25,
    interests: ['music', 'travel', 'technology']
  },
  success: () => {
    console.log('Storage set successfully')
  }
})

tt.getStorage({
  key: 'userInfo',
  success: (res) => {
    console.log('User info:', res.data)
  }
})

Device APIs ​

javascript
// Get system info
tt.getSystemInfo({
  success: (res) => {
    console.log('System info:', res)
    console.log('Platform:', res.platform)
    console.log('Version:', res.version)
    console.log('Screen:', res.screenWidth, res.screenHeight)
  }
})

// Get location
tt.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log('Location:', res.latitude, res.longitude)
    console.log('Speed:', res.speed)
    console.log('Accuracy:', res.accuracy)
  }
})

// Vibrate
tt.vibrateLong()
tt.vibrateShort()

// Set clipboard
tt.setClipboardData({
  data: 'Hello ByteDance Mini-Program',
  success: () => {
    console.log('Copied to clipboard')
  }
})

// Get clipboard
tt.getClipboardData({
  success: (res) => {
    console.log('Clipboard content:', res.data)
  }
})

Media and Content APIs ​

Video APIs ​

javascript
// Create video context
const videoContext = tt.createVideoContext('myVideo')

// Play video
videoContext.play()

// Pause video
videoContext.pause()

// Seek to position
videoContext.seek(30) // 30 seconds

// Request full screen
videoContext.requestFullScreen({
  direction: 90 // 0: normal, 90: rotate 90 degrees
})

// Exit full screen
videoContext.exitFullScreen()

Camera APIs ​

javascript
// Create camera context
const cameraContext = tt.createCameraContext()

// Take photo
cameraContext.takePhoto({
  quality: 'high',
  success: (res) => {
    console.log('Photo taken:', res.tempImagePath)
  }
})

// Start recording
cameraContext.startRecord({
  success: () => {
    console.log('Recording started')
  }
})

// Stop recording
cameraContext.stopRecord({
  success: (res) => {
    console.log('Recording stopped:', res.tempThumbPath, res.tempVideoPath)
  }
})

Audio APIs ​

javascript
// Create audio context
const audioContext = tt.createAudioContext()

// Play audio
audioContext.play()

// Pause audio
audioContext.pause()

// Set audio source
audioContext.setSrc('https://example.com/audio.mp3')

// Get audio info
tt.getBackgroundAudioPlayerState({
  success: (res) => {
    console.log('Audio state:', res)
  }
})

Component Development ​

Custom Components ​

javascript
// components/media-player/media-player.js
Component({
  properties: {
    src: {
      type: String,
      value: ''
    },
    autoplay: {
      type: Boolean,
      value: false
    },
    controls: {
      type: Boolean,
      value: true
    }
  },
  
  data: {
    playing: false,
    currentTime: 0,
    duration: 0
  },
  
  methods: {
    onPlay() {
      this.setData({ playing: true })
      this.triggerEvent('play')
    },
    
    onPause() {
      this.setData({ playing: false })
      this.triggerEvent('pause')
    },
    
    onTimeUpdate(e) {
      this.setData({
        currentTime: e.detail.currentTime,
        duration: e.detail.duration
      })
    },
    
    togglePlay() {
      const videoContext = tt.createVideoContext('video', this)
      if (this.data.playing) {
        videoContext.pause()
      } else {
        videoContext.play()
      }
    }
  },
  
  lifetimes: {
    attached() {
      console.log('Media player component attached')
    }
  }
})
html
<!-- components/media-player/media-player.ttml -->
<view class="media-player">
  <video 
    id="video"
    src="{{src}}"
    autoplay="{{autoplay}}"
    controls="{{controls}}"
    bindplay="onPlay"
    bindpause="onPause"
    bindtimeupdate="onTimeUpdate"
    class="video-player">
  </video>
  
  <view class="custom-controls" tt:if="{{!controls}}">
    <button bindtap="togglePlay" class="play-btn">
      {{playing ? 'Pause' : 'Play'}}
    </button>
    <text class="time-info">
      {{currentTime}} / {{duration}}
    </text>
  </view>
</view>

Using Custom Components ​

json
{
  "usingComponents": {
    "media-player": "/components/media-player/media-player"
  }
}
html
<media-player 
  src="{{videoUrl}}"
  autoplay="{{false}}"
  controls="{{true}}"
  bind:play="handlePlay"
  bind:pause="handlePause">
</media-player>

Advanced Features ​

Social Sharing ​

javascript
// Share to social platforms
Page({
  onShareAppMessage() {
    return {
      title: 'Check out this amazing content!',
      path: '/pages/detail/detail?id=123',
      imageUrl: '/images/share-image.jpg'
    }
  },
  
  onShareTimeline() {
    return {
      title: 'Shared from ByteDance Mini-Program',
      query: 'id=123&source=timeline'
    }
  },
  
  // Custom share
  handleShare() {
    tt.showShareMenu({
      withShareTicket: true,
      success: () => {
        console.log('Share menu shown')
      }
    })
  }
})

Content Recommendation ​

javascript
// Get personalized content recommendations
tt.request({
  url: 'https://api.example.com/recommendations',
  data: {
    user_id: 'user123',
    category: 'entertainment',
    count: 10
  },
  success: (res) => {
    this.setData({
      recommendations: res.data
    })
  }
})

// Report user interaction for better recommendations
tt.reportAnalytics('content_view', {
  content_id: 'content123',
  content_type: 'video',
  duration: 30
})

Live Streaming Integration ​

javascript
// Create live player context
const liveContext = tt.createLivePlayerContext('livePlayer')

// Start live streaming
liveContext.play()

// Stop live streaming
liveContext.stop()

// Mute/unmute
liveContext.mute()
liveContext.unmute()

// Handle live events
Page({
  onLiveStateChange(e) {
    console.log('Live state changed:', e.detail)
  },
  
  onLiveNetStatus(e) {
    console.log('Live network status:', e.detail)
  }
})

Performance Optimization ​

Best Practices ​

  1. Media Optimization
    • Use appropriate video/image formats
    • Implement lazy loading for media content
    • Optimize media file sizes
javascript
// Lazy load images
const intersectionObserver = tt.createIntersectionObserver(this)
intersectionObserver.relativeToViewport().observe('.lazy-image', (res) => {
  if (res.intersectionRatio > 0) {
    // Load image
    this.setData({
      [`images[${res.dataset.index}].loaded`]: true
    })
  }
})

  1. Data Management

    • Use efficient data structures
    • Implement data pagination
    • Cache frequently used data

  2. Code Splitting

    • Use subpackages for large applications
    • Implement on-demand loading
json
{
  "pages": [...],
  "subPackages": [
    {
      "root": "pages/video",
      "pages": [
        "player/player",
        "list/list"
      ]
    }
  ]
}

Performance Monitoring ​

javascript
// Monitor performance
const observer = tt.createPerformanceObserver((entryList) => {
  entryList.getEntries().forEach((entry) => {
    console.log('Performance entry:', entry)
  })
})

observer.observe({
  entryTypes: ['render', 'script', 'loadPackage']
})

// Custom performance tracking
const startTime = Date.now()
// ... your code ...
const endTime = Date.now()
console.log('Operation took:', endTime - startTime, 'ms')

Testing and Debugging ​

Debugging Tools ​

  1. Console Debugging

    • Use console methods for logging
    • Inspect network requests
    • Monitor performance metrics

  2. Remote Debugging

    • Enable remote debugging in IDE
    • Test on real devices
    • Debug across different ByteDance apps

Testing Strategies ​

javascript
// Mock data for testing
const mockVideoData = {
  videos: [
    {
      id: 1,
      title: 'Sample Video 1',
      url: 'https://example.com/video1.mp4',
      thumbnail: 'https://example.com/thumb1.jpg'
    },
    {
      id: 2,
      title: 'Sample Video 2',
      url: 'https://example.com/video2.mp4',
      thumbnail: 'https://example.com/thumb2.jpg'
    }
  ]
}

// Test video player functionality
function testVideoPlayer() {
  const videoContext = tt.createVideoContext('testVideo')
  
  // Test play
  videoContext.play()
  console.log('Video play test initiated')
  
  // Test pause after 5 seconds
  setTimeout(() => {
    videoContext.pause()
    console.log('Video pause test completed')
  }, 5000)
}

Deployment and Publishing ​

Preparation ​

  1. Content Review

    • Ensure content complies with platform guidelines
    • Review media content for appropriateness
    • Test across different ByteDance apps

  2. Performance Testing

    • Test loading times
    • Verify media playback quality
    • Check memory usage

Publishing Process ​

  1. Upload and Submit

    • Upload code using IDE
    • Configure app information
    • Submit for review

  2. Review Process

    • ByteDance team reviews submission
    • Content and functionality review
    • Address any feedback

  3. Multi-App Release

    • Configure for different ByteDance apps
    • Test on each target platform
    • Monitor performance across apps

Platform Guidelines ​

Content Guidelines ​

  1. Content Quality

    • Provide engaging, high-quality content
    • Follow community guidelines
    • Respect intellectual property rights

  2. User Experience

    • Optimize for mobile interaction
    • Provide smooth media playback
    • Implement intuitive navigation

Technical Guidelines ​

  1. Performance Standards

    • Maintain fast loading times
    • Optimize media delivery
    • Handle network conditions gracefully

  2. Compatibility

    • Test across different devices
    • Ensure compatibility with various ByteDance apps
    • Handle different screen sizes

Resources and Support ​

Official Resources ​

Community Resources ​

Learning Materials ​

  • Official tutorials and guides
  • Video development courses
  • Developer workshops and events
  • Community blog posts and case studies

Conclusion ​

ByteDance Mini-Program platform offers unique opportunities to reach a massive, engaged audience across multiple popular apps. With its focus on content, media, and social features, it provides developers with powerful tools to create engaging, viral applications.

The platform's integration with ByteDance's recommendation algorithms, rich media capabilities, and global reach make it an excellent choice for developers looking to create content-driven applications. By leveraging the platform's strengths in video, social sharing, and personalized recommendations, developers can build successful mini-programs that resonate with ByteDance's diverse user base.

Connecting Multiple Platforms, Empowering Innovation

Copyright © 2025 Mini Program Academy