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

本文详细解析了微搭低代码平台的官方模板,包括创建页面、首页逻辑、布局实现、内容区域布局和标题区域功能。通过实际操作,介绍了如何按照官方模板搭建页面,重点讲解了节点组件、栅格组件的使用以及样式设置,帮助读者理解低代码组件概念。
摘要由CSDN通过智能技术生成

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

创建页面

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

官方首页逻辑解析

官方的首页其实就是起到一个引导的作用,通过大的图片来引导用户点击
图片
然后我们切换到组件视图来分析一下首页都使用了哪些组件
图片
它的布局组件使用了节点组件,节点组件就相当于我们html里的div,我画个示例图来分析一下布局的结构
图片
第一层结构是这样子的,那么我们按照分析的第一层结构先添加一下自己的布局

实现布局

节点组件是在通用分类里,增加的方式是点击一下组件的名称
图片
但是添加进去发现页面没有变化,需要把预览的效果关闭了
图片
这样就可以看到效果了
图片
然后切换到组件视图,我们选择节点组件的插槽
图片
在插槽里再次添加两个节点组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值