框架概述

我的收藏

抖音小程序是一种轻量级的应用程序，无需下载安装即可在抖音平台内使用。它依托抖音庞大的用户基础，为开发者提供了一个展示和推广应用的新渠道，也为用户带来了更加便捷的使用体验。

架构

模块	定义	说明
抖音客户端（运行时环境）	小程序的运行载体，提供底层设备访问、网络通信、渲染引擎等基础能力。	•作用：解析小程序代码包，加载基础库，渲染页面，并与手机系统（iOS/Android/Harmony）交互。 •关键依赖：客户端版本决定了基础库的支持能力（如 API 兼容性）。
基础库	小程序框架的核心底层，封装了运行时环境、组件解析器、数据绑定引擎等核心功能。	核心能力： •提供逻辑层与视图层的通信桥梁（如`setData`数据同步、事件机制）。 •实现组件的渲染逻辑（如内置组件`<view>`、`<button>`的样式解析和布局）。 •管理小程序的生命周期（应用启动`onLaunch`、页面卸载`onUnload`等）。
逻辑层	运行 JavaScript 代码的环境，负责业务逻辑处理、数据管理、生命周期管理、和 API 调用。	•核心模块： ◦应用（App）：全局逻辑，定义`onLaunch`、`globalData`等（如`app.js`）。 ◦页面（Page）：单个页面的逻辑，包含`data`数据、生命周期函数（`onLoad`、`onShow`）和事件处理函数（如按钮点击`onClick`）。 ◦API：通过 API（如`tt.request`、`tt.setStorage`）调用基础库能力。 •与视图层通信： ◦数据绑定：通过`this.setData({key: value})`将数据更新到视图层，触发页面重新渲染。 ◦事件监听：通过`bindtap`等事件绑定，接收视图层的用户交互事件（如点击按钮）。
视图层	负责页面渲染的模块，使用 TTML（结构）和 TTSS（样式）描述界面。	•核心技术： ◦TTML：类似 HTML 的标签语言，用于构建页面结构，支持数据绑定（`{{data}}`）和条件 / 循环渲染（`tt:if`、`tt:for`）。 ◦TTSS：类似 CSS 的样式语言，支持响应式单位（rpx）、全局 / 局部样式，以及小程序特有的样式扩展（如`flex`布局）。 ◦组件：使用内置组件（如`<view>`、`<image>`）或自定义组件（通过`Component`构造器定义）。 •与逻辑层通信：通过事件（如`bindtap`）向逻辑层发送用户操作信息，通过数据绑定接收逻辑层的状态更新。
API 接口	基础库封装的一系列功能接口，用于调用客户端原生能力或框架功能。	•分类： ◦网络通信：`tt.request`（HTTP 请求）、`tt.uploadFile`（文件上传）。 ◦数据存储：`tt.setStorage`（本地存储）、`tt.getStorage`（读取存储）。 ◦设备能力：`tt.getLocation`（定位）、`tt.startRecord`（录音）。 ◦界面交互：`tt.showToast`（提示框）、`tt.navigateTo`（页面跳转）。 ◦开放能力：抖音特有的接口（如分享`tt.shareAppMessage`、用户信息`tt.getUserInfo`）。 •调用方式：在逻辑层直接调用（如`tt.request({url: '...'})`），通过基础库转发到客户端执行。
组件系统	可复用的 UI 单元，分为内置组件和自定义组件。	•内置组件：框架预定义的组件（如`<view>`（容器）、`<text>`（文本）、`<navigator>`（导航）），自带基础样式和交互逻辑。 •自定义组件：开发者通过`Component`构造器创建的组件（如`components/button/button.js`），支持属性传递（`properties`）、事件冒泡（`events`）和插槽（`slot`）。作用：提高代码复用性，视图层通过标签引用组件（如`<my-button bind:click="handleClick"></my-button>`）。
配置系统	通过 JSON 文件配置小程序的全局或页面级行为。	•分类： ◦全局配置（app.json）：定义小程序的页面路径、窗口样式（导航栏、背景色）、底部 Tab 栏（`tabBar`）、网络域名白名单等。 ◦页面配置（page.json）：覆盖全局配置，如单个页面的导航栏标题、是否禁用滑动返回等。 ◦组件配置（component.json）：自定义组件的配置（如是否为原生组件、样式隔离策略）。 •生效逻辑：框架启动时读取`app.json`，页面加载时合并`app.json`和`page.json`的配置。
生命周期	小程序 / 页面在不同阶段触发的钩子函数，用于控制逻辑执行时机。	•分类： ◦应用生命周期：`onLaunch`（初始化）、`onShow`（切前台）、`onHide`（切后台）。 ◦页面生命周期：`onLoad`（加载）、`onReady`（渲染完成）、`onShow`（显示）、`onHide`（隐藏）、`onUnload`（卸载）。 •作用：在特定阶段执行初始化逻辑（如`onLoad`获取页面参数）、释放资源（如`onUnload`取消定时器）。

