Axure常用变量及使用方法详解
点击下载《Axure常用变量及使用方法详解.pdf》
摘要
Axure RP 作为一款领先的前端原型设计工具，提供了全面的 变量 和 函数 系统，以支持复杂的交互设计和动态内容展示。本文将从专业角度详细解析 Axure 中的 全局变量、中继器数据集变量/函数、元件变量/函数、页面变量/函数、窗口变量/函数、鼠标指针变量/函数、数值处理函数、字符串处理函数、日期处理函数 以及 布尔值 的逻辑运算符。通过详细的示例和步骤说明，帮助读者全面理解和掌握这些关键功能，从而在原型设计中实现更高效、更灵活的交互效果。
1. 全局变量（Global Variables）
1.1 变量类型
[[GlobalVariableName]]：自定义全局变量，用于在整个原型中共享数据。
1.2 使用场景
-
跨页面数据传递：在多个页面之间传递用户输入或计算结果。
-
示例：
在登录页面设置 userName，当用户输入用户名登录成功后，使用该变量保存用户输入的用户名，然后在其他页面展示当前登录的用户。
<!-- 在主页显示 --> 欢迎, [[userName]]!
-
-
用户偏好设置存储：存储用户的偏好设置，如主题、语言等。
- 示例：设置
[[theme]]为用户选择的值，并在不同页面应用相应的主题。
- 示例：设置
-
多组件共享参数：在多个组件之间共享参数，如筛选条件、排序方式等。
- 示例：设置
[[filterCriteria]]为用户选择的筛选条件，并在多个中继器中使用该变量。
- 示例：设置
1.3 注意事项
- 命名规范：使用有意义的名称，避免使用保留字。
- 作用域管理：全局变量在整个原型中共享，需谨慎使用以避免命名冲突和数据污染。
2. 中继器数据集（Repeater Dataset）
2.1 变量类型
[[Item.ColumnName]]：当前行中指定列的值。[[TargetItem.ColumnName]]：目标行中指定列的值（用于条件判断或交互）。[[Repeater]]：当前中继器对象，可用于访问中继器的属性和方法。
2.2 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
Item.Repeater | 当前项所属的中继器对象 | [[Item.Repeater.name]] |
Item.index | 当前项的索引（从 1 开始） | [[Item.index]] |
Item.isFirst | 当前项是否为第一项 | [[Item.isFirst]] |
Item.isLast | 当前项是否为最后一项 | [[Item.isLast]] |
Item.isEven | 当前项的索引是否为偶数 | [[Item.isEven]] |
Item.isOdd | 当前项的索引是否为奇数 | [[Item.isOdd]] |
Item.isMarked | 当前项是否被标记 | [[Item.isMarked]] |
Item.isVisible | 当前项是否可见 | [[Item.isVisible]] |
Item.columnCount | 当前中继器的列数 | [[Item.columnCount]] |
Item.rowCount | 当前中继器的总行数 | [[Item.rowCount]] |
2.3 使用示例
-
动态生成列表项：
"[[Item.Name]]: [[Item.Description]]"
2.4 注意事项
- 数据集操作：通过 “设置数据集” 动作可以动态更新中继器数据。
- 分页控制：使用
Item.rowCount和Item.index实现分页功能。
3. 元件变量/函数（Widget）
3.1 变量类型
[[This]]：当前元件对象。[[Target]]：目标元件对象（用于交互中引用其他元件）。
3.2 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
this.text | 当前元件的文本内容 | [[This.text]] |
this.x | 当前元件的 x 坐标 | [[This.x]] |
this.y | 当前元件的 y 坐标 | [[This.y]] |
this.width | 当前元件的宽度 | [[This.width]] |
this.height | 当前元件的高度 | [[This.height]] |
this.rotation | 当前元件的旋转角度 | [[This.rotation]] |
this.opacity | 当前元件的透明度 | [[This.opacity]] |
this.isVisible | 当前元件是否可见 | [[This.isVisible]] |
this.isSelected | 当前元件是否被选中 | [[This.isSelected]] |
this.scrollX | 当前元件的水平滚动位置 | [[This.scrollX]] |
this.scrollY | 当前元件的垂直滚动位置 | [[This.scrollY]] |
3.3 使用示例
-
动态调整元件大小：
// 设置元件宽度为 200px [[This.width]] = 200 -
切换元件可见性：
// 切换元件的可见性 [[This.isVisible]] = ![[This.isVisible]] -
移动元件位置：
// 将元件移动到 (100, 100) 坐标 [[This.x]] = 100 [[This.y]] = 100
3.4 注意事项
- 动态更新：通过 “设置文本”、“设置尺寸” 等动作可以动态更新元件的属性。
- 事件驱动：元件变量常用于事件驱动的交互设计中。
4. 页面变量/函数（Page）
4.1 变量类型
[[PageName]]：当前页面的名称。
4.2 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
Page.width | 当前页面的宽度 | [[Page.width]] |
Page.height | 当前页面的高度 | [[Page.height]] |
Page.scrollX | 当前页面的水平滚动位置 | [[Page.scrollX]] |
Page.scrollY | 当前页面的垂直滚动位置 | [[Page.scrollY]] |
Page.url | 当前页面的 URL | [[Page.url]] |
Page.title | 当前页面的标题 | [[Page.title]] |
4.3 使用示例
-
显示当前页面名称：
"当前页面: [[PageName]]" -
根据页面宽度调整布局：
// 根据页面宽度设置背景颜色 [[Page.width]] > 1200 ? "large-layout" : "small-layout"
4.4 注意事项
- 页面导航：通过页面变量可以实现页面间的数据传递和导航控制。
- 动态页面：适用于需要根据用户操作动态改变页面属性的场景。
5. 窗口变量/函数（Window）
5.1 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
Window.width | 浏览器窗口的宽度 | [[Window.width]] |
Window.height | 浏览器窗口的高度 | [[Window.height]] |
Window.scrollX | 当前窗口的水平滚动位置 | [[Window.scrollX]] |
Window.scrollY | 当前窗口的垂直滚动位置 | [[Window.scrollY]] |
Window.name | 当前窗口的名称 | [[Window.name]] |
Window.top | 当前窗口的顶部位置 | [[Window.top]] |
Window.left | 当前窗口的左侧位置 | [[Window.left]] |
5.2 使用示例
-
显示窗口大小：
"窗口大小: [[Window.width]]x[[Window.height]]" -
根据滚动位置显示按钮：
// 当滚动位置超过 100px 时显示按钮 [[Window.scrollY]] > 100 ? "show-button" : "hide-button"
5.3 注意事项
- 响应式设计：通过窗口变量可以实现响应式布局和动态调整。
- 滚动控制：适用于需要根据滚动位置触发交互的场景。
6. 鼠标指针（Cursor）
6.1 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
Cursor.x | 鼠标指针的 x 坐标 | [[Cursor.x]] |
Cursor.y | 鼠标指针的 y 坐标 | [[Cursor.y]] |
Cursor.dragX | 鼠标拖动的水平距离 | [[Cursor.dragX]] |
Cursor.dragY | 鼠标拖动的垂直距离 | [[Cursor.dragY]] |
Cursor.totalDragX | 鼠标拖动的总水平距离 | [[Cursor.totalDragX]] |
Cursor.totalDragY | 鼠标拖动的总垂直距离 | [[Cursor.totalDragY]] |
Cursor.downTime | 鼠标按下持续的时间 | [[Cursor.downTime]] |
6.2 使用示例
-
显示鼠标位置：
"鼠标位置: ([[Cursor.x]], [[Cursor.y]])" -
检测鼠标拖动：
// 当拖动距离超过 50px 时执行操作 [[Cursor.totalDragX]] > 50 || [[Cursor.totalDragY]] > 50 ? "drag-detected" : "no-drag"
6.3 注意事项
- 交互触发：通过鼠标指针变量可以实现鼠标悬停、点击、拖动等交互触发。
- 动态响应：适用于需要根据鼠标位置或状态动态改变元件属性的场景。
7. 数值处理（Number）
7.1 变量类型
[[LVAR1]]：数值型局部变量。
7.2 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
toFixed(decimalPlaces) | 将数字格式化为指定的小数位数 | [[NumberVar.toFixed(2)]] |
toExponential(decimalPlaces) | 将数字转换为指数表示法 | [[NumberVar.toExponential(2)]] |
toPrecision(precision) | 将数字格式化为指定的总位数 | [[NumberVar.toPrecision(5)]] |
Math.abs() | 返回数字的绝对值 | [[Math.abs(NumberVar)]] |
Math.ceil() | 返回大于或等于数字的最小整数 | [[Math.ceil(NumberVar)]] |
Math.floor() | 返回小于或等于数字的最大整数 | [[Math.floor(NumberVar)]] |
Math.max() | 返回一组数字中的最大值 | [[Math.max(num1, num2)]] |
Math.min() | 返回一组数字中的最小值 | [[Math.min(num1, num2)]] |
Math.random() | 返回 0 到 1 之间的随机数 | [[Math.random()]] |
Math.round() | 返回四舍五入后的整数 | [[Math.round(NumberVar)]] |
Math.sqrt() | 返回数字的平方根 | [[Math.sqrt(NumberVar)]] |
7.3 使用示例
-
计算总和：
[[Math.round([[num1]] + [[num2]])]
-
生成随机数：
[[Math.random()]]
7.4 注意事项
- 数据类型：确保参与运算的变量是数值类型，否则可能导致计算错误。
- 精度控制：在处理浮点数时，注意精度问题。
8. 字符串处理（String）
8.1 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
length | 返回字符串的长度 | [[StringVar.length]] |
concat(string) | 连接两个或多个字符串 | [[StringVar.concat("!")]] |
indexOf(searchValue) | 返回子字符串首次出现的位置 | [[StringVar.indexOf("test")]] |
lastIndexOf(searchValue) | 返回子字符串最后一次出现的位置 | [[StringVar.lastIndexOf("test")]] |
replace(searchValue, replaceValue) | 替换字符串中的子字符串 | [[StringVar.replace("test", "sample")]] |
slice(startIndex, endIndex) | 提取字符串的子字符串 | [[StringVar.slice(0, 5)]] |
split(separator) | 将字符串分割成数组 | [[StringVar.split(",")]] |
substr(startIndex, length) | 从指定位置开始提取指定长度的子字符串 | [[StringVar.substr(2, 3)]] |
substring(startIndex, endIndex) | 提取两个指定位置之间的子字符串 | [[StringVar.substring(0, 5)]] |
toLowerCase() | 将字符串转换为小写 | [[StringVar.toLowerCase()]] |
toUpperCase() | 将字符串转换为大写 | [[StringVar.toUpperCase()]] |
trim() | 去除字符串两端的空白字符 | [[StringVar.trim()]] |
8.2 使用示例
-
拼接字符串：
[["Hello, " + [[userName]] + "!"]] -
截取字符串：
[["Hello World!".substring(0, 5)]]
8.3 注意事项
- 编码问题：处理多语言文本时，注意字符编码。
- 格式化：根据需要格式化字符串以匹配特定需求。
9. 日期处理（Date）
9.1 变量类型
[[Now]]：当前日期时间。
9.2 核心函数
| 函数 | 描述 | 示例 |
|---|---|---|
getDate() | 返回日期中的日 | [[Now.getDate()]] |
getDay() | 返回星期中的第几天 | [[Now.getDay()]] |
getFullYear() | 返回四位数的年份 | [[Now.getFullYear()]] |
getHours() | 返回小时 | [[Now.getHours()]] |
getMilliseconds() | 返回毫秒 | [[Now.getMilliseconds()]] |
getMinutes() | 返回分钟 | [[Now.getMinutes()]] |
getMonth() | 返回月份 | [[Now.getMonth()]] |
getSeconds() | 返回秒 | [[Now.getSeconds()]] |
getTime() | 返回时间戳 | [[Now.getTime()]] |
getTimezoneOffset() | 返回时区偏移量 | [[Now.getTimezoneOffset()]] |
Date.parse(dateString) | 解析日期字符串 | [[Date.parse("2023-10-01")]] |
9.3 使用示例
-
显示当前日期：
"当前日期: [[Now.getFullYear()]]年[[Now.getMonth() + 1]]月[[Now.getDate()]]日"
9.4 注意事项
- 时区问题：处理跨时区应用时，注意时区的影响。
- 格式转换：根据需要格式化日期和时间以匹配特定需求。
10. 布尔值（Boolean）
10.1 逻辑运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
== | 等于 | [[num1 == num2]] |
!= | 不等于 | [[num1 != num2]] |
> | 大于 | [[num1 > num2]] |
< | 小于 | [[num1 < num2]] |
>= | 大于等于 | [[num1 >= num2]] |
<= | 小于等于 | [[num1 <= num2]] |
&& | 逻辑与 | [[(num1 > 0) && (num2 > 0)]] |
| ` | ` | |
! | 逻辑非 | [[!(num1 > 0)]] |
10.2 使用示例
-
条件判断：
[[If([[userIsLoggedIn]], "已登录", "未登录")]] -
逻辑运算：
[[If([[(num1 > 0) && (num2 > 0)]], "两者都大于零", "至少有一个不大于零")]]
10.3 注意事项
- 逻辑正确性：确保逻辑运算符的使用符合预期。
- 短路运算：了解逻辑运算符的短路特性，避免不必要的计算。
总结
Axure 提供了全面的 变量 和 函数 系统，涵盖了从全局变量到布尔值的多种数据类型和操作函数。通过详细的分类和说明，本文全面介绍了 Axure 中各个类别所有的方法和变量，帮助读者在原型设计中更加得心应手。希望本文的内容能为你的 Axure 原型设计提供有价值的参考和指导。
点击下载《Axure常用变量及使用方法详解.pdf》