关于低代码:最佳实战-使用微搭低代码10分钟快速搭建企业门户应用

本文以下图展现的企业门户利用为例，咱们来学习如何应用微搭进行企业门户利用的疾速搭建。

应用腾讯文档疾速创立数据模型与数据管理后盾

咱们能够通过导入腾讯文档的 Excel 文件进行数据模型与数据管理后盾的疾速创立

1. 在控制台的 创立利用 页面，抉择新建数据管理利用。
   
2. 抉择新建形式为 从 Excel 新建。
   
3. 抉择 导入内部文档，并对腾讯文档进行受权操作。
   
4. 受权实现后能够抉择对应的 Excel 文件进行导入，可单击下方的 示例模板 进行示例文件的下载。
   
5. 导入实现后，会主动依据 Excel 文件辨认出数据模型字段以及数据模型中存储的数据，如下图所示，确认无误后单击 下一步。
   
6. 输出名称后，即可主动实现数据模型的生成与数据管理后盾的创立。
   

从空白开始创立门户利用

创立空白利用

1. 在控制台的 创立利用 页面，抉择新建门户利用。
   
2. 抉择从空白新建。
   
3. 输出利用名称后即可实现空白利用的创立，创立实现后页面会主动跳转到利用编辑器。
   

创立企业门户主页

1. 在指引中抉择空白页进行创立。
   
2. 在页面中增加 轮播图 组件。
   
3. 在右侧轮播图的右侧配置区中增加轮播图须要展现的图片。
   
4. 随后抉择 题目 组件，并批改题目组件的相干配置。
   
5. 随后在题目组件款式配置区中，将题目组件的上下边距调整为 20，便于页面展现更加清晰。
   
6. 随后增加 宫格导航 组件，用于场景能力的相干展现。
   
7. 在右侧的组件配置区中为宫格导航进行图片与题目配置。
   
8. 宫格导航配置实现后，咱们右键选中刚刚创立的 题目组件，抉择克隆，将克隆后的题目组件利落至宫格导航组件的下方并批改题目组件文本内容。
   
9. 增加一个 列表视图 组件，抉择模板为 卡片列表。
   
10. 在右侧对列表视图组件进行数据绑定配置，在右侧数据模型配置中抉择通过 Excel 生成的数据模型。
    
11. 数据配置实现后，咱们须要对列表视图的款式进行调整。在纲要书中选中列表视图下方的 一般容器 ，在组件的款式配置区将边框调整为 无。
    
12. 随后咱们对列表视图中的图片进行数据绑定，选中列表视图下的图片组件，随后在右侧配置区中单击 数据绑定按钮，绑定对应的数据字段。
    
13. 反复上述办法，为文本组件进行数据绑定，绑定实现后成果如下：
    
14. 之后咱们批改列表视图的配置，使此处仅展现 4 条数据，并且分页模式批改为不分页。
    
15. 之后咱们能够应用雷同的形式进行 ” 合作伙伴 ” 模块的构建，合作伙伴的相干数据须要咱们通过字段进行查找，咱们能够通过列表视图的配置区进行数据筛选。
    
16. 为列表视图视图配置实现数据模型后，单击下方的数据筛选弹窗，配置筛选条件为 category 等于 ” 单干 ”，如下图所示：
    
17. 配置实现后将组件与数据进行绑定，能够看到列表视图仅会展现合作伙伴的相干数据，至此咱们的企业门户主页创立实现。
    

创立企业动态列表页

1. 创立一个新页面，并命名为 ” 企业动态列表 ”。
   
2. 拖入列表视图组件，抉择模板为 图文列表。
   
3. 为列表视图绑定数据模型后，将列表中的图片、文本顺次与数据进行绑定即可实现图文列表页的构建。
   

创立对于咱们页面

1. 之后再次新增一个页面，并命名为 ”” 对于咱们 ”。
2. 新建一个 一般容器 ，在一般容器下增加一个 图片组件 并绑定须要展现的图片素材, 并将图片组件的宽度调整为 100%。
   
3. 之后再次新建一个一般容器，并在一般容器下增加一个 题目组件，并按需要进行文案的调整。题目组件的大小设置为 ”3″, 对齐形式设置为 ” 左 ”。
   
4. 再次新建一般容器，并在一般容器下增加一个 富文本组件，并在富文本组件的配置区中进行展现内容的输出。
   
5. 之后咱们对页面的布局款式进行轻微调整，将题目组件的全副内间距调整为 20，富文本组件的左右内间距调整为 20，至此咱们便实现了 ” 对于咱们 ” 页面的创立。
   

创立内容详情页面

1. “ 内容详情 ”” 页面与 ” 对于咱们 ” 页面布局根本相似，咱们能够克隆性能进行页面的复制，并单击 页面设置 按钮批改页面名称为 ” 内容详情 ”。
   
2. 在复制后的页面中增加一个文本组件，并将文本组件的左右间距调整为 20，用于详情页子标题的展现。
   
3. 随后咱们在组件区中抉择 数据视图组件，将数据视图组件自带的一般容器删除，并将纲要树的全副组件拖入数据视图组件下。
   
4. 为数据视图组件绑定数据模型，随后顺次为内容详情页面的图片、文本、富文本组件进行数据字段绑定，绑定实现后咱们便实现了内容详情页的搭建。
   

实现内容列表到内容详情页的页面跳转逻辑

1. 选中企业门户主页列表视图下的一般容器组件，并在右侧组件配置区单击行为配置按钮。
   
2. 为一般容器配置单击后跳转至内容详情页的事件，单击下方的 新建页面参数，创立一个名为 \_id 的页面参数。
   
3. 页面参数创立实现后，单击页面参数右侧的 数据绑定按钮。
   
4. 在数据绑定弹窗中，抉择 数据标识 字段，绑定实现后保留即可。
   
5. 之后在 内容详情页 选中数据视图组件，并单击右侧配置区的 数据筛选，调起数据筛选弹窗。
   
6. 在弹窗中设置筛选条件为数据标识 等于 \_id 后保留。
   
7. 至此咱们便实现了内容列表跳转内容详情页面的跳转逻辑，同理咱们也同样能够依照上述形式实现动静列表页跳转内容详情页的相干逻辑。

配置利用的底部导航

为每一个页面底部增加一个 Tab 栏 组件来实现利用的底部导航，Tab 栏配置如下图所示：

为内容详情页增加顶部导航

进入内容详情页面，增加一个顶部导航组件，并将顶部导航组件挪动至纲要树的最下级。

公布利用

至此咱们便已实现了企业门户利用的搭建，单击右上角 公布，抉择对应的公布平台即可实现利用的公布。