•

逻辑层与视图层：通过数据绑定（setData）和事件机制（bind）双向通信，基础库提供底层通信支持。

•

逻辑层与 API：逻辑层通过 API 调用基础库能力，基础库转发请求到客户端（如网络请求、本地存储）。

•

配置与渲染：全局 / 页面配置决定视图层的初始样式（如导航栏标题）和逻辑层的生命周期触发时机。

•

组件与视图层：组件是视图层的基本单元，内置组件由基础库解析，自定义组件通过逻辑层定义交互逻辑。

当用户打开抖音小程序时，抖音客户端会加载小程序的代码包，将视图层和逻辑层代码分别解析执行。视图层负责渲染页面，逻辑层负责处理用户交互和业务逻辑。两者通过事件触发和数据绑定实现数据的传递和更新。

抖音小程序框架涉及众多概念，这些概念构成了小程序开发的基础，下面将详细介绍：

开发小程序与开发 Web 的区别

小程序开发的模式与 Web 开发类似，使用 JavaScript 进行开发，使用 CSS 控制样式，最终使用 HTML 进行渲染。但是，我们开发的小程序的 JS 代码，其实是运行在一个被称为“逻辑层”的独立运行环境中（大多数情况下），并且每个小程序有且仅有一个“逻辑层”。

在 Web 开发中，每个页面中 JS 线程与渲染线程是互斥的；而在小程序中，JS 线程与渲染线程（视图层）是独立的，视图的渲染更新，并不会阻塞 JS 的执行，同时 JS 的逻辑执行，也不会阻塞视图的渲染更新。

JS 驱动视图的更新是异步的，并且 JS 无法直接访问视图的 DOM。逻辑层可以通过 API 调用客户端的原生能力，通过 setData 修改视图层的数据，视图层可以通过触发事件调用逻辑层的方法。

在 Web 端，在用户打开一个页面的时候，我们通常会通过 HTTP/HTTPS 协议请求访问网页，而在小程序端，我们会通过特殊协议（如：sslocal://microapp）请求当前 App 调起小程序，开发者的小程序代码会以包的形式下发到打开小程序的当前 App 上，当前 App 会加载本地 JS/XML/CSS 文件打开小程序页面。

小程序本身没有域名（并非指 request 请求等访问能力没有域名），所以无法像 Web 开发一样，使用 location 等方式进行页面跳转，也不存在“跨域”。

由于小程序的 JS 是运行在 JS 引擎中，而非 webview 中，所以没有 DOM/BOM，进而无法使用 window 等浏览器提供的全局变量，所以很多在浏览器中可以运行的 NPM，在小程序中也无法直接使用。

网页开发中，前端的代码是部署在开发者自己的 CDN 或者自己的服务器上的，对于上传代码等并没有特殊限制。但是在小程序开发中，小程序代码是上传到字节跳动的服务器上统一管理的，下发也是从字节跳动的服务器统一下发的。所以在小程序开发过程中，我们需要借助小程序的开发者工具进行预览上传。

预览效果时，我们也需要使用字节跳动的宿主 App 进行查看。对于每一个小程序，我们都需要在字节跳动开发者平台申请账号用于开发与上传。

在 Web 开发中，我们的运行环境是浏览器，无论是 JS，还是 HTML/CSS，都是运行在浏览器中的。所以，对于我们的 Web 页面，可变的环境是浏览器，我们可能需要处理 Safari/Chrome/Firefox 等 Web 浏览器带来的功能与渲染差异。而当我们开发小程序的时候，也需要处理运行环境的差异，不过小程序的环境差异指的是不同小程序宿主的差异，目前小程序支持的宿主列表如下：

•

抖音

抖音是一个帮助大众用户表达自我，记录美好生活的短视频平台。在这里，用户不仅可以了解最新的明星内容和事件，还可以通过各种智能匹配音乐、一键卡点视频、原创特效、滤镜等记录美好生活。

•

今日头条

今日头条是一款个性化资讯推荐引擎产品，致力于连接人与信息，让优质、丰富的信息得到高效、精准的分发，为用户创造价值。今日头条提供的信息种类丰富，涵盖科技、娱乐、游戏、体育、财经等方面，为用户提供全方位、多维度的热点新闻资讯。

•

今日头条极速版

头条极速版为用户提供个性化专属新闻资讯。头条极速版内存小、省流量、使用流畅，为用户提供有价值、有温度、更新速度快的新闻资讯。及时聚焦热点，用户刷新就能触达最新资讯。

体验小程序

下载抖音、今日头条等 App 后，扫描下图二维码即可体验字节小程序。

点击下载安装抖音开发者工具，新建「小程序能力展示」模板工程，可使用该小程序源码。