【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

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

海外MBA在读学生一枚，由于最近观察本地市场规律，决定尝试研发一款集中本地吃喝住行的APP。

实现页面跳转和实现页面切换显示是不同的，本文介绍如何实现页面跳转

工具Axure Rp9，MAC版本

主页如下

以食物的下拉选择为例

可选食物为：Chinese Food、Indonesian Food、Malaysian Food、Philippine Food、Singapore Food、Thai Food、 All Food

步骤如下：

1，元件里选择--下拉列表

双击进入编辑，编辑多项，效果如下

2，给此下拉列表命名为：Food select

期望结果，当我选择Chinese时，页面跳转到Chinese food页面

    2-1，新建交互--选项改变时--添加情景

    2-2，设置情景参数

2-3，打开链接--Chinese food page    （已经设计好的）--确认

2-4，预览下，ok

欢迎大家共同探讨学习

具体步骤如下：

这需要用到动态面板

1，从组件中将动态面板组件拖放到页面，点击右键，选编辑动态面板，选设为隐藏。

2，双击动态面板，编辑状态，在状态1里，设计好你的注册页面（动态面板默认显示的是第一个状态也就是最上面的）。

3，回到主页，编辑注册按钮的onclick事件，选择显示动态面板。

整体过程为：拖拽一个图片，双击能设置背景图片。然后选中按钮，并双击OnClick。

2.在d出的视图中可以修改点击事件的名字

3.由于我这个是在当前页面d出二级页面，所以点击Current Window，并点击要跳转的页面，然后点击ok。

4、点击ok后，回到工作区发现原来的按钮上有一个数字，表示添加上了点击事件，图中这是我添加的第二个点击事件，所以现实2。

至此点击事件的添加以及页面的跳转就完成了。

---