【Axure笔记】8.如何使用url及变量链接页面并实现跳转

        我们通过对一个按钮添加交互：点击时——打开链接——连接到——选择对应的页面，就可以很简单的实现跳页功能，这也是Axure里面用的最多的功能之一。

        而细心的朋友可能发现在连接到中有一个连接到URL或文件路径的选项，我们点击后出现一个需要我们填值的空，如何通过填写这个值来实现跳页呢？

        

        其实做法很简单，如上图只需要在链接到下面填写对应页面的名字并在后面加上.html就可以了，我们用Axure自带的示例进行演示，文件中有“Tour”和“Mobile”两个页面，当我们点击Tour页面中“GO TO MOBILE PAGE”按钮时跳转到Mobile页面，我们当然可以用最简单的方法直接选择连接到Mobile页面，我们也可以选择连接到URL或文件路径，并在值中填写“Mobile.html”,这样的效果也是一样的。

      【注意】使用URL跳页后所有的全局变量将会清空，因为系统认为当你使用URL打开页面时是新建的页面，将不会在这个“新页面”中保留原来的全局变量。

        有些人可能会有疑问，为什么明明可以直接连接到页面，却要使用Url来进行连接呢？因为使用变量进行跳转的场景则更为丰富，例如我们有三个页面“Tour”“Mobile”“Share”，前两个页面之间都有通往Share的按钮，而Share页面作为一个全局页面只有一个返回按钮，如何让用户点击返回按钮时返回之前的页面呢？这就需要在返回按钮中使用变量URL了。

具体做法如下：

1. 首先点击屏幕上方Axure菜单栏中“项目”——“全局变量”，新建一个名为“WhoCalledShare”（变量名可自定义，只要是英文都可以）。

2. 回到Tour页面，在Share图标上面加热区（ 为什么使用热区而不直接在图标上编写逻辑？ ），并在热区中编写交互“点击时”——“设置变量值”——目标“WhoCalledShare”——设置为“值”——值点击fx——“插入变量和函数”——选择页面函数类中的“PageName”——确定完成；

再添加“点击时”——打开链接——链接到“Share”，到这里我们实现了Tour页面在点击Share按钮时的变量赋值和跳页逻辑。

3. 打开Mobile页面，重复在Tour页面中的 *** 作，实现Mobile页面在点击Share按钮时的变量赋值和跳页逻辑。

4. 打开Share页面，在BACK按钮上编写交互“点击时”——“打开链接”——链接到——链接到URL或文件路径——点击fx-插入变量和函数-选择“WhoCalledShare”——之后在后面加上.html——确认完成即可。

这样我们就实现了之前GIF图中通过变量和URL链接实现复杂的页面跳转的效果。

思考：通过URL跳转页面的方式虽然方便，但是会丢失全局变量，那么如何在保证不丢失全局变量的情况下也实现根据变量来跳转页面呢？其实也不难，设置返回按钮点击时命令的启用情形就好了，分别设置if WhoCalledShare == "Tour"时，链接到Tour页面和if WhoCalledShare == "Mobile"时链接到Mobile页面就好啦。

——————————————————文章目录——————————————————

Chapter 1

开始前的准备

1. 写在前面，我为什么要开Axure这个坑？

2. 没有完整构想的产品上来直接开画就是耍流氓。

3. 做之前先想好：高保真还是低保真？

4. 移动端的相关规范，多多少少还是要知道一点点的。

Chapter 2

开始做吧,初学时懵逼的问题：

5. 站在巨人的肩膀上：先装个元件库吧

6. 技多不压身，元件多了真的压

7. 文本框、文本域：如何获取输入的文字？

8. 如何使用url及变量链接页面并实现跳转

9. 关于命名规范：页面、元件、组。

10. 什么时候该使用动态面板？

11. 什么时候应该使用中继器？

12. 交互、变量、函数我该怎么着手学习？

13. 关于交互的最后防线——启用情形

Chapter3

实战教程，未完待续...

第一步，打开Axure RP 8软件，找到“Rounded Rectangle”，拖出一个到Home页面

第二步，拖出两个“Label”和两个“Text Field”到Home界面，并修改了Label标签内容

第三步，再拖出两个“Link Button”、一个“Vertical Line”、一个”Checkbox“和两个”HTML Button“，并修改其显示的内容

第四步，为了限制用户名、密码输入，将用户名长度限制为20，密码长度也为20，并且显示成密码格式输入

第五步，给”忘记“和”注册“添加链接，一个链接到”Page 1“，另一个链接到”Page 2“

最后一步，在浏览器上预览，点击”忘记“或”注册“

可以用超链接的。只要是可以做成超链接的组件（图片、文字等），在Axure里都同样可以实现超链接。

不知道你用的是什么版本的Axure，以Axure RP Pro 5.6为例：

1、把组件拖放到工作区，或单击需要进行超链接的组件；

2、在右侧的“注解和交互”工作区>“交互”中有“快速链接”项；

3、单击“快速链接”，会出现“链接属性”选项页，可以选择“链接到本设计中的页面”或“链接到外部网址……”，选择完，确定即可完成链接。

4、可以用F5生成页面检查效果。

---