企业门户应用一共由五个页面构成,并且不同的页面具备不同的功能模块,如下图所示:
企业门户应用主要功能为企业动态、企业信息的展示,应用详情图如下:
在创建应用之前,我们需要知道,当应用中存在使用动态数据功能模块时,便需要创建对应的数据模型进行管理。以企业门户应用为例,我们需要创建的数据模型以及字段如下:
数据模型创建完成后,需前往数据管理后台进行体验数据的录入,步骤如下:
? 实际搭建应用的过程中会需要通过实时预览来查看页面的真实状态,并且由于实时预览调用的数据为体验数据,因此建议在开发应用前对体验数据进行录入,便于进行应用的开发调试。
新建一个页面,命名为企业门户主页。
在页面右侧的编辑区中选择普通容器组件,之后在普通容器组件中放置轮播组件,随后可通过在轮播组件中加入图片组件来实现图片的轮播,若存在图片配置需求,可选中图片组件后在右侧的配置区进行图片的替换。
? 使用普通容器可以进行组件的统一管理与样式调整,因此在实际开发应用的过程中建议将组件按模块放置到普通容器中,便于管理的同时也会提升开发效率。
通过观察页面设计可以发现,应用场景导航由四个导航 Tab 构成,并且排列方式为横向排布,因此为了实现该功能,我们需要使用模型变量、网格布局组件以及组件循环功能。
? 此处需要注意,在放置图片与文本组件时,大纲树中图片组件需要在文本组件的上方,否则位置会颠倒。
循环与数据配置完成后,该模块的样式并没有按照应用设计图中那样进行展示,因此我们需要对组件进行样式的调整来使其达到预期,首先对图片组件的宽高进行调整。
关于弹性布局:
设置了弹性布局容器内的组件会根据当前设置的主轴方向、主轴对齐、副轴对齐进行布局的调整。
创建一个普通容器,在普通容器中添加文本组件,在右侧的配置区中将文本组件的内容修改为"最新动态",对齐方式修改为"向左对齐",之后单击样式 Tab,将文本的属性设置为"粗"。
添加一个普通容器,随后在该容器下添加图文展示项组件,随后在右侧配置区开启该组件的自定义内容选项。
? 开启自定义内容选项后,图文展示项组件便可以以插槽的形式来展示内容,只需要将组件放置在主内容插槽即可。
在右侧配置区删除"内容"配置项中的文本,随后在主内容插槽中插入两个文本组件,修改完成后组件样式如下图所示:
与 步骤3 的创建方式相同,创建模型变量,变量绑定企业动态表,变量初始化方法选择查询列表-内置(WedaGetRecords)。根据设计图设计,此处只展示时间最新的四个动态,因此按照条件对方法参数进行调整。
与应用场景模块创建方式相同,使用网格布局、文本、图片组件来实现。具体实现步骤可参见 步骤3。
新建应用场景详情页面,页面创建流程可参见 上文。
! 详情页的展示内容根据跳转传参来进行获取,此处模块的变量绑定请参见 应用场景页面逻辑设计。
新建应用场景详情页面,页面创建流程可参见 上文。
! 详情页的展示内容根据跳转传参来进行获取,此处模块的变量绑定请参见 首页动态页面逻辑设计。
动态列表页搭建方式与主页动态列表模块搭建方式大致相同,值得注意的是,此处的动态列表页为展示全部动态,因此绑定的模型变量存在差异,此处模型变量应调用**查看列表-内置(WedaGetList)**方法。
设计思路:通过低代码方法获取到当前单击 Tab 元素对应的数据模型 ID,随后为 Tab 元素设置跳转时间,并将该数据模型 ID 作为参数传递到应用场景详情页,应用场景详情页根据数据模型 ID 调用 WedaGetRecords 方法获取到对应的数据并实现在前端页面展示。
为企业门户主页页面创建普通变量,用于接收点击导航Tab时返回的数据模型 ID。单击上方变量,在当前页面创建一个普通变量命名为 getId,数据类型选择字符串。
!此处需要注意方法创建的先后顺序,需要先进行变量赋值后再绑定页面跳转方法,否则会导致页面跳转时的传参为空值。
为应用场景详情页创建模型变量,使用主页导航 Tab 传递的参数进行数据查询与渲染。
进入应用主页,开启实时预览后单击应用场景 Tab 按钮,查看是否能够正常跳转并且详情页内容是否按预期展示。
设计思路:与应用场景 Tab 导航实现方式相同,通过在跳转详情页时传入数据源 ID 实现该功能。
为当前页面创建普通变量,用于接收点击列表时返回的数据模型ID。单击上方变量,在当前页面创建一个普通变量命名为getListID,数据类型选择字符串。
!此处需要注意方法创建的先后顺序,需要先进行变量赋值后再绑定页面跳转方法,否则会导致页面跳转时的传参为空值。
为企业动态详情页创建模型变量,使用主页导航 Tab 传递的参数进行数据查询与渲染。
进入应用主页,开启实时预览后点击列表,查看是否能够正常跳转并且详情页内容是否按预期展示。
?动态列表页跳转详情页的操作可复用该模块方法。