Axu 原型基础教程 5

变量与函数“《AxureRP9原型设计实战案例教程（APP与Web）》第七章01全局变量和局部变量的使用一、全局变量和局部变量的使用全局变量在所有页面里都可以使用，但是全局变量的值也很容易被修改掉，因为所有页面都可以使用全局变量，也就有权限修改全局变量值，所以在使用的过程中需要注意。局部变量只供某个局部区域使用，比如在某个触发事件的某个动作中使用，其他触发事件就不可以使用此变量。变量设置规则变量名必须是字母或者是数字，并以字母开头，需要少于25个字符，且不能包含空格，Axure会默认初始化一个“OnLoadVariable”变量。一、全局变量和局部变量的使用单击项目菜单项的全局变量命令里，打开“全局变量”对话框，在“全局变量”对话框中可以新增或编辑全局变量，新增一个全局变量“count”，单击“+添加”链接，可以新增变量，变量值默认为空，也可以为其赋值，如让“count”等于0。除了单击“添加”链接新增变量，还可以可以单击“↑上移”或“↓下移”链接调整变量的前后关系以及单击“×删除”链接删除变量，要记住变量名必须是字母数字，并以字母开头，少于25个字符，且不能包含空格。一、全局变量和局部变量的使用新增全局变量一、全局变量和局部变量的使用局部变量应用在某个交互效果的设计过程中，比如单击页面载入时触发事件。在添加动作面板单击“设置文本”选项，勾选“焦点元件”复选项，在设置动作面板单击fx图标。单击fx图标后，会弹出编辑文本对话框，单击“添加局部变量”链接，就可以新增一个局部变量，还可以对局部变量重新命名和赋值，此局部变量只在给文本赋值的时候起作用，其他交互动作无法访问该局部变量。局部变量赋值的方式有很多，可以通过元件文字、选中状态值、选中项值、变量值、焦点元件上的文字、元件的方式赋值。局部变量的变量名也必须是字母和数字，且不包含空格。一、全局变量和局部变量的使用设置文本动作一、全局变量和局部变量的使用新增局部变量02变量值在页面间传递二、变量值在页面间传递变量的主要作用Themainfunctionofavariable在页面间传递变量值，在登录淘宝或者其他网站的时候，输入用户名和密码，校验成功后，会跳转到一个新的页面，在新的页面里经常会看到“欢迎xxx”这样的文字；在搜索框进行搜索的时候，输入搜索条件，当单击搜索按钮跳转到下一个页面的时候，同样会把搜索条件传递过去，这些都是真实软件的交互效果。利用变量的添加，可以实现上面两个场景的交互效果，给用户一种真实软件操作的感受，将用户带入到真实软件使用场景。二、变量值在页面间传递2.1登录表单和首页（1）把Page1页面重新命名为“登录”，拖曳一个“矩形1”元件到工作区域，将其宽度设置为300，高度设置为260，填充灰色（#CCCCCC）背景。（2）拖曳一个“文本标签”元件到工作区域，将其重新命名为“用户名”，字号设置为16号；拖曳一个“文本框”元件到工作区域，将其作为用户名的输入框，把它的标签命名为“name”。二、变量值在页面间传递2.1登录表单和首页登录表单背景及用户名输入框二、变量值在页面间传递2.1登录表单和首页（3）拖曳一个“文本标签”元件到工作区域，将其重新命名为“密码”，字号设置为16号；拖曳一个“文本框”元件到工作区域，将其作为密码的输入框，把它的标签命名为“password”；拖曳一个“按钮”元件到工作区域，将其宽度设置为200，高度设置为30，把它的文本内容重新命名为“登录”。（4）新建页面将其命名为“首页”，拖曳一个“矩形1”元件到工作区域，用于显示登录后传递过来的用户命名和密码，命名其标签为“content”。二、变量值在页面间传递2.1登录表单和首页密码输入框和登录按钮首页二、变量值在页面间传递2.2新增变量和赋值（1）需要新增两个全局变量，用来保存输入的用户名和密码，单击“项目”菜单项，在弹出的下拉列表中选择全局变量命令，在弹出的对话框中新增2个全局变量，分别命名为“userName”和“pwd”。（2）进入登录页面，选中登录按钮，为其添加鼠标单击时触发事件，在添加动作面板中单击“设置变量值”动作，先给全局变量userName赋值，勾选“userName”复选框，单击fx图标。（3）进入到编辑文本对话框，把用户名输入框里的信息赋值给全局变量userName，新增一个局部变量，第一个下拉列表中选择“元件文字”，它指的是把元件上的文字赋值给该局部变量，在第二个下拉菜单选择用户名输入框“name”，再将该局部变量插入到内容的编辑区域，这样就可以给全局变量userName赋值。二、变量值在页面间传递2.2新增变量和赋值新增全局变量设置userName变量值userName赋值二、变量值在页面间传递2.2新增变量和赋值（4）用同样的方式将密码输入框里的信息保存到全局变量里。在添加动作面板中单击“设置变量值”动作，勾选“pwd”复选项，在设置动作面板单击fx图标，新增一个局部变量，通过元件文字的形式赋值，选择“password”元件，然后将局部变量插入到内容编辑区域。（5）登录成功后需要跳转到下一个页面，在添加动作面板中单击“打开链接”，在设置动作中链接到下拉列表中选择“首页”，打开在下拉列表中选择“当前窗口”。二、变量值在页面间传递2.2新增变量和赋值全局变量pwd赋值打开首页二、变量值在页面间传递2.3首页显示变量值01进入到首页，登录成功后，原型会携带用户名和密码跳转到首页里，这样，首页在载入的时候，就会把用户名和密码显示出来。为实现此效果，需要添加一个页面载入时的触发事件，在添加动作面板单击“设置文本”，在配置动作面板的下拉列表中选择“content”，单击fx图标。02在弹出的“编辑文本”对话框中，单击“插入变量或函数…”链接，分别输入用户名“username”以及密码“pwd”，单击确定按钮，这样就完成给矩形元件的文本内容赋值。二、变量值在页面间传递2.3首页显示变量值设置文本插入全局变量二、变量值在页面间传递2.4页面管理介绍在前面的章节中，使用的都是元件的触发事件，而这次使用的是页面的触发事件，两者的区别在于，一个是针对元件进行触发事件，一个是针对页面的触发事件，两者载体不同。页面管理，由3部分组成：样式、交互、说明，在说明里，可以给页面添加相关注释或者说明。也可以自定义注释。在页面交互里，可以添加一些触发事件，页面的触发事件有页面载入时、窗口尺寸改变时、窗口滚动时等触发事件。在样式里，可以给页面添加一些样式，Axure提供一种默认的页面样式，也可以自定义页面样式，可以设置页面的排列方式、背景色，还可以导入背景图像，设置横向对齐或垂直对齐，可以设置背景图像是否可以重复，以及设置草图效果。二、变量值在页面间传递2.4页面管理介绍页面说明二、变量值在页面间传递2.4页面管理介绍页面相关触发事件二、变量值在页面间传递2.4页面管理介绍页面样式二、变量值在页面间传递2.5发布原型按F5键发布原型，输入用户名“kevin”，密码“123456”，单击登录按钮，可以看到用户名和密码都被带到下一个页面，再输入“小刚”，密码输入“111111”，可以看到用户名和密码是随着输入框里的内容变化而变化，从而能给用户一种真实软件体验效果。登录页面及获取用户信息效果03元件函数和页面函数三、元件函数和页面函数3.1元件函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“元件”选项下可以看到16个元件函数。三、元件函数和页面函数3.1元件函数函数名称说明This获取当前元件对象，当前元件指添加事件的元件Target获取目标元件对象，目标元件指添加动作的元件x获得元件对象的X坐标y获得元件对象的X坐标width获得元件对象的宽度height获得元件对象的高度scrollX获取元件对象水平移动的距离scrollY获取元件对象垂直移动的距离text获取元件对象的文字name获取元件对象的名称top获取元件对象顶部边界的坐标值left获取元件对象左边界的坐标值right获取元件对象右边界的坐标值度bottom获取元件对象底部边界的坐标值opacity获取元件对象的旋转角度rotation获取元件对象的旋转角度三、元件函数和页面函数3.2页面函数函数名称说明PageName获取当前页面的名称单击“编辑文本”对话框中的“插入变量或函数”选项，在“页面”选项下可以看到1个页面函数。04窗口函数和鼠标指针函数四、窗口函数和鼠标指针函数4.1窗口函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“窗口”选项下可以看到4个窗口函数。函数名称说明Window.width获取浏览器的当前宽度Window.height获取浏览器的当前高度Window.scrollX获取浏览器的水平滚动距离Window.scrollY获取浏览器的垂直滚动距离四、窗口函数和鼠标指针函数4.2鼠标指针函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“鼠标指针”选项下可以看到7个鼠标指针函数。函数名称说明Cursor.x获取鼠标当前位置的X轴坐标Cursor.y获取鼠标当前位置的Y轴坐标DragX整个拖动过程中，鼠标指针在水平方向上移动的距离DragY整个拖动过程中，鼠标指针在水平方向上移动的距离TotalDragX整个拖动过程中，鼠标指针在水平方向上移动的距离TotalDragY整个拖动过程中，鼠标指针在垂直方向上移动的距离DragTime

