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

利用功能模块概述

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

利用展现

企业门户利用次要性能为企业动态、企业信息的展现，利用详情图如下：

利用数据源设计

数据模型创立

在创立利用之前，咱们须要晓得，当利用中存在应用动态数据功能模块时，便须要创立对应的数据模型进行治理。以企业门户利用为例，咱们须要创立的数据模型以及字段如下：

​

数据录入

数据模型创立实现后，需返回数据管理后盾进行体验数据的录入，步骤如下：

1. 在 数据模型 页面中单击数据管理后盾进入。
   
2. 进入数据管理后盾 > 我的数据源页面，更换数据为体验数据。
   
3. 以企业动态表为例，单击治理数据进入到对应的治理后盾。
   
4. 单击新建，进入数据创立页面。
   
5. 在数据创立页进行体验数据录入后单击提交即可。
   

? 理论搭建利用的过程中会须要通过实时预览来查看页面的实在状态，并且因为实时预览调用的数据为体验数据，因而倡议在开发利用前对体验数据进行录入，便于进行利用的开发调试。

前提条件

• 实现企业门户利用的 数据模型设计。
• 实现 自定义利用的创立。

步骤1：新建页面

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

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

在页面右侧的编辑区中抉择一般容器组件，之后在一般容器组件中搁置轮播组件，随后可通过在轮播组件中退出图片组件来实现图片的轮播，若存在图片配置需要，可选中图片组件后在右侧的配置区进行图片的替换。

? 应用一般容器能够进行组件的对立治理与款式调整，因而在理论开发利用的过程中倡议将组件按模块搁置到一般容器中，便于管理的同时也会晋升开发效率。

[](id:step3)

步骤3：创立利用场景导航

通过观察页面设计能够发现，利用场景导航由四个导航 Tab 形成，并且排列形式为横向排布，因而为了实现该性能，咱们须要应用模型变量、网格布局组件以及组件循环性能。

创立单个导航 Tab

1. 创立一个一般容器，并在容器中退出网格布局组件，将网格组件的列比例属性配置为”12″。
   
2. 在网格容器的分栏插槽中拖入一般容器，并在一般容器中搁置图片与文本组件。
   

? 此处须要留神，在搁置图片与文本组件时，纲要树中图片组件须要在文本组件的上方，否则地位会颠倒。

创立模型变量

1. 单击右上角的变量，进入变量编辑页面。
   
2. 在以后页面，单击创立按钮进行模型变量的创立。
   
3. 输出变量标识，并抉择变量类型为模型变量，数据源抉择利用场景表，变量初始化办法抉择查问列表-内置(WedaGetRecords)。依据设计图设计，此处只展现四个导航 Tab，因而依照条件对办法参数进行调整。
   

组件绑定循环

1. 选中一般容器组件，并在右侧的属性 > 通用配置 > 循环展现中单击绑定循环按钮。
   
2. 在弹出的弹窗中抉择刚刚创立的模型变量，单击确定。
   
3. 返回编辑器页面后，选中容器下的图片组件，单击右侧的数据绑定按钮。
   
4. 在弹窗中抉择循环变量 Tab，并抉择对应的数据模型字段实现数据绑定。
   
5. 按上述形式对文本组件的数据进行绑定，实现后页面款式如下：
   

款式调整

循环与数据配置实现后，该模块的款式并没有依照利用设计图中那样进行展现，因而咱们须要对组件进行款式的调整来使其达到预期，首先对图片组件的宽高进行调整。

1. 单击右侧编辑区的款式 Tab，将图片组件的宽高调整为100。
   

2. 能够看到图片的大小变为失常状态，之后咱们调整图片、文本组件的居中状态，单击一般容器组件，在配置区的款式 Tab 中，抉择布局模式为弹性布局，主轴方向设为垂直，主轴对齐设为程度居中，副轴对齐设为中点对齐。
   

   对于弹性布局：
   设置了弹性布局容器内的组件会依据以后设置的主轴方向、主轴对齐、副轴对齐进行布局的调整。

3. 随后对一般容器组件的宽度进行调整，宽度设置为200，能够看到组件已依照设计图中款式进行排布。
   

步骤4：企业动态导航

创立模块题目

创立一个一般容器，在一般容器中增加文本组件，在右侧的配置区中将文本组件的内容批改为”最新动静”，对齐形式批改为”向左对齐”，之后单击款式 Tab，将文本的属性设置为”粗”。

创立图文列表

增加一个一般容器，随后在该容器下增加图文展现项组件，随后在右侧配置区开启该组件的自定义内容选项。

? 开启自定义内容选项后，图文展现项组件便能够以插槽的模式来展现内容，只须要将组件搁置在主内容插槽即可。

调整图文列表组件内容

在右侧配置区删除”内容”配置项中的文本，随后在主内容插槽中插入两个文本组件，批改实现后组件款式如下图所示：

