Axure制作微信小程序原型图时，如何实现页面间参数传递？

Question

在使用Axure制作微信小程序原型时，如何实现页面间参数传递是一个常见难题。例如：当用户点击列表项跳转到详情页时，需要将选中项的ID或名称传递给目标页面以展示对应内容。此时可以通过Axure的“设置查询字符串”功能实现参数传递。具体操作为：在源页面的交互事件中，选择“链接到页面”并添加查询字符串（如?id=1&name=Axure），然后在目标页面通过“URL变量”提取参数值，并将其赋值给动态面板或文本框显示。但需注意，Axure仅支持模拟参数传递逻辑，实际开发仍需对接代码实现真实数据交互。此外，若涉及复杂数据结构，可借助JSON格式字符串化后传递，再于目标页解析使用。这种方法能有效提升原型的功能性和交互真实感。

Answer 1

1. 基础概念：页面间参数传递的原理

在使用Axure制作微信小程序原型时，页面间的参数传递是一个常见需求。例如，当用户点击列表项跳转到详情页时，需要将选中项的ID或名称传递给目标页面以展示对应内容。这种交互逻辑可以通过Axure中的“设置查询字符串”功能实现。

查询字符串是一种通过URL传递参数的方式，格式为?key=value&key2=value2。在Axure中，可以利用这一机制模拟页面间的数据传递过程。以下是基本操作步骤：

1. 在源页面的交互事件中，选择“链接到页面”，并添加查询字符串（如?id=1&name=Axure）。
2. 在目标页面中，通过“URL变量”提取参数值，并将其赋值给动态面板或文本框显示。

尽管Axure支持模拟参数传递逻辑，但需注意其仅限于原型设计阶段，实际开发仍需对接代码实现真实数据交互。

2. 深入分析：复杂数据结构的处理

在某些场景下，可能需要传递更复杂的参数结构，例如对象或数组。此时可以借助JSON格式进行字符串化后传递，再于目标页解析使用。以下是一个示例：

// 源页面
var data = {id: 1, name: "Axure", details: ["feature1", "feature2"]};
var jsonString = JSON.stringify(data);
window.location.href = "targetPage.axure?page=target&id=" + jsonString;

// 目标页面
var urlParams = new URLSearchParams(window.location.search);
var jsonData = JSON.parse(urlParams.get("id"));
console.log(jsonData.name); // 输出 Axure
    

此方法不仅提升了原型的功能性和交互真实感，还为后续开发提供了清晰的逻辑参考。

3. 实践案例：从问题到解决方案

假设我们需要设计一个电商类微信小程序原型，其中包含商品列表页和商品详情页。用户点击某个商品时，应跳转到详情页并展示该商品的具体信息。

步骤	操作说明
1	在商品列表页中，为每个商品项添加点击事件，设置查询字符串（如?id=101&name=ProductA）。
2	在商品详情页中，通过URL变量提取参数值，并动态更新页面内容。

此外，若涉及多级嵌套数据，可通过JSON格式进一步优化参数传递方式。

4. 流程图：参数传递的整体流程

sequenceDiagram
            participant User as 用户
            participant SourcePage as 源页面
            participant TargetPage as 目标页面
            User->>SourcePage: 点击列表项
            SourcePage->>TargetPage: 跳转并传递参数 (id=1&name=Axure)
            TargetPage->>TargetPage: 提取参数并更新UI

通过上述流程图可以看出，参数传递的核心在于查询字符串的构造与解析。