抖音小程序

平台概述

抖音小程序于 2019 年上线，运行在抖音客户端内，依托抖音 8 亿+ 月活用户。最大的差异化能力是 短视频挂载 和 直播挂载 —— 用户在刷视频或看直播时可以直接打开小程序。

核心定位：内容驱动的流量入口 —— 通过短视频和直播的自然流量实现获客，有别于微信的社交分发和支付宝的服务分发。

典型场景：

内容电商：商品橱窗、短视频带货、直播间购物车
互动娱乐：投票、答题、抽奖等社交互动
本地生活：团购券、到店核销
营销工具：品牌活动页、H5 互动游戏

设计规范

尺寸单位

不使用 rpx，使用标准 CSS 单位（px, rem, vw/vh）
建议以 750px 设计稿为基准，使用 px 单位

组件规范

组件体系与微信类似：<view>, <text>, <image>, <scroll-view>, <swiper>
特色组件：<live-player>, <live-pusher>（直播相关）
<video> 组件功能丰富，支持弹幕、倍速播放

导航模式

与微信一致：tt.navigateTo / tt.redirectTo / tt.switchTab / tt.navigateBack
页面栈最大深度：10 层

样式

.ttss 与 .wxss 基本兼容
不支持 rpx 单位（关键差异）
部分 CSS3 动画属性在低版本客户端不支持

审核规范

常见被拒原因

内容审核：抖音对内容审核极其严格，尤其涉及直播、短视频相关
虚拟支付：iOS 上不允许虚拟商品内购
诱导行为：禁止强制关注账号、分享后才能使用
视频挂载规范：小程序内容必须与挂载的视频内容相关
直播类要求：涉及直播能力需额外资质审核

审核周期

通常 1-2 个工作日（较快）
首次提交需要 QA 回归测试
涉及支付/直播能力审核更严格

入驻门槛

支持个人开发者
但支付、直播等能力需企业主体
部分类目需要特殊资质（如医疗、金融）

开发指南

快速上手

code

// app.js
App({
  onLaunch() {
    console.log('抖音小程序启动')
  }
})

// pages/index/index.js
Page({
  data: { msg: 'Hello 抖音' },
  onLoad() {
    console.log('页面加载')
  }
})

// pages/index/index.ttml
<view class="container">
  <text>{{msg}}</text>
  <button bindtap="handleTap">点我</button>
</view>

抖音独有能力

能力	说明	入口
短视频挂载	视频中挂载小程序入口	视频左下角链接
直播挂载	直播间挂载小程序	直播间商品/服务卡片
抖音支付	平台内支付	内购、商品购买
视频能力	获取视频上下文	tt.createVideoContext
内容安全	文本/图片内容检测	服务端 API

常见陷阱

没有 rpx：抖音不支持 rpx，从微信迁移时需要转换单位（Taro/uni-app 会自动处理）
tt.pay 需要单独申请：支付能力非默认开放，需在开放平台申请
短视频挂载有门槛：需要小程序运营一段时间后才能申请挂载权限
审核中的 QA 回归：首次提交审核后，抖音团队会做 QA 回归，可能耗时较长
TypeScript 不原生支持：需要自行配置构建流程

从微信迁移

微信	抖音	说明
`wx.xxx`	`tt.xxx`	API 命名空间不同
`.wxml`	`.ttml`	模板语法一致
`.wxss`	`.ttss`	样式语法基本一致
`rpx`	不支持	需转为 `px` 或使用框架自动处理
`wx.requestPayment`	`tt.pay`	支付流程类似但参数不同
`onShareAppMessage`	`tt.shareAppMessage`	分享机制不同

生态资源

框架	支持度	说明
Taro	⭐⭐⭐	抖音端支持完善，字节跳动官方合作
uni-app	⭐⭐⭐	内置抖音适配，条件编译处理差异
Mpx	⭐⭐	滴滴出品，支持抖音端编译

库	说明
Vant Toutiao	Vant 的抖音适配版
NutUI	京东出品，支持抖音端
TDesign	腾讯出品，适配多端

社区资源

官方文档：developer.open-douyin.com
抖音开放平台：功能申请、数据查看
字节跳动开发者社区：问答和技术分享

版本更新

近期重要变更

云开发能力：支持 Serverless 云函数、云数据库
直播组件增强：<live-player> 和 <live-pusher> 组件能力持续增强
广告变现：支持 Banner、激励视频、插屏等广告形式
订阅消息：支持用户主动订阅后推送消息

抖音小程序

详细文档

抖音小程序

平台概述

设计规范

尺寸单位

组件规范

导航模式

样式

审核规范

常见被拒原因

审核周期

入驻门槛

开发指南

快速上手

抖音独有能力

常见陷阱

从微信迁移

生态资源

推荐框架

推荐 UI 库

社区资源

版本更新

近期重要变更