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

Posted 2023-05-14

参考技术A         我们通过对一个按钮添加交互：点击时——打开链接——连接到——选择对应的页面，就可以很简单的实现跳页功能，这也是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系列教程(七):变量

参考技术A 上一节内容我们能学会了如何在页面之间跳转，我们这一节课来说说变量。辣么神马是变量呢，变量我们可以这样子理解，我们在数学中都知道有个未知数X吧，辣么变量就跟未知数差不多。都是未知的。变量又细分为全局变量和局部变量

1.全局变量

全局变量听起来赶脚范围挺大，好牛的说。事实上确实如此。全部变量在原型的每一个页面都可以进行调用。辣么全局变量在哪儿呢？

工具栏(项目)--全局变量

2.局部变量

局部变量听起来范围很小，他只针对当前页面，其他页面调用不了。

局部变量往往需要配合其他元件进行使用，单独是不存在的。

3.在页面中传递变量

在原型当中登录和登录成功或者是登录和主页面，往往需要传递用户名，那这个用户名怎么传递的呢。

我们在上一节内容的RP上进行修改，请点击 第一次交互:实现跳转页面 查看上一节内容。

首先我们可以创建一个全局变量laodname用来保存用户名，我们用户名是从文本框进行输入的，不能直接保存到全局变量中，我们需要通过局部变量。

通过这样子我们把文本框中输入的用户名就保存到了全局变量中。当我们点击登录的时候跳转到page1页面就不要跳到百度了，我们将用户名保存到全局变量的操作一定要在跳转之前，只有这样才会被保存，在跳转之后，那么就没有意义了，涉及到了一个执行顺序问题