原型交互表达式使用指南
一、表达式能做什么？
表达式就像原型中的"智能公式"，让静态元素活起来！可以实现多种效果，例如：
动态计算
📦 购物车自动计算总价
🔊 音量条实时缩放
📊 进度条动态变化
智能判断
✅ 登录状态验证
🔒 表单必填项检查
📱 设备适配判断
动态内容
👋 "欢迎XXX"个性化问候
📅 动态时间显示
🎲 随机内容生成
二、基础运算符表
| 运算符 | 适用于的表达式模式 | 说明 |
|---|---|---|
| + | 字符串 | 连接字符串 |
| + | 数字 | 加 |
| - | 数字 | 减 |
| * | 数字 | 乘 |
| / | 数字 | 除 |
| == | 布尔值 | 等于 |
| != | 布尔值 | 不等于 |
| && | 布尔值 | 且 |
| || | 布尔值 | 或 |
| ! | 布尔值 | 非 |
| > | 布尔值 | 大于 |
| < | 布尔值 | 小于 |
| >= | 布尔值 | 大于或等于 |
| <= | 布尔值 | 小于或等于 |
| + | 布尔值 | 加 |
| - | 布尔值 | 减 |
| * | 布尔值 | 乘 |
| / | 布尔值 | 除 |
| + | 布尔值 | 连接字符串 |
三、5分钟上手案例
示例：用户在登录框输入用户名后，在界面上展示"欢迎xxx"文字
创建字符串变量，名称为"账号"，默认值设置为空
新建单行输入组件，文本绑定变量"账号"
新建文本组件，文本绑定变量"账号"
新建按钮，命名为登录，设置单击触发交互，行为是设置变量值，目标变量"账号"，值的表达式设置为**"欢迎"+ 账号**
注意：
欢迎这个文本需要添加上英文"或'符号。
数字不需要添加，直接输入数字。
布尔变量直接输入true，false，不需要添加其他符号。
四、函数表
在表达式中，预置了部分函数，可以进行处理和计算。运算逻辑与JavaScript类似。
支持的函数列表如下：
| 函数选项 | 参数及其类型 | 函数返回值（函数类型） | 说明信息 |
|---|---|---|---|
| 文本处理 | |||
| 字符串.length | 无参数 | 数字 | 返回字符串的长度（字符数量） |
| 字符串.charAt(索引) | 索引: 数字 |
字符串 | 返回字符串中指定索引位置的字符 |
| 字符串.charCodeAt(索引) | 索引: 数字 |
数字 | 返回指定索引位置字符的 Unicode 编码 |
| 字符串1.concat(字符串2) | 字符串2: 字符串 |
字符串 | 用于连接两个或多个字符串，返回一个新的字符串 |
| 字符串.endsWith(子字符串, 长度[可选]) | 子字符串: 字符串, 长度 （可选）: 数字 |
布尔值 | 检查字符串是否以指定的子字符串结尾，返回布尔值 |
| 字符串.includes(子字符串, 起始索引[可选]) | 子字符串: 字符串, 起始索引（可选）: 数字 |
布尔值 | 检查字符串是否包含指定的子字符串 |
| 字符串.indexOf(子字符串, 起始索引[可选]) | 子字符串: 字符串, 起始索引（可选）: 数字 |
数字 | 返回子字符串在字符串中的首次出现位置的索引，如果未找到则返回 -1 |
| 字符串.lastIndexOf(子字符串, 起始索引[可选]) | 子字符串: 字符串, 起始索引（可选）: 数字 |
数字 | 返回子字符串在字符串中最后一次出现位置的索引，如果未找到则返回 -1 |
| 字符串.padEnd(目标长度, 填充值[可选]) | 目标长度: 数字, 填充值（可选）: 字符串 |
字符串 | 在字符串的末尾填充指定的字符直到达到目标长度 |
| 字符串.padStart(目标长度, 填充值[可选]) | 目标长度: 数字, 填充值（可选）: 字符串 |
字符串 | 在字符串的开头填充指定的字符直到达到目标长度 |
| 字符串.repeat(次数) | 次数: 数字 |
字符串 | 返回一个新字符串，表示原字符串重复指定次数 |
| 字符串.replace(子字符串, 替换值) | 子字符串: 字符串, 替换值: 字符串 |
字符串 | 替换字符串中匹配的子字符串或正则表达式，并返回替换后的新字符串。(注意：只会替换第一个匹配项) |
| 字符串.replaceAll(子字符串, 替换值) | 子字符串: 字符串, 替换值: 字符串 |
字符串 | 替换字符串中所有匹配的子字符串或正则表达式，并返回替换后的新字符串 |
| 字符串.slice(开始索引, 结束索引[可选]) | 开始索引: 数字, 结束索引（可选）: 数字 |
字符串 | 提取字符串的子字符串，从开始索引到结束索引（不包括结束索引） |
| 字符串.startsWith(子字符串, 起始索引[可选]) | 子字符串: 字符串, 起始索引（可选）: 数字 |
布尔值 | 检查字符串是否以指定的子字符串开头，返回布尔值 |
| 字符串.substring(开始索引, 结束索引[可选]) | 开始索引: 数字, 结束索引（可选）: 数字 |
字符串 | 提取字符串中两个索引之间的子字符串（不包括结束索引） |
| 字符串.toLowerCase() | 无参数 | 字符串 | 将字符串转换为小写形式 |
| 字符串.toUpperCase() | 无参数 | 字符串 | 将字符串转换为大写形式 |
| 字符串.trim() | 无参数 | 字符串 | 去除字符串两端的空白字符 |
| 字符串.trimStart() | 无参数 | 字符串 | 去除字符串开头的空白字符 |
| 字符串.trimEnd() | 无参数 | 字符串 | 去除字符串末尾的空白字符 |
| 数字处理 | |||
| 数字.toExponential(小数位数[可选]) | 小数位数（可选）: 数字 |
字符串 | 将一个数字转换为指数表示法的字符串形式。 |
| 数字.toFixed(小数位数[可选]) | 小数位数（可选）: 数字 |
字符串 | 将数字四舍五入到指定的小数位数，并返回字符串表示形式。 |
| 数字.toPrecision(有效位数[可选]) | 有效位数（可选）: 数字 |
字符串 | 将数字格式化为指定的精度，并以字符串形式返回。 |
| 数学运算 | |||
| Math.abs(数字) | 数字: 数字 |
数字 | 返回数字的绝对值 |
| Math.acos(数字) | 数字: 数字 |
数字 | 返回数字的反余弦值（以弧度为单位） |
| Math.asin(数字) | 数字: 数字 |
数字 | 返回数字的反正弦值（以弧度为单位） |
| Math.atan(数字) | 数字: 数字 |
数字 | 返回数字的反正切值（以弧度为单位） |
| Math.atan2(数字y, 数字x) | 数字y: 数字, 数字x: 数字 |
数字 | 返回从 x 轴到点 (x, y) 的角度（弧度） |
| Math.ceil(数字) | 数字: 数字 |
数字 | 返回大于或等于指定数字的最小整数（向上取整） |
| Math.cos(数字) | 数字: 数字 |
数字 | 返回指定角度（以弧度为单位）的余弦值 |
| Math.exp(数字) | 数字: 数字 |
数字 | 返回 E 的指定次幂（即 e^数字）。 |
| Math.floor(数字) | 数字: 数字 |
数字 | 返回小于或等于指定数字的最大整数（向下取整） |
| Math.log(数字) | 数字: 数字 |
数字 | 返回数字的自然对数（即以 E 为底）。 |
| Math.max(数字1, 数字2, ...) | 数字n: 数字 |
数字 | 返回一组数字中的最大值 |
| Math.min(数字1, 数字2, ...) | 数字n: 数字 |
数字 | 返回一组数字中的最小值 |
| Math.pow(基数, 指数) | 基数: 数字, 指数: 数字 |
数字 | 返回基数的指数次幂（即 基数^指数）。 |
| Math.random() | 无参数 | 数字 | 返回范围在 [0, 1) 的随机小数。 |
| Math.round(数字) | 数字: 数字 |
数字 | 返回最接近数字的整数值（四舍五入）。 |
| Math.sqrt(数字) | 数字: 数字 |
数字 | 返回数字的平方根 |
| Math.sign(数字) | 数字: 数字 |
数字 | 返回数字的符号：1（正数）、-1（负数）、0（零）。 |
| Math.sin(数字) | 数字: 数字 |
数字 | 返回指定角度（以弧度为单位）的正弦值。 |
| Math.tan(数字) | 数字: 数字 |
数字 | 返回指定角度（以弧度为单位）的正切值。 |
| 时间和日期 | |||
| $date.getDate() | 无参数 | 数字 | 返回当前日期对象的日期（1-31）。 |
| $date.getDay() | 无参数 | 数字 | 返回当前日期对象是周几（0 表示周日，6 表示周六）。 |
| $date.getFullYear() | 无参数 | 数字 | 返回当前日期对象的年份（四位数）。 |
| $date.getHours() | 无参数 | 数字 | 返回当前日期对象的小时数（0-23）。 |
| $date.getMilliseconds() | 无参数 | 数字 | 返回当前日期对象的毫秒（0-999）。 |
| $date.getMinutes() | 无参数 | 数字 | 返回当前日期对象的分钟（0-59）。 |
| $date.getMonth() | 无参数 | 数字 | 返回当前日期对象的月份（0 表示 1 月，11 表示 12 月）。 |
| $date.getSeconds() | 无参数 | 数字 | 返回当前日期对象的秒（0-59）。 |
| $date.getTime() | 无参数 | 数字 | 返回自 Unix 时间以来的毫秒数。 |
| $date.getTimezoneOffset() | 无参数 | 数字 | 返回当前时区与 UTC 的时间差，以分钟为单位。 |
| $date.getUTCDate() | 无参数 | 数字 | 返回当前日期对象的 UTC 日期（1-31）。 |
| $date.getUTCDay() | 无参数 | 数字 | 返回当前日期对象的 UTC 星期几（0 表示周日，6 表示周六）。 |
| $date.getUTCFullYear() | 无参数 | 数字 | 返回当前日期对象的 UTC 年份（四位数）。 |
| $date.getUTCHours() | 无参数 | 数字 | 返回当前日期对象的 UTC 小时（0-23）。 |
| $date.getUTCMilliseconds() | 无参数 | 数字 | 返回当前日期对象的 UTC 毫秒（0-999）。 |
| $date.getUTCMinutes() | 无参数 | 数字 | 返回当前日期对象的 UTC 分钟（0-59）。 |
| $date.getUTCMonth() | 无参数 | 数字 | 返回当前日期对象的 UTC 月份（0 表示 1 月，11 表示 12 月）。 |
| $date.getUTCSeconds() | 无参数 | 数字 | 返回当前日期对象的 UTC 秒（0-59）。 |
| $date.setDate(日期) | 日期: 数字 |
数字 | 设置当前日期对象的日期部分（1-31），并更新日期对象。 |
| $date.setFullYear(年, 月[可选], 日[可选]) | 年: 数字, 月, 日: 数字（可选） |
数字 | 设置当前日期对象的年份，并可同时设置月份和日期。 |
| $date.setHours(小时, 分[可选], 秒[可选], 毫秒[可选]) | 小时: 数字, 分, 秒, ...: 数字（可选） |
数字 | 设置当前日期对象的小时，并可同时设置分钟、秒和毫秒。 |
| $date.setMilliseconds(毫秒) | 毫秒: 数字 |
数字 | 设置当前日期对象的毫秒部分 |
| $date.setMinutes(分, 秒[可选], 毫秒[可选]) | 分: 数字, 秒, 毫秒: 数字（可选） |
数字 | 设置当前日期对象的分钟，并可同时设置秒和毫秒。 |
| $date.setMonth(月, 日[可选]) | 月: 数字, 日: 数字（可选） |
数字 | 设置当前日期对象的月份，并可同时设置日期。 |
| $date.setSeconds(秒, 毫秒[可选]) | 秒: 数字, 毫秒: 数字（可选） |
数字 | 设置当前日期对象的秒，并可同时设置毫秒。 |
| $date.setTime(毫秒数) | 毫秒数: 数字 |
数字 | 设置当前日期对象的时间为自 Unix 时间以来的毫秒数。 |
| $date.setUTCDate(日期) | 日期: 数字 |
数字 | 设置当前日期对象的 UTC 日期部分。 |
| $date.setUTCFullYear(年, 月[可选], 日[可选]) | 年: 数字, 月, 日: 数字（可选） |
数字 | 设置当前日期对象的 UTC 年份，并可同时设置月份和日期。 |
| $date.setUTCHours(小时, 分[可选], 秒[可选], 毫秒[可选]) | 小时: 数字, 分, 秒, ...: 数字（可选） |
数字 | 设置当前日期对象的 UTC 小时，并可同时设置分钟、秒和毫秒。 |
| $date.setUTCMilliseconds(毫秒) | 毫秒: 数字 |
数字 | 设置当前日期对象的 UTC 毫秒部分。 |
| $date.setUTCMinutes(分, 秒[可选], 毫秒[可选]) | 分: 数字, 秒, 毫秒: 数字（可选） |
数字 | 设置当前日期对象的 UTC 分钟，并可同时设置秒和毫秒。 |
| $date.setUTCMonth(月, 日[可选]) | 月: 数字, 日: 数字（可选） |
数字 | 设置当前日期对象的 UTC 月份，并可同时设置日期。 |
| $date.setUTCSeconds(秒, 毫秒[可选]) | 秒: 数字, 毫秒: 数字（可选） |
数字 | 设置当前日期对象的 UTC 秒，并可同时设置毫秒。 |
| $date.toDateString() | 无参数 | 字符串 | 返回日期对象的日期部分字符串表示（例如："Fri Oct 13 2023"）。 |
| $date.toISOString() | 无参数 | 字符串 | 返回日期对象的字符串表示，以 ISO 标准表示（例如："2023-10-13T15:00:00.000Z"）。 |
| $date.toJSON() | 无参数 | 字符串 | 返回日期对象的字符串表示（等价于 .toISOString() 方法）。 |
| $date.toLocaleDateString(本地化设置[可选]) | 本地化设置: 字符串（可选） |
字符串 | 根据本地化设置返回日期部分的字符串表示。 |
| $date.toLocaleString(本地化设置[可选]) | 本地化设置: 字符串（可选） |
字符串 | 根据本地化设置返回完整日期和时间的字符串表示 |
| $date.toLocaleTimeString(本地化设置[可选]) | 本地化设置: 字符串（可选） |
字符串 | 根据本地化设置返回时间部分的字符串表示。 |
| $date.toString() | 无参数 | 字符串 | 返回日期对象为字符串形式的表示。 |
| $date.toTimeString() | 无参数 | 字符串 | 返回时间部分的字符串表示（例如："10:00:00 GMT+0800 (China Standard Time)"）。 |
| $date.toUTCString() | 无参数 | 字符串 | 返回日期对象的 UTC 时间字符串表示。 |
五、预置变量表
对于一些系统参数，提供了预置变量可以进行调用，例如鼠标的位置信息。
包含以下变量：
| 预置变量选项 | 中文名称 | 返回值（类型） | 说明 |
|---|---|---|---|
| $mouseX | 鼠标指针X | 数字 | 返回鼠标所在位置的X轴坐标（相对于视口） |
| $mouseY | 鼠标指针Y | 数字 | 返回鼠标所在位置的Y轴坐标（相对于视口） |
| $mousePageX | 鼠标指针X（页面） | 数字 | 返回鼠标所在位置的X轴坐标（相对于页面，包括滚动距离） |
| $mousePageY | 鼠标指针Y（页面） | 数字 | 返回鼠标所在位置的Y轴坐标（相对于页面，包括滚动距离） |
| $pi | 圆周率 | 数字 | 返回圆周率 π |
| $deviceHeight | 视口高度 | 数字 | 返回当前演示设备（视口）的高度 |
| $deviceWidth | 视口宽度 | 数字 | 返回当前演示设备（视口）的宽度 |
| $pageScrollX | 页面滚动距离X | 数字 | 返回演示页面水平滚动的距离 |
| $pageScrollY | 页面滚动距离Y | 数字 | 返回演示页面垂直滚动的距离 |
| $containerScrollX | 容器滚动距离X | 数字 | 返回父级容器水平滚动的距离 |
| $containerScrollY | 容器滚动距离Y | 数字 | 返回父级容器垂直滚动的距离 |
六、常用场景示例
场景1：密码校验
密码输入.trim().length >= 6 && 密码输入 == 确认密码
场景2：输入框是否输入文字校验
变量A.trim().length > 0
场景3：包含特定文本
是否包含特定文本：变量A.includes('keyword')
场景4：获取本机系统时间
$date.toTimeString()
场景5：返回1-1000的随机整数
Math.ceil(Math.random() * 1000)
场景6：生成6位随机验证码
Math.floor(Math.random()*900000+100000)
场景7：元素跟随鼠标移动
变换元素位置x为mousePageX，y为mousePageY
七、使用技巧
运算优先级
整体上从左到右执行，基本数学运算按以下顺序执行：
括号
乘法/除法
加法/减法
布尔表达式操作符按以下顺序执行：
括号
比较（ == 、!=、>、< 等）
与（&&）
或（||）
示例1：x + y * z，首先，将y乘以z。然后，加上x。
示例2：x == (y > z)，首先，评估y是否大于z。然后，评估x是否等于y > z的解。
通过掌握这些表达式技巧，您将能轻松实现：
✅ 动态数据展示 ✅ 智能表单验证
✅ 复杂交互逻辑 ✅ 个性化内容生成
建议保存本指南作为速查手册，遇到问题时快速定位解决方法！