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》