最佳实战 | 如何使用腾讯云微搭从0到1开发企业门户应用

应用功能模块概述

企业门户应用一共由五个页面构成，并且不同的页面具备不同的功能模块，如下图所示：

应用展示

企业门户应用主要功能为企业动态、企业信息的展示，应用详情图如下：

应用数据源设计

数据模型创建

在创建应用之前，我们需要知道，当应用中存在使用动态数据功能模块时，便需要创建对应的数据模型进行管理。以企业门户应用为例，我们需要创建的数据模型以及字段如下：

数据录入

数据模型创建完成后，需前往数据管理后台进行体验数据的录入，步骤如下：

1、在 数据模型 页面中单击数据管理后台进入。

2、进入数据管理后台 > 我的数据源页面，更换数据为体验数据。

3、以企业动态表为例，单击管理数据进入到对应的管理后台。

4、单击新建，进入数据创建页面。

5、在数据创建页进行体验数据录入后单击提交即可。

说明：
实际搭建应用的过程中会需要通过实时预览来查看页面的真实状态，并且由于实时预览调用的数据为体验数据，因此建议在开发应用前对体验数据进行录入，便于进行应用的开发调试。

步骤2：搭建应用前端页面

前提条件

• 完成企业门户应用的 数据模型设计。
• 完成 自定义应用的创建。

企业门户主页

步骤1：新建页面

新建一个页面，命名为企业门户主页。

步骤2：创建首页 banner 图模块

在页面右侧的编辑区中选择普通容器组件，之后在普通容器组件中放置轮播组件，随后可通过在轮播组件中加入图片组件来实现图片的轮播，若存在图片配置需求，可选中图片组件后在右侧的配置区进行图片的替换。

说明：
使用普通容器可以进行组件的统一管理与样式调整，因此在实际开发应用的过程中建议将组件按模块放置到普通容器中，便于管理的同时也会提升开发效率。

步骤3：创建应用场景导航

通过观察页面设计可以发现，应用场景导航由四个导航 Tab 构成，并且排列方式为横向排布，因此为了实现该功能，我们需要使用模型变量、网格布局组件以及组件循环功能。

创建单个导航 Tab

1、创建一个普通容器，并在容器中加入网格布局组件，将网格组件的列比例属性配置为"12"。

2、在网格容器的分栏插槽中拖入普通容器，并在普通容器中放置图片与文本组件。

说明：此处需要注意，在放置图片与文本组件时，大纲树中图片组件需要在文本组件的上方，否则位置会颠倒。

创建模型变量

1、单击右上角的变量，进入变量编辑页面。

2、在当前页面，单击创建按钮进行模型变量的创建。

3、输入变量标识，并选择变量类型为模型变量，数据源选择应用场景表，变量初始化方法选择查询列表-内置(WedaGetRecords)。根据设计图设计，此处只展示四个导航 Tab，因此按照条件对方法参数进行调整。

<