页面交互是指在不同页面中,进行的相互跳转动作。可跳转同一模块中的任一页面,或跳转外部页面。在跳转内部页面时,用户可设置跳转携带相关参数。
页面交互有两种交互方式:通过页面组件交互和通过页面路由交互。
通过页面组件交互
事件是应用在运行时页面内发生的动作或者用户执行的操作(例如单击组件、组件加载等);
动作是响应事件后,按照您设定的方式对事件做出回应(如页面跳转)。例如:如果用户在网页上单击一个按钮,您可能想通过显示一个信息框来响应这个动作。
事件触发动作目前有三种方式:
单击后触发,如按钮类组件,单击后触发下一步操作。
页面加载时触发。
输入框、单选框或开关内容变化时触发。
配置事件
查看组件可配置事件列表:
典型的与数据相关的组件有:文本、输入框、文本域、单选框、图片上传、文件上传、徽标和下拉菜单。
每个和数据有关的组件,在其属性面板侧都可进行数据绑定。您需要先将组件放置到绑定数据表的Data/List数据容器中,才能进行实体的绑定。
图片、按钮组件是事件触发组件,您可以为图片和按钮进行事件编排。
以文本框组件为例,在画布中拖入并选中文本框组件,在右侧事件栏中,单击事件,展开折叠框。选择点击,会展现出当前组件可配置的动作列表。
配置事件触发时的相应动作:
当选择点击下方的复选框后,可展现当前事件可配置的动作列表,说明如下:
动作类别
动作名称
详细说明
无
-
无单击触发动作效果。
页面相关
内部跳转
事件触发后跳转到当前应用内的其他页面,您可以选择已存在的页面作为跳转落地页。
外部链接
输入外部页面的链接地址。在填写外部页面地址时,需要将“http://”或“https://”请求头也一并填入。
关闭页面
事件触发后,关闭对应页面。
数据相关
保存数据
保存当前数据容器中的数据,将数据提交到后台。
取消保存
取消保存当前数据容器中的数据。
删除数据
删除当前数据。
逻辑流相关
调用前端逻辑流
调用已创建的前端逻辑流。
调用后端逻辑流
调用已创建的后端逻辑流。
工作流相关
调用工作流
调用已创建的工作流。
完成用户任务
完成某个用户任务。
展示用户任务界面
展示某个用户任务界面。
预览效果
按步骤2中配置示例配置完成后,可在预览页面中查看已配置的事件和动作能否正常触发。保存当前页面,并依次预览、发布。
通过页面路由交互
页面路由主要是将页面和用于跳转的URL进行映射,您可为页面自定义访问路径、URL参数,并可预置访问该路径时的前置处理逻辑。
登录魔笔。
在顶部菜单栏选择应用管理,在右上角搜索框中输入目标应用,例如TEST。
在指定的应用卡片中单击进入设计器,进入应用开发页面(Mobi Studio)。
在左侧功能区单击,展开页面管理右侧栏。
选择页面路由页签,单击添加页面路由。
在添加页面路由页面,填写相关信息。
页面路由配置完成后,访问应用时可在链接后添加配置的URL路径即可访问指定页面。
例如应用路径为
https://mobiapp.cloud/link
,可使用https://mobiapp.cloud/link/test
访问指定页面。参数名称
参数说明
选择页面
选择需要添加路由的页面。
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,该链接可直接访问或对外分享。
处理逻辑
可选择如下选项:
无
调用前端逻辑流:勾选此选项后,可在下方选择对应前端逻辑流。
调用后端逻辑流:勾选此选项后,可在下方选择对应后端逻辑流。