变量使用指南
一、变量是什么？
存储动态内容的容器，让设计元素"活"起来！
| 变量类型 | 应用场景 | 示例值 |
|---|---|---|
| 文本 | 用户昵称/地址/动态文案 | "小明" |
| 数字 | 商品库存/步数统计/评分 | 100 |
| 布尔值 | 开关状态/元素显隐控制 | true/false |
二、3步快速上手
步骤1：创建变量
点击「交互」面板右下角「+变量」
- 选择变量类型
- 输入变量名称
- 设置初始值
例如：
- 商品名称（文本）：
"夏季新款T恤" - 库存数量（数字）：
150 - 已售罄（布尔）：
false）
步骤2：绑定变量
文字动态显示
选中文本框 → 点击「绑定」图标
选择文本变量（如：用户昵称）
数值实时更新
选中进度条 → 绑定数字变量
输入绑定公式（如：完成数/总数*100）
布尔值绑定：
- 选择开关、单选等组件，鼠标悬停在「状态」，「禁用」等内容上时，会出现图形绑定图标提示
- 在「绑定」图标上，点击进行绑定
步骤3：在交互中应用变量
在创建变量和绑定变量之后，就可以通过交互事件，让变量值发生变化，让原型“动”起来
修改变量
通过交互事件修改变量值：
选择页面或页面内元素，在右侧属性面板中，选择「交互」，点击「添加交互」
选择触发方式，可选择需要的触发方式，如「单击」
点击「目标变量」，选择需要修改的变量
设置目标变量的新值，可以是具体值，也可以通过表达式实现更丰富的内容。详情可参考表达式。
示例
购物车交互，点击加号商品数量发生变化：
当点击「+」按钮时：
目标变量：商品数量；值：商品数量 + 1当点击「-」按钮时：
目标变量：商品数量；值：商品数量 - 1
条件判断控制
创建交互事件时选择「条件判断」
设置判断规则（支持以下运算符）：
等于/不等于
大于/小于
布尔值直接判断
可以通过表达式实现更丰富的内容。详情可参考表达式。
示例
购物车交互，如果商品数量超过一定数值，通过浮层弹窗提示货物不足：
如果
商品数量 > 100：打开浮层弹窗，提示货物不足否则：
商品数量 + 1
三、典型应用场景
场景1：动态计数器
如购物车动效。通过+/-按钮修改数值的交互过程。
场景2：智能表单
如登录表单验证，错误提示动效，随机数验证码等效果
场景3：状态管理
如消息红点，未读消息数字跳动
场景4：条件跳转
如根据用户身份，展示不同的浮层。
场景5：实时计算
如购物车不同金额的折扣率或满减效果
场景6：动态内容
如app开屏动态内容展示。问候语 = "早上好，" + 用户名 + "！今日温度：" + 气温 + "℃"
四、避坑指南
❌ 常见错误
变量未绑定 → 检查元素绑定状态
类型不匹配 → 文本变量不能做数学运算
重名冲突 → 使用「页面_变量名」格式
✅ 最佳实践
命名规范 → 变量的名称只可以由汉字、字母、数字或下划线组成，不能以数字开头。区分大小写。如bool_hasUnread / num_totalPrice
默认值设置 → 数字变量初始建议设为0
预览测试 → 使用右上角「快速预览」按钮
五、常见问题解答
❓设置变量值为什么没有生效？
👉 1、检查变量值是否发生变化：您可以创建一个文本，然后将文本内容绑定对应变量。这样，当交互触发时，您就可以直观的看到变量值的变化。
👉 2、检查变量绑定的位置，是否正确，样式、图层是否正常。
👉 3、检查交互事件中，是否有多个交互，当存在多个交互时，可能出现冲突的情况。当您没有设置延迟时，交互会按照自上而下的顺序执行。
❓如何实现自动计算？
👉 使用表达式绑定（如：总价=单价*数量），详情见表达式。
❓演示时变量会重置吗？
👉 是！首次载入页面或刷新页面后变量会重置。
❓变量是针对页面、画布、还是项目文件生效的？
👉 变量在整个项目中使用，各个元素、画布、页面可以多次应用同一个变量。变量修改后，所有引用变量的地方都会自动更新。
❓为什么我的属性面板上没有绑定按钮？
👉 您需要先创建对应变量。比如您想把矩形的宽、高绑定变量，就需要先创建一个数字变量。
❓怎么让一个变量在打开演示时就生效？
👉 可以选择页面，在页面上添加交互触发“载入时”，执行“设置变量值”行为。
❓变量删除了是否会影响交互？
👉 变量删除后，所有引用该变量的内容，都会受到影响。请谨慎删除。
通过掌握这些变量使用技巧，您可以轻松实现：
✅ 数据联动 ✅ 状态管理
✅ 智能判断 ✅ 动态交互
建议收藏本文作为操作手册，遇到问题时快速查阅解决方案！ 🚀