1 传统 Web 中 HTML 的角色
HyperText Markup Language：用来描述页面结构——标题、段落、图片、表单……
只负责“放什么元素、排在什么层级”，真正的行为靠 JS，视觉靠 CSS。
<!-- 传统网页：结构 + class 交给 CSS -->
<div class="header">
<h1>Hello Web</h1>
<button id="incBtn">+</button>
<span id="count">0</span>
</div>
<script>
// 纯 JS 手动取 DOM / 改文本
let n = 0;
document.getElementById('incBtn').onclick = () => {
n++;
document.getElementById('count').innerText = n;
};
</script>
2 TTML 相对 HTML 的区别
| 能力 | TTML 特有 | 举例对比 |
|---|---|---|
| 数据插值 | {{variable}} 直接把 JS data 渲染进模板 |
<text>{{count}}</text> |
| 事件声明式绑定 | bindtap="add" 只写函数名，不内嵌 JS |
<button bindtap="add">+</button> |
| 条件 / 列表指令 | wx:if wx:for |
<view wx:for="{{list}}">{{item}}</view> |
| 组件标签集 | <swiper> <scroll-view> 等对接原生能力 |
<swiper autoplay="{{true}}">…</swiper> |
| 安全沙箱 | 模板层不能直接写 <script> |
事件必须跳到 *.js 文件 |
| rpx 单位 | 与屏幕宽度自适应的长度单位 | width: 750rpx = 全屏 |
本质：TTML = HTML 结构 + 小程序框架指令 + 数据/事件绑定语法，让 UI 与 JS data 形成自动同步。
对照示例：计数器
A. HTML 版（手动操作 DOM）
<button id="incBtn">+</button>
<span id="count">0</span>
<script>
let n = 0;
incBtn.onclick = () => { count.innerText = ++n; };
</script>
B. TTML + TTJS 版（声明式 + 双向）
<!-- counter.ttml -->
<button bindtap="add">+</button>
<text>{{count}}</text>
// counter.js
Page({
data: { count: 0 },
add() { this.setData({ count: this.data.count + 1 }); }
});
差别
TTML 无需直接改 DOM，调用 setData ➜ 框架自动把 count 更新到 {{count}} 位置。
点击事件只写 bindtap=“add”，函数体放在 JS，模板更纯净。
| 模式 | 需求 | 更新流程 |
|---|---|---|
| 原生 DOM | 手写 document.* |
直接改 DOM（命令式） |
| 小程序 TTML / React 等 | 写模板 {{count}} + this.setData({count}) |
框架比对数据差异自动改视图（声明式） |
优点：
逻辑与视图分离，代码量大幅减少；并且这样可以在框架内部做批量更新、虚拟 DOM diff，性能可控，且不易产生 “忘了同步 UI” 的 Bug
代价：
必须走框架限定的 API（如 setData），不能直接任意操作 DOM。