跳到主要内容

页面跳转传参配置

在微搭编辑器中,可以通过配置页面参数来实现跳转传参功能,通常可用于实现对详情页面的内容控制。

基础页面跳转传参功能实现

我们可以使用内置的页面跳转方法来实现页面之间的参数传递,方法如下:

  1. 在编辑器中创建两个页面,分别命名为页面 A 与页面 B。

  1. 进入页面 A,单击变量进入变量管理页面。在页面 A 中创建一个数据类型为 String 类型的普通变量,并将其初始值设置为 test

  1. 在页面 A 中创建一个按钮组件,为按钮组件进行点击触发页面跳转的行为配置。

  1. 选择模式为打开页面,页面选择页面 B,单击下方的新建页面参数,为页面 B 创建一个用于接收参数的参数变量

  1. 参数变量配置完成后,单击数据绑定按钮

  1. 在数据绑定弹窗中绑定步骤2中创建的普通变量后保存,即可完成页面的跳转传参配置。

  1. 进入页面 B,创建一个文本组件,将文本内容与 步骤4 中创建的参数变量进行绑定。

  1. 开启实时预览,在页面 A 中单击按钮跳转至页面 B,可以看到文本组件的内容会根据传参变更为 test

循环组件跳转传参功能实现

在实际应用搭建场景中,经常会遇到通过点击列表页、导航栏跳转至指定详情页的情况,微搭同样支持上述场景的搭建,方法如下:

  1. 在编辑器中创建两个页面,分别命名为页面 A 与页面 B,其中页面 A 即为列表页面,而页面 B 则为详情页面。

  2. 打开 数据模型 管理页面,创建一个数据模型并按照下述表格进行字段配置:

    新增字段字段类型
    列表标题字符串
    详情内容字符串
  3. 进入数据管理后台单击新建,为数据模型进行体验数据录入。

  1. 回到编辑器,在页面 A 中创建一个模型变量,绑定刚刚创建的数据模型并选择变量初始化方法为查看列表-内置(WedaGetList)

  1. 创建普通容器并绑定循环,方法详情请参见 组件绑定循环展示,绑定刚刚创建的模型变量。
  2. 在已绑定了循环的普通容器下拖入列表项组件。

  1. 为列表项组件配置区的标题属性进行属性绑定,在数据绑定弹窗中选择循环对象,并绑定对应列表标题的字段。

  1. 在大纲树中选中配置了循环的普通容器,为该容器进行跳转传参的配置。

  1. 在配置区中进行页面跳转的配置,页面参数绑定需在绑定弹窗的循环对象中绑定对应数据模型唯一标识的字段。

  1. 绑定完成后对配置进行保存即可。

  1. 进入页面 B,为页面 B 创建一个模型变量,同样绑定 步骤2 中创建的数据模型并选择变量初始化方法为查询单条-内置(WedaGetItem),并在页面初始化方法入参中绑定 步骤9 中创建的参数变量。

  1. 为页面 B 创建一个文本组件,将文本内容与上一步中创建的模型变量中对应详情内容的字段进行绑定。

  1. 开启实时预览,分别在页面 A 中单击不同的列表跳转至页面,可以看到页面会随之呈现不同的详情内容。