本文以企业门户应用为例,我们来学习如何使用微搭进行企业门户应用的快速搭建。
步骤1:C 端企业官网
1. 进入微搭控制台。
![](https://qcloudimg.tencent-cloud.cn/image/document/d590885596d0ea55c08c2de085fb7f6c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d590885596d0ea55c08c2de085fb7f6c.png)
2. 新建应用 > 从空白创建。
![](https://qcloudimg.tencent-cloud.cn/image/document/f5d6eac482c0cc5f0c301cbfc7d0e133.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f5d6eac482c0cc5f0c301cbfc7d0e133.png)
3. 进入到应用编辑器页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/dec176cddcfcbb10509004bcd2595d1c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/dec176cddcfcbb10509004bcd2595d1c.png)
4. 首先添加一个轮播图组件。
![](https://qcloudimg.tencent-cloud.cn/image/document/3bbaccab44325366a258724dff134dcb.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/3bbaccab44325366a258724dff134dcb.png)
5. 再添加一个宫格导航组件,支持对宫格导航的标题、图标、跳转链接等内容进行配置。
![](https://qcloudimg.tencent-cloud.cn/image/document/7399e45dc802bb19f9ae068858ac3446.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7399e45dc802bb19f9ae068858ac3446.png)
6. 组件区域找到标题组件,添加到页面中,可进行标题内容和字体大小、颜色、间距,对齐方式等的配置。
![](https://qcloudimg.tencent-cloud.cn/image/document/0200873ab00bc7bc7ca8011c7ff0dd15.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0200873ab00bc7bc7ca8011c7ff0dd15.png)
7. 通过编辑器左侧导航栏的数据源按钮,我们新建一个名称为微搭的优势的数据模型。
![](https://qcloudimg.tencent-cloud.cn/image/document/0c306075ae8aedba875759e289bb438d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0c306075ae8aedba875759e289bb438d.png)
8. 通过编辑 > 添加字段分别添加图片、主标题、描述信息三个字段。
![](https://qcloudimg.tencent-cloud.cn/image/document/79d31f5cee334eacb5474c4e8ca4efda.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/79d31f5cee334eacb5474c4e8ca4efda.png)
9. 添加字段之后单击保存进行数据模型的保存。
![](https://qcloudimg.tencent-cloud.cn/image/document/99688eb8828ed91f10abad0f4d7b1b21.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/99688eb8828ed91f10abad0f4d7b1b21.png)
10. 保存后单击管理数据,进入数据管理列表。
![](https://qcloudimg.tencent-cloud.cn/image/document/c77462da824f215d067658abcb462932.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c77462da824f215d067658abcb462932.png)
11. 在数据管理列表中单击新建,进行数据的新增。
![](https://qcloudimg.tencent-cloud.cn/image/document/d3980905ba08521a2ad125b1e3598a7d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d3980905ba08521a2ad125b1e3598a7d.png)
12. 此处我们新增三条数据,新增后数据列表展示内容如下。
![](https://qcloudimg.tencent-cloud.cn/image/document/34533fc9c965aa6015d9eac7c30283da.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/34533fc9c965aa6015d9eac7c30283da.png)
13. 单击编辑器左侧导航的页面设计按钮,回到编辑器页面设计,添加一个数据列表组件,列表模板选择卡片列表,数据模型选择名称为微搭的优势的数据模型。
![](https://qcloudimg.tencent-cloud.cn/image/document/2eb9d1c0120805492d7d49b1ed831f24.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2eb9d1c0120805492d7d49b1ed831f24.png)
14. 选择完数据模型之后,数据列表组件会根据模型字段进行自动展示渲染,我们也可以按需对数据列表内的展示内容进行调整和重新绑定,单击属性区域的 fx 进行动态表达式绑定,可打开放大版本表达式,在右侧面板中选择数据模型中的需要展示的字段进行绑定即可。
说明:
文本内容绑定fx动态表达式示例1:标题后面增加序号字段展示。
![](https://qcloudimg.tencent-cloud.cn/image/document/fe8a06621385934b43943b16754cebf8.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/fe8a06621385934b43943b16754cebf8.png)
文本内容绑定fx动态表达式示例2:标题下方增加创建时间字段展示。
![](https://qcloudimg.tencent-cloud.cn/image/document/ede2886f60a0d3ddac851b3cb9a34173.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ede2886f60a0d3ddac851b3cb9a34173.png)
15. 如果对数据列表的默认展示样式风格不符合预期,可以在样式面板中做微调,选中数据列表组件(或其他需要调整样式的组件),打开样式面板,即可设置对应的内外边距,背景色以及边框等。
![](https://qcloudimg.tencent-cloud.cn/image/document/2caab62a9c8fbfdf34b3d211cb37ba9d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2caab62a9c8fbfdf34b3d211cb37ba9d.png)
16. 如果需要配置底部 Tab 导航栏,具体步骤如下:
16.1 切换到布局设计 > 添加 Tab 栏导航布局。
![](https://qcloudimg.tencent-cloud.cn/image/document/8bf82b8132bcc2073a879e9111e8efec.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/8bf82b8132bcc2073a879e9111e8efec.png)
16.2 完成 Tab 栏导航布局添加,单击 Tab 栏可配置每个标签列表的名称、图标、跳转页面,可实现通过底部标签进行页面跳转。
![](https://qcloudimg.tencent-cloud.cn/image/document/0e08371697174c445fd74a2b8463d165.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0e08371697174c445fd74a2b8463d165.png)
16.3 切换到页面设计 > 右侧配置栏页面布局选择 Tab 栏导航布局。
![](https://qcloudimg.tencent-cloud.cn/image/document/129c9118080c429d28c17b86f26fff59.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/129c9118080c429d28c17b86f26fff59.png)
16.4 Tab 栏导航布局添加完成 > 配置 Tab 栏信息(Tab 栏信息也可以在添加 Tab 栏导航布局的时候进行设置)。
![](https://qcloudimg.tencent-cloud.cn/image/document/d1d32634db69fd2ffe7ffc239286a321.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d1d32634db69fd2ffe7ffc239286a321.png)
17. 完成 Tab 栏导航添加后,我们可以单击右上角发布对应用进行发布,发布前您可以确认下方的检查面板是否有警告提示(如果提示数据模型未发布单击发布即可),如检查项都正常则单击确认发布即可。
![](https://qcloudimg.tencent-cloud.cn/image/document/8d11c627cd24368758d3f956ef4bc1e9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/8d11c627cd24368758d3f956ef4bc1e9.png)
说明:
步骤2:B 端数据管理
1. 完成了 C 端门户的搭建之后,我们可以从空白创建应用,利用新建页面模板(表格与表单页)中的数据模型和页面布局配置,再建立一个 B 端数据模型应用,通过 B 端数据模型应用管理 C 端官网的展示数据,这样我们就可以灵活修改 C 端门户对客户展示的内容了。
2. 进入微搭控制台 > 选择新建应用 > 从空白新建 。
![](https://qcloudimg.tencent-cloud.cn/image/document/a09314bd62b605ab74c74b2559ead25e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a09314bd62b605ab74c74b2559ead25e.png)
3. 单击新建后,进入编辑器界面 > 新建页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/09bc78b9fc4955f9b210a5e178ca784f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/09bc78b9fc4955f9b210a5e178ca784f.png)
4. 在新建页面中选择页面模板 (表格与表单页)> 数据模型 > 导航布局,在这里我们选择模型名称为微搭的优势的数据模型以及左侧导航布局为例,进行应用创建。
![](https://qcloudimg.tencent-cloud.cn/image/document/7dfb7c781d6612f5b18e8e9ba95d63b7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7dfb7c781d6612f5b18e8e9ba95d63b7.png)
5. 新建后可以看到页面布局分为左侧导航栏和右侧数据列表部分。
![](https://qcloudimg.tencent-cloud.cn/image/document/6cca143aa0a1c8c3a27c3a23d1db29cc.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6cca143aa0a1c8c3a27c3a23d1db29cc.png)
6. 对左侧导航栏进行内容编辑,选中当前页面 > 前往布局设计。
![](https://qcloudimg.tencent-cloud.cn/image/document/4a14969a35a8ce4fd0be2eaf900c7401.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4a14969a35a8ce4fd0be2eaf900c7401.png)
7. 进入导航布局界面,选择右侧属性导航菜单根据页面一键生成。
![](https://qcloudimg.tencent-cloud.cn/image/document/93ac113376ad5c0e3f259e810c36eb0a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/93ac113376ad5c0e3f259e810c36eb0a.png)
8. 导航栏菜单一键生成效果如下,可以根据自身需求对菜单栏内容进行编辑,例如菜单标题的更改以及层级的添加。
![](https://qcloudimg.tencent-cloud.cn/image/document/977aa0466dcbe313f2fdca0cdc3cd1ff.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/977aa0466dcbe313f2fdca0cdc3cd1ff.png)
9. 切换回页面设计 > 单击上方刷新图标 > 查看应用效果。
![](https://qcloudimg.tencent-cloud.cn/image/document/054c0123e3e391bd930bf66a2538af50.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/054c0123e3e391bd930bf66a2538af50.png)
10. 编辑菜单信息,预览应用。
查看列表(微搭的优势列表)。
![](https://qcloudimg.tencent-cloud.cn/image/document/367522ab4c4e25401cb742a51c482dbb.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/367522ab4c4e25401cb742a51c482dbb.png)
新增数据(编辑微搭的优势)。
![](https://qcloudimg.tencent-cloud.cn/image/document/ea3bb5c7a6dfb08eb87219c848373cd5.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ea3bb5c7a6dfb08eb87219c848373cd5.png)
查看详情(微搭的优势详情)。
![](https://qcloudimg.tencent-cloud.cn/image/document/66eb7e57eff38bf4058ea3125ae91a7b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/66eb7e57eff38bf4058ea3125ae91a7b.png)
11. 检查项都通过后单击应用右上角发布进行应用发布(体验版),发布成功后即可通过预览地址进行访问。
![](https://qcloudimg.tencent-cloud.cn/image/document/c98a9e0ab7fc9dd85a5a51add952d02e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c98a9e0ab7fc9dd85a5a51add952d02e.png)
12. 打开对应管理页面后我们可以看到上述相关数据源的具体数据内容,可以对数据内容进行增、删、改、查的处理。
![](https://qcloudimg.tencent-cloud.cn/image/document/96c756aa689e540c771bac2fcb18d04d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/96c756aa689e540c771bac2fcb18d04d.png)