微搭低代码官方模板解析（一）

微搭低代码目前开放了PC端功能，使用方法是需要在模板中心启用模板，模板创建成功后会自动增加PC端的组件库及创建需要的数据源。本文就结合目前官方提供的模板，按照示例程序自己搭建一遍。通过模板的搭建来熟悉官方组件库的用法。

创建页面

首先自己新建一个页面，我们需要按照官方模板的首页自己搭建一下。

图片

官方首页逻辑解析

官方的首页其实就是起到一个引导的作用，通过大的图片来引导用户点击

图片

然后我们切换到组件视图来分析一下首页都使用了哪些组件

图片

它的布局组件使用了节点组件，节点组件就相当于我们html里的div，我画个示例图来分析一下布局的结构

图片

第一层结构是这样子的，那么我们按照分析的第一层结构先添加一下自己的布局

实现布局

节点组件是在通用分类里，增加的方式是点击一下组件的名称

图片

但是添加进去发现页面没有变化，需要把预览的效果关闭了

图片

这样就可以看到效果了

图片

然后切换到组件视图，我们选择节点组件的插槽

图片

在插槽里再次添加两个节点组件

图片

这样外层的布局就制作好了。

官方模板内容区域布局解析

我们可以看到内容区域分为上下两部分，上边是标题，下边是快捷功能引导区域

图片

官方模板是使用了节点组件和栅格组件

图片

内容区域布局实现

我们先选中内容区域节点组件的插槽

图片

在通用分类里添加节点组件

图片

然后在布局分类里添加删格组件

图片

组件搭建好后的效果

图片

官方模板标题区域解析

标题区域比较简单，其实就是实现标题的两行的效果

组件树里是通过文本组件来实现的

图片

标题区域功能实现

我们也按照官方的思路，在标题的节点组件里增加两个文本组件

图片

但是两个文本组件是横向排列的，和官方模板的效果不符，这个时候就需要设置一下组件的样式。一般是设置父容器的布局

首先是设置父容器的宽度，我们设置成1040PX

图片

内边距的上边距设置38PX，只能输入数字，所以需要使用样式的编辑器手动改一下字

图片

图片

外边距的话左边和右边都是auto

图片

然后就是设置文本组件的样式，布局的话改成块布局

图片

内边距给一个32PX的大小

图片

字体的话设置成12PX，颜色设置成蓝色

图片

把文本的内容改成首页

图片

接着我们设置第二个文本组件的样式，给它一个外边距，各为20，布局的话设置成块布局

图片

字体的话说设置成20PX 加粗

图片

修改文本的内容为个人工作台

图片

这样标题区域就设置好了

快捷功能引导区官方模板分析

从功能上讲是放置了三个模块的快捷操作，布局上是一行四列，所以模板里放置了四个组件

图片

快捷功能引导区功能实现

我们也按照官方的思路，在节点组件里添加四个组件

图片

我们需要在栅格组件上设置样式，布局设置成flex，主轴对齐是两端对齐

图片

外边距的话，上下是86PX，左右是auto

图片

图片

宽度设置成1040PX

图片

里边的节点组件的样式，布局设置成内联块，宽度320PX

图片

边框设置为实线，颜色rgb(220, 227, 243)，宽度1PX，圆角20PX

图片

外层容器样式设置好后，就需要设置里边的内容，里边的内容还是添加一个节点组件

图片

但是节点的类型要修改成图片，图片的地址官方已经提供了

https://main.qcloudimg.com/raw/f28e2d68d4718c2978ae8036c8dc9990.png

图片

样式的话布局设置成内联块布局，宽度100%，高度360PX

图片

背景的话使用颜色填充，填充色为rgb(0, 50, 149)

图片

边框设置为20PX

图片

在当前节点再增加两个文本组件，用来显示模块的名称

图片

定位的话设置成绝对定位，并设置距上边36PX，距左边36PX

图片

设置字号为20PX，加粗，颜色设置成白色

图片

修改文本的内容为人选信息列表

图片

我们按照同样的方式设置一下第二个文本组件的样式

图片

样式设置好后我们就需要给图片增加一个点击事件，选择平台方法里的导航即可

图片

这样设置就都完成了

总结

总体上PC端设置要比移动端复杂不少，尤其对组件概念的理解上，好些属性都需要手输入代码，不能完全在视图上设置，还是有待优化的空间的。后续我们继续分析官方模板，带着大家一点点熟悉这个新出来的功能。

作者：微搭低代码布道师韩锴