鼠标拖动操作的总时长。从鼠标按下左键到释放左键的总时长，中间过程中，如果未移动鼠标位置，也计算时长。05数字函数和字符串函数五、数字函数和字符串函数5.1数字函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“数字”选项下可以看到3个数字函数。函数名称说明toExponential(decimalPoints)

对象的值转换为指数计数法。decimalPoints为小数点后保留的小数位数toFixed(decimalPoints)

将一个数字转换为保留指定小数位数的数字，超出的后面小数位将自动进行四舍五入。decimalPoints为小数点后保留的小数位数toPrecision(length)

将数字格式化为指定的长度，小数点不计算长度，length为指定的长度五、数字函数和字符串函数5.2字符串函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“字符串”选项下可以看到15个字符串函数。五、数字函数和字符串函数5.2字符串函数函数名称说明length

获取当前文本对象的长度，即字符长度，1个汉字的长度按1计算charAt(index)

获取当前文本对象指定位置的字符，index为大于等于0的整数，字符位置从0开始计数，0为第一位charCodeAt(index)

获取当前文本对象中指定位置字符的Unicode编码（中文编码段19968~40622）；字符起始位置从0开始。index为大于等于0的整数concat(‘string’)

将当前文本对象与另外一个字符创组合，string为组合后显示在后方的字符串indexOf(‘searchValue’)

