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

微搭低代码目前凋谢了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端设置要比挪动端简单不少，尤其对组件概念的了解上，好些属性都须要手输出代码，不能齐全在视图上设置，还是有待优化的空间的。后续咱们持续剖析官网模板，带着大家一点点相熟这个新进去的性能。

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

喜欢 (0)赏

[搞代码]

分享 (0)