创立模型变量

与 步骤3 的创立形式雷同，创立模型变量，变量绑定企业动态表，变量初始化办法抉择查问列表-内置(WedaGetRecords)。依据设计图设计，此处只展现工夫最新的四个动静，因而依照条件对办法参数进行调整。

组件绑定循环

1. 为图文展现项的父容器绑定循环，绑定形式可参见上文的 循环绑定。
   
2. 选中图文展现项组件，为图文展现项组件的图片属性绑定数据。
   
3. 依照同样形式为文本组件进行数据绑定。
   

模块款式调整

1. 选中图文展现项的父容器，点击右侧配置区的款式 Tab，抉择边框类型为虚线，边框宽度为1，色彩抉择为灰色。
   
2. 在父容器的款式 Tab 中对图文展现项的间距进行调整，如下图所示：
   
3. 选中最外层容器，调整该模块与利用场景模块之间的间距。至此，企业动态模块构建实现。
   

步骤5：企业合作伙伴模块

与利用场景模块创立形式雷同，应用网格布局、文本、图片组件来实现。具体实现步骤可参见 步骤3。

利用场景详情页搭建

步骤1：新建页面

新建利用场景详情页面，页面创立流程可参见 上文。

步骤2：场景详情模块创立

1. 场景详情模块由题目与详情内容形成，创立一个父级容器，随后别离在父级容器中增加文本组件与富文本展现组件即可实现该模块创立。
   
2. 批改文本字体大小，并在款式 Tab 中进行加粗。
   

步骤3：签约客户模块创立

可参见 利用场景 创立，创立形式雷同。

! 详情页的展现内容依据跳转传参来进行获取，此处模块的变量绑定请参见 利用场景页面逻辑设计。

企业动态详情页搭建

步骤1：新建页面

新建利用场景详情页面，页面创立流程可参见 上文。

步骤2：场景详情模块创立

1. 场景详情模块由题目与详情内容形成，创立一个父级容器，随后别离在父级容器中增加两个文本组件（别离对应题目与日期）与富文本展现组件即可实现该模块创立。
   
2. 批改文本字体大小，并在款式 Tab 中进行加粗。
   

! 详情页的展现内容依据跳转传参来进行获取，此处模块的变量绑定请参见 首页动静页面逻辑设计。

动静列表页搭建

动静列表页搭建形式与主页动静列表模块搭建形式大致相同，值得注意的是，此处的动静列表页为展现全副动静，因而绑定的模型变量存在差别，此处模型变量应调用查看列表-内置(WedaGetList)办法。

企业分割页搭建

步骤1：首页 banner 图模块

搭建形式与主页 banner 模块雷同，参见 上文。

步骤2：品牌简介模块

1. 创立一个一般容器，并且在容器中再增加一个宽度为80%的容器作为模块背景，将该容器背景色彩设置为灰色。
   
2. 选中父容器，在右侧编辑区的款式 Tab 中抉择弹性布局，将刚刚用来作为背景的容器进行居中。
   
3. 在背景容器中退出两个文本组件，别离作为题目与简介内容的载体。
   
4. 选中第一个文本组件，在该组件的款式 Tab 中将字体设置为加粗，并将文本内容批改为企业简介。
   
5. 选中第二个文本组件，将该组件的对齐形式设置为两端对齐，并将文本内容批改为对应的简介内容，并依据简介内容调整文本组件的最大行数。
   

步骤3：分割咱们模块

1. 与品牌简介模块雷同，创立一个背景容器并居中，并在背景容器中增加一个文本组件作为模块题目，将文本组件的内容批改为“分割咱们”并进行加粗。
   
2. 之后在该容器中增加两个网格布局组件，在配置区中对立将列比例调整为12。
   
3. 在第一个网格布局组件的插槽中插入图片组件与文本组件，别离将组件内容替换为 icon 与对应文案，并依据理论需要调整组件的大小与组件地位。
   
4. 反复上述步骤，增加企业邮箱内容即可实现创立。
   

实现首页利用场景导航跳转到利用场景详情页

设计思路：通过低代码办法获取到以后单击 Tab 元素对应的数据模型 ID，随后为 Tab 元素设置跳转工夫，并将该数据模型 ID 作为参数传递到利用场景详情页，利用场景详情页依据数据模型 ID 调用 WedaGetRecords 办法获取到对应的数据并实现在前端页面展现。

步骤1：创立一般变量

为企业门户主页页面创立一般变量，用于接管点击导航Tab时返回的数据模型 ID。单击上方变量，在以后页面创立一个一般变量命名为 getId，数据类型抉择字符串。

步骤2：为导航 Tab 配置事件

绑定变量赋值办法

1. 在纲要树中选中导航 Tab 对应的一般容器，抉择右侧配置区的点击时触发条件，调起事件配置弹窗。
   
2. 抉择执行动作为 变量赋值 变量名抉择刚刚创立的一般变量 getId。
   
