页面交互

页面交互是指在不同页面中,进行的相互跳转动作。可跳转同一模块中的任一页面,或跳转外部页面。在跳转内部页面时,用户可设置跳转携带相关参数。

页面交互有两种交互方式:通过页面组件交互和通过页面路由交互。

通过页面组件交互

事件是应用在运行时页面内发生的动作或者用户执行的操作(例如单击组件、组件加载等);

动作是响应事件后,按照您设定的方式对事件做出回应(如页面跳转)。例如:如果用户在网页上单击一个按钮,您可能想通过显示一个信息框来响应这个动作。

事件触发动作目前有三种方式:

  • 单击后触发,如按钮类组件,单击后触发下一步操作。

  • 页面加载时触发。

  • 输入框、单选框或开关内容变化时触发。

配置事件

  1. 查看组件可配置事件列表:

    • 典型的与数据相关的组件有:文本、输入框、文本域、单选框、图片上传、文件上传、徽标和下拉菜单。

    • 每个和数据有关的组件,在其属性面板侧都可进行数据绑定。您需要先将组件放置到绑定数据表的Data/List数据容器中,才能进行实体的绑定。

    • 图片、按钮组件是事件触发组件,您可以为图片和按钮进行事件编排。

    文本框组件为例,在画布中拖入并选中文本框组件,在右侧事件栏中,单击事件,展开折叠框。选择点击,会展现出当前组件可配置的动作列表。

    9a132b0fe543aec53dcca8fc24528af9

  2. 配置事件触发时的相应动作:

    当选择点击下方的复选框后,可展现当前事件可配置的动作列表,说明如下:

    动作类别

    动作名称

    详细说明

    -

    无单击触发动作效果。

    页面相关

    内部跳转

    事件触发后跳转到当前应用内的其他页面,您可以选择已存在的页面作为跳转落地页。

    外部链接

    输入外部页面的链接地址。在填写外部页面地址时,需要将“http://”或“https://”请求头也一并填入。

    关闭页面

    事件触发后,关闭对应页面。

    数据相关

    保存数据

    保存当前数据容器中的数据,将数据提交到后台。

    取消保存

    取消保存当前数据容器中的数据。

    删除数据

    删除当前数据。

    逻辑流相关

    调用前端逻辑流

    调用已创建的前端逻辑流。

    调用后端逻辑流

    调用已创建的后端逻辑流。

    工作流相关

    调用工作流

    调用已创建的工作流。

    完成用户任务

    完成某个用户任务。

    展示用户任务界面

    展示某个用户任务界面。

  3. 预览效果

    按步骤2中配置示例配置完成后,可在预览页面中查看已配置的事件和动作能否正常触发。保存当前页面,并依次预览、发布。

通过页面路由交互

页面路由主要是将页面和用于跳转的URL进行映射,您可为页面自定义访问路径、URL参数,并可预置访问该路径时的前置处理逻辑。

  1. 登录魔笔

  2. 在顶部菜单栏选择应用管理,在右上角搜索框中输入目标应用,例如TEST

  3. 在指定的应用卡片中单击进入设计器,进入应用开发页面(Mobi Studio)。

  4. 在左侧功能区单击d4,展开页面管理右侧栏。

  5. 选择页面路由页签,单击添加页面路由

  6. 添加页面路由页面,填写相关信息。

    页面路由配置完成后,访问应用时可在链接后添加配置的URL路径即可访问指定页面。

    例如应用路径为https://mobiapp.cloud/link,可使用https://mobiapp.cloud/link/test访问指定页面。

    image.png

    参数名称

    参数说明

    选择页面

    选择需要添加路由的页面。

    URL路径

    自行定义当前页面的链接地址,输入框可输入:形如/linkhome或/link/home;

    • 不带自定义参数的场景:

      可自定义页面URL相对路径。

      示例:http(s)://domain/p为应用自带的前缀,在输入框输入/link/home,则http(s)://domain/p/link/home即为当前页面的持久访问地址。

    • 带自定义参数的场景:

      可自定义页面的URL参数,路径或参数中动态的变量可用${var}形式替代,譬如:/order/${id}。

      示例:假如http(s)://domain/p为应用自带的前缀,889932为实际id。则页面的实际持久链接为http(s)://domain/p/order/889932,该链接可直接访问或对外分享。

    处理逻辑

    可选择如下选项:

    • 调用前端逻辑流:勾选此选项后,可在下方选择对应前端逻辑流。

    • 调用后端逻辑流:勾选此选项后,可在下方选择对应后端逻辑流。