从左至右查询字符串在当前文本对象中首次出现的位置。未查询到，返回值为-1。参数searchValue为查询的字符串；start为查询的起始位置，官方虽未明说，但经测试是可用的。官方默认没有start，则是从文本的最左侧开始查询五、数字函数和字符串函数5.2字符串函数函数名称说明lastIndexOf(‘searchValue’)

从右至左查询字符串在当前文本对象中首次出现的位置。未查询到，返回值为-1。参数searchValue为查询的字符串；start为查询的起始位置，官方虽未明说，但经测试是可用的。官方默认没有start，则是从文本的最右侧开始查询replace(‘searchvalue’,‘newvalue’)

用新的字符串替换文本对象中指定的字符串。参数newvalue为新的字符串，searchvalue为被替换的字符串slice(str,end)

从当前文本对象中截取从指定位置开始到指定位置结束之间的字符串。参数start为截取部分的起始位置，该数值可为负数。负数代表从文本对象的尾部开始，-1表示末位。-2表示倒数第二位。end为截取部分的结束位置，可省略，省略则表示从截取开始位置至文本对象的末位。这里提取的字符串不包含结束位置五、数字函数和字符串函数5.2字符串函数函数名称说明split(‘separator’,limit)

将当前文本对象中与分隔字符相同的字符转为“,”，形成多组字符串，并返回从左开始的指定组数。参数separator为分隔字符，分隔字符可以为空，为空时将分隔每个字符为一组；limit为返回组数的数值，该参数可以省略，省略该参数则返回所有字符串组substr(start,length)

当前文本对象中从指定起始位置截取一定长度的字符串。参数start为截取的起始位置，length为截取的长度，该参数可以省略，省略则表示从起始位置一直截取到文本对象末尾substring(from,to)

从当前文本对象中截取从指定位置开始到另一指定位置区间的字符串。参数from为指定区间的起始位置，to为指定区间的结束位置，该参数可以省略，省略则表示从起始位置截取到文本对象的末尾。这里提取的字符串不包含末位toLowerCase()

将文本对象中所有的大写字母转换为小写字母toUpperCase()

将文本对象中所有的大写字母转换为小写字母trim

删除文本对象两端的空格toString()

将一个逻辑值转换为字符串06数学函数和日期函数六、数学函数和日期函数6.1数学函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“数学”选项下可以看到22个数学函数。六、数学函数和日期函数6.1数学函数函数名称说明+加，返回前后两个数的和-减，返回前后两个数的差*乘，返回前后两个数的乘积/除，返回前后两个数的商%余，返回前后两个数的余数abs(x)计算参数值的绝对值，参数x为数值acos(x)获取一个数值的反余弦弧度值，其范围是0~pi。参数x为数值，范围在-1~1之asin(x)获取一个数值的反正弦值，参数x为数值，范围在-1~1之间atan(x)获取一个数值的反正切值，参数x为数值atan2(y,x)获取某一点(x,y)的角度值，参数“x,y”为点的坐标数值。返回-PI到PI之间的值，是从x轴正向逆时针旋转到点（x,y）经过的角度ceil(x)向上取整函数，获取大于或者等于指定数值的最小整数，参数x为数值cos(x)获取一个数值的余弦函数，返回-1.0到1.0之间的数，参数x为弧度数值六、数学函数和日期函数6.1数学函数函数名称说明exp(x)获取一个数值的指数函数，计算以e为底的指数，参数x为数值。返回e的x次幂。e代表自然对数的底数，其值近似为2.71828。如exp(1)，输出2.718281828459045floor(x)向下取整函数，获取小于或者等于指定数值的最大整数。参数x为数值log(x)对数函数，计算以e为底的对数值，参数x为数值max(x,y)获取参数中的最大值。参数“x,y”表示多个数值，不一定为2个数值min(x,y)获取参数中的最小值。参数“x,y”表示多个数值，不一定为2个数值pow(x,y)幂函数，计算x的y次幂。参数x为底数，x为大于等于0的数字；y为指数，y为整数，不能为小数random()随机数函数，返回一个0~1之间的随机数。示例获取10-15之间的随机小数，计算公式为Math.random()*5+10sin(x)正弦函数。参数x为弧度数值sqrt(x)平方根函数。参数x为数值tan(x)正切函数。参数x为弧度数值六、数学函数和日期函数6.2日期函数单击“编辑文本”对话框中的“插入变量或函数”选项，在“日期”选项下可以看到39个日期函数。六、数学函数和日期函数6.2日期函数函数名称说明Now返回计算机系统当前设定的日期和时间值GenDate获得生成Axure原型的日期和时间值getDate()返回Date对象属于哪一天的值，可取值1~31getDay()返回Date对象为一周中的哪一天，可取值0～6，周日的值为0getDayOfWeek()返回Date对象为一周中的哪一天，表示为该天的英文表示，如周六表示为“Saturday”getFullYear()获得日期对象的4位年份值，如2015getHours()获得日期对象的小时值，可取值0～23getMilliseconds()获得日期对象的毫秒值getMinutes()获得日期对象的分钟值，可取值0～59getMonth()获得日期对象的月份值getMonthName()获得日期对象的月份的名称，根据当前系统时间关联区域的不同，会显示不同的名称getSeconds()获得日期对象的秒值，可取值0～59getTime()获得1970年1月1日迄今为止的毫秒数六、数学函数和日期函数6.2日期函数函数名称说明getTimezoneOffset()返回本地时间与格林威治标准时间(GMT)的分钟值getUTCDate()根据世界标准时间，返回Date对象属于哪一天的值，可取值1～31getUTCDay()根据世界标准时间，返回Date对象为一周中的哪一天，可取值0～6，周日的值为0getUTCFullYear()根据世界标准时间，获得日期对象的4位年份值，如2015getUTCHours()根据世界标准时间，获得日期对象的小时值，可取值0～23getUTCMilliseconds()根据世界标准时间，获得日期对象的毫秒值getUTCMinutes()根据世界标准时间，获得日期对象的分钟值，可取值0～59getUTCMonth()根据世界标准时间，获得日期对象的月份值getUTCSeconds()根据世界标准时间，获得日期对象的秒值，可取值0～59parse(datestring)格式化日期，返回日