使用内嵌页面
- 内嵌页面能力类似于iframe,配置一个页面地址即可访问该页面。
- 平台封装了一些能力,用于内嵌页面与母页面的数据传递。
1. 属性设置
1.1 动态设置页面地址
在组件的属性可以设置页面的地址。
1.2 设置页面参数
在组件的属性可以设置页面的参数,页面参数可以在子页面中先定义好,然后在“参数”中就可以对这些参数进行赋值。
2. 数据传递
2.1 母向子传递数据
在开发中,常常需要将一些ID、变量等参数由母向子传递,这种需求可以过上面1.2中提到的参数来完成。
2.2 子向母传递数据
当需要由子向母回写数据时,这时候往往是大量的数据,那么可以使用“数据映射”来完成,在“设置数据映射”中绑定对应的数据集以及数据集里的字段,选择适合的模式(操作与对话框一致)。
在子页面需要使用操作中的“确定返回”,设置返回的数据集;或者js中的okclose将数据返回。
$page.comp("commonOperation").okclose("mainData")
当在父页面需要获取子页面的组件时可以通过如下方式获取到子页面的页面对象:
let innerModel = await $page.comp('pageFrame').getInnerModel();
需要注意的是pageFrame组件上要设置ref,$page.comp('pageFrame')
中的pageFrame就是ref的属性值
有了页面对象就可以获取页面的组件,如下:
let onButton0Click = async (event) => {
let innerModel = await $page.comp('pageFrame').getInnerModel();
let process = innerModel.comp("wfmui2");
process.advanceQuery();
}
在子页面也可以父页面的页面对象,有页面对象就可以通过comp("组件id")获取页面的组件:
$page.ownerModel //获取的是pageFrame所在页面对象
$page.ownerPage //如果有多层pageFrame嵌套,获取最根层的页面对象,一般是门户打开的页面