3. 单击上图变量值右侧的数据绑定按钮调起数据绑定弹窗，并在循环对象 Tab 中抉择 _id。
   
4. 实现变量绑定后单击保留即可。
   

绑定页面跳转办法

1. 再次选中导航 Tab 对应的一般容器并抉择右侧配置区的点击时触发条件，调起事件配置弹窗。
2. 在事件弹窗中进行页面跳转配置并单击新建参数变量。
   
3. 参数变量创立实现后，单击变量绑定按钮。
   
4. 绑定第一步用于接收数据模型 ID 的一般变量后单击保留即可。
   

!此处须要留神办法创立的先后顺序，须要先进行变量赋值后再绑定页面跳转办法，否则会导致页面跳转时的传参为空值。

创立模型变量

为利用场景详情页创立模型变量，应用主页导航 Tab 传递的参数进行数据查问与渲染。

1. 单击右上角切换到利用场景详情页，单击上方变量，为该页面创立模型变量，绑定利用场景表后抉择变量初始化办法为查问单条-内置(wedaGetItem)， 之后再变量初始化入参处为数据标识进行变量绑定。
   
2. 在变量绑定弹窗中抉择刚刚通过页面跳转生成的参数变量后单击保留。
   
3. 顺次选中利用场景详情页中的组件，并在右侧配置区单击变量绑定按钮。
   
4. 抉择刚刚创立的模型变量即可实现绑定。
   

办法测试

进入利用主页，开启实时预览后单击利用场景 Tab 按钮，查看是否可能失常跳转并且详情页内容是否按预期展现。

实现首页动静列表导航跳转到动静详情页

设计思路：与利用场景 Tab 导航实现形式雷同，通过在跳转详情页时传入数据源 ID 实现该性能。

步骤1：创立一般变量

为以后页面创立一般变量，用于接管点击列表时返回的数据模型ID。单击上方变量，在以后页面创立一个一般变量命名为getListID，数据类型抉择字符串。

步骤2：为列表配置事件

绑定自定义办法

1. 在纲要树中选中列表对应的一般容器，抉择右侧配置区的点击时触发条件，调起事件配置弹窗。
   
2. 抉择执行动作为 变量赋值 变量名抉择刚刚创立的一般变量 getListID。
   
3. 单击上图变量值右侧的数据绑定按钮调起数据绑定弹窗，并在循环对象 Tab 中抉择 _id。
   
4. 实现变量绑定后单击保留即可。
   

绑定页面跳转办法

1. 再次选中列表对应的一般容器并抉择右侧配置区的点击时触发条件，调起事件配置弹窗。
2. 在事件弹窗中进行页面跳转与传参的配置后单击保留。
   

!此处须要留神办法创立的先后顺序，须要先进行变量赋值后再绑定页面跳转办法，否则会导致页面跳转时的传参为空值。

创立模型变量

为企业动态详情页创立模型变量，应用主页导航 Tab 传递的参数进行数据查问与渲染。

1. 单击右上角切换到企业动态详情页，单击上方变量为该页面创立模型变量，绑定企业动态表后抉择变量初始化办法为查问单条-内置(wedaGetItem)， 之后在变量初始化入参处为数据标识进行变量绑定。
   
2. 顺次选中动静详情页中的组件，并在右侧配置区单击变量绑定按钮。
   
3. 抉择刚刚创立的模型变量即可实现绑定。
   

办法测试

进入利用主页，开启实时预览后点击列表，查看是否可能失常跳转并且详情页内容是否按预期展现。

?动静列表页跳转详情页的操作可复用该模块办法。

实现底部 Tab 栏跳转

1. 由利用设计图可见，该利用存在三个页面须要在底部创立 Tab 栏组件，别离为利用主页、动静列表页以及企业分割页。
2. 以主页为例，进入主页后，在左侧组件区抉择 Tab 栏组件，该组件会主动固定到页面下方。
   
3. 在右侧配置区对 Tab 栏组件进行配置，参数阐明如下：
   
4. 配置实现后，单击下方的启用路由按钮，路由形式抉择为跳转，配置实现后单击对应 Tab 即可进行页面的跳转。
   
5. 依照同样的形式对动静列表页以及企业分割页进行 Tab 栏的配置即可，至此咱们便实现了企业门户利用的搭建。

云开发平台是帮忙企业在云端开发、部署和运行利用的一站式云原生平台。其平安接入、牢靠运行的个性已失去220万开发者的信赖，目前已领有云开发、云托管、微搭低代码、云开发原生网关等面向不同开发场景的产品。
云开发平台具备弹性伸缩免运维等 Serverless 能力，同时作为腾讯生态连接器，连贯了腾讯文档、腾讯会议、企业微信等生态产品，帮忙企业定制开发更轻松，助力业绩增长。

喜欢 (0)赏

[搞代码]

分享 (0)