开发教程与代码示例

我的收藏

为了方便开发者针对重点功能或场景进行开发，本页面汇总了现有开发教程及代码示例。

说明
可以通过左侧目录查看教程文档，也可以点击页面中的链接查看 Codelab。

视频教程

说明

更多视频教程，请参考学堂中的开发教程。

使用 AI 开发小程序

开发 ToDoList 小程序

小程序登录

Web 化进搜索

小程序开发上线全流程

抖音开发者工具 - 界面及基础功能

抖音开发者工具 - 模拟器调试

抖音开发者工具 - 真机调试

入门

教程	代码示例	描述	学习耗时
使用 AI 开发小程序	无	该教程介绍借助 IDE 的 AI 智能调整功能，通过自动化生成 UI 代码、智能调整界面细节、自动接入接口等方式，快速完成轻量级小程序开发	15 分钟
快速开发小程序	Todo 小程序	该教程将带你从零开始创建一个 Todo 小程序，你将快速了解如何调用小程序组件、小程序 API，以及如何让小程序适配移动端。	15 分钟
小程序的运行流程	在教程中查看	该教程介绍小程序的启动和运行流程。	15 分钟
小程序开发流程	无	该教程介绍了开发小程序的完整流程。	15 分钟
JS API 调用指南	无	该教程介绍 JS API 的优势、使用场景、类型，并通过示例介绍如何调用 JS API 以及权限如何申请。	15 分钟
OpenAPI 调用指南	无	该教程介绍 OpenAPI 的使用场景、类型，并通过示例介绍如何调用 OpenAPI。	20 分钟

其他代码示例：

代码示例	描述
小程序能力展示	该代码示例展示了小程序大部分 API 和组件，可以通过此示例学习各种能力的使用方法。
图文详情	该代码示例展示了一个简单的新闻页面，包含标题、作者、图片、文字等内容。

进阶

基础能力

开发教程	代码示例	描述	学习耗时
小程序登录	代码示例	大多数业务场景下，小程序需要获取用户的「唯一用户标识」，用于在服务端数据库中记录用户在小程序内的各种行为数据。当用户更换设备或重新登录后，依然可以从服务端拉取之前的数据。该教程介绍不同场景下如何开发登录功能。	30 分钟
开发 video 视频组件	代码示例	在抖音 App 中，视频组件的典型使用场景是首页支持上下滑动的短视频功能。该教程以在小程序中实现短视频场景为例，介绍如何在小程序中优化用户体验、提升播放质量以及保护视频资源安全。	30 分钟
开发 web-view 组件	代码示例	本教程将聚焦于如何开发 web-view 网页容器。	20 分钟
开发 TabBar	在教程中查看	TabBar 是小程序底部的导航栏，用于在不同页面或功能模块之间进行快速切换。本教程将详细介绍如何实现小程序的 Tabbar。	20 分钟
开发页面导航	在教程中查看	页面导航允许用户在不同页面之间进行切换，从而提供流畅的用户体验。本教程将详细介绍如何实现小程序的页面导航功能。	25 分钟
屏幕	在教程中查看	在抖音小程序开发中，屏幕相关功能（如亮度调节、截屏、录屏、事件监听）是提升用户体验和内容保护的重要组成部分。本教程将实现一个包含视频播放、亮度调节、禁止录屏和监听操作的完整屏幕控制模块。	20 分钟
网络连接	在教程中查看	网络连接使得小程序可以与服务器进行数据交互，实现诸如获取远程数据、提交用户信息、上传文件、下载资源等功能。通过网络连接，小程序不再局限于本地数据和功能，能够实时获取最新内容，为用户提供更加个性化和动态的服务。本教程将详细介绍如何实现小程序的网络连接功能。	20 分钟
用户授权	在教程中查看	抖音小程序用户授权是保障用户隐私与功能正常运行的核心机制，开发者需在用户明确同意后才能调用涉及敏感信息的 API 或组件。本教程将详细介绍如何实现小程序的用户授权。	25 分钟

分享能力

开发教程	代码示例	描述	学习耗时
小程序分享	代码示例	分享是指由用户主动触发，指定小程序落地页，分享至抖音私信或其他端外场景，引导其他用户回流至小程序。该教程介绍如何通过转发链接、图文、分享口令等不同形式分享小程序。	15 分钟
在抖音短视频挂载小程序锚点	代码示例	该教程将讲解如何在小程序中实现抖音视频发布功能，以及如何在抖音视频中挂载小程序入口。	25 分钟
在抖音直播间挂载小程序	代码示例	该教程将演示如何在抖音直播中实现小程序入口的挂载。	10 分钟

搜索能力

开发教程	代码示例	描述	学习耗时
Web 化进搜索	代码示例	在对小程序进行 Web 化后，搜索引擎可以理解小程序的页面，从而可以以自然结果样式展现在搜索结果中。这个 H5 版本的小程序不会被普通用户直接访问到，仅用于搜索引擎抓取内容。本教程将指导小程序如何通过适配 Web 化方案实现数据推送至抖音搜索，支持更多内容被用户搜索到。	60 分钟

开放能力

开发教程	代码示例	描述	学习耗时
接入广告能力	代码示例	如果你的小程序所在类目属于“非交易类”（交易能力开放行业类目），并且已经有了一定的流量。可以接入平台提供的广告能力，将自己的流量进行变现，获取固定收入。	20 分钟
自定义页面结构	代码示例	为保障小程序的良好体验，平台在标准化导航栏之外新增「自定义页面结构能力」供开发者使用。通过能力申请后，系统将隐藏顶部导航栏，小程序可采用沉浸式页面样式。本教程将聚焦在如何设计、申请和开发自定义页面结构。	60 分钟
接入线索组件	在教程中查看	线索组件是抖音开放平台提供给线索类小程序的核心经营能力，帮助经营者高效获取手机号等线索，提升流量分发精准性。该教程介绍如何接入线索组件。	25 分钟
接入 IM 消息收发能力	无	该教程将帮助开发者接入抖音开放平台 IM，包含 IM 回调事件处理及调用 OpenAPI 发送私信的完整流程。	30 分钟
接入订阅消息能力	在教程中查看	订阅消息能力基于抖音的通知渠道，为开发者提供了可以高效触达用户，提升小程序复访率的订阅消息能力。该教程介绍小程序如何接入订阅消息能力。	10 分钟

行业能力

开发教程	代码示例	描述	学习耗时
本地团购类小程序（步骤一：小程序前端）	代码示例	抖音开放平台在小程序与本地生活服务的开放能力基础上，为小程序生活服务代运营服务商和自营商家分别量身定制了一套有针对性的接入方案。该教程介绍如何开发一个本地团购类小程序的前端。	30 分钟
本地团购类小程序（步骤二：商品库接入）	在教程中查看	本地团购类小程序（步骤一：小程序前端）介绍了用抖音小程序原生开发框架构造一个通用的本地团购类小程序的示例。该教程将介绍如何将你售卖的商品相关信息上传到抖音，创建这个商品，最终得到 goods-id。	30 分钟

AI/AR 能力

开发教程	代码示例	描述	学习耗时
AI/AR 算法：足部识别（基于 three.js 和 microapp-ar-three）	•获取算法数据 •将相机画在 canvas 上 •threejs 加载并渲染模型 •通过 ArMixer 完成 AR 场景	AI/AR 算法为开发者提供获取输入图像中特定结构信息的能力。该教程通过实现一个试鞋小程序，逐步介绍了足部识别算法的使用方式，以及如何配合 three.js 实现更多功能。	45 分钟
AI/AR 算法：指甲分割（基于 three.js 和 microapp-ar-three）	•获取算法数据 •使用 ArNailUtils 获取美甲模型 •ArMixer 渲染美甲模型	AI/AR 算法为开发者提供获取输入图像中特定结构信息的能力。该教程通过实现一个美甲小程序，逐步介绍了指甲识别算法的使用方法，以及如何结合 three.js 进行开发。	20 分钟
AI/AR 算法：平面追踪（基于 three.js）	•绘制立方体 •绘制模型	AI/AR 算法为开发者提供获取输入图像中特定结构信息的能力。该教程介绍了平面识别算法的使用方法，以及如何结合 three.js 开发平面追踪小程序。	15 分钟
AI/AR 算法：物体追踪（基于 three.js）	•获取算法数据 •使用 three.js 加载模型	AI/AR 算法为开发者提供获取输入图像中特定结构信息的能力。该教程介绍了物体追踪算法的使用，以及如何结合 three.js 开发物体追踪小程序。	20 分钟

最佳实践

安全开发

开发教程	代码示例	描述	学习耗时
开发隐私协议组件	无	根据《个人信息保护法》《数据安全法》《网络安全法》等相关法律法规和监管要求，为提升小程序的隐私合规及用户数据安全性，请各位开发者尽快完成隐私协议设置，并保持小程序所需隐私能力与隐私保护说明的动态更新，对未填写隐私保护说明的小程序，平台会限制接口调用。本教程将聚焦于如何配置和开发隐私协议组件。	20 分钟

性能优化

开发教程	代码示例	描述	学习耗时
让 image 图片体积减小 7 成	在教程中查看	HEIC 是一种高效的容器图像文件格式，使用高效视频编码（HEVC）标准进行压缩，相比 JPEG、PNG 格式体积更小。该教程介绍如何让 image 图片体积减小 7 成。	10 分钟

开发问题互助交流

加入社群可获取从 0 到 1 开发指南及平台最新动态，并与 2000+开发者进行技术交流与问题互助。