零起点入门教程：用宜搭简单布局一个首页

简介：【零起点入门系列教程】将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建。即便是没有任何代码基础的新手只要跟着系列课程，从0开始慢慢修炼，也能找到成功搭建应用的乐趣。今天第五讲，如何用宜搭简单布局一个首页。

【零起点入门系列教程】将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建。即便是没有任何代码基础的新手只要跟着系列课程，从0开始慢慢修炼，也能找到成功搭建应用的乐趣。今天第五讲，如何用宜搭简单布局一个首页。

如何布局首页？

我们以“企业综合防疫”为例，给大家分步教学，如何用宜搭进行首页布局。

首先，访问宜搭首页，在模板中心找到 “企业综合防疫方案”应用，点击并启用此应用，给应用命名并且选择“保留示例数据”。创建完毕之后会自动跳转到该应用的后台管理。

从后台管理页面可以看到很多类型的页面，其中包含了我们之前没有见过的页面类型，它前面的图标是一个黄色的窗口，代表的是一个自定义页面，在“新建页面”看到有“新建自定义页面”这个选项。

自定义页面主要是给应用提供一些门户或者作为当前应用的首页。我们可以在上面放置一些业务访问入口，或者在这个页面里提供一些资讯信息提供用户去查阅。

可以看到当前这些页面没有提交按钮，同时也没有数据管理，也就是意味着它只是作为一个展示类的作用，并不是用于提交数据或发起流程。我们可以利用它来做一些首页，并且这些页面内部也提供了很多丰富的前端组件。

通过首页进入到表单设计器内，从“大纲树”可以看到整个页面的布局。从“页面内容”里面可以看到当前页面放了两个轮播图组件。

下方会有一个“容器”，它的主要功能是提供了一个区域，在这个区域里面会包含各种业务页面的访问入口。在“容器”下面还有 “布局容器”，“布局容器”主要的作用是把当前容器内的一些内容分成了等比例的结构。点击“布局容器”，在“布局容器”的右侧可以看到个“列比例”，它将整个容器分成了6:6:6:6:6:6的结构。

实际上我们在前端设计的时候，把我们这一个页面的一行实际上是把它定义成了12个价格，就12格12个格子，然后我们将我们当前这一行如果设置为6:6的时候，它就会呈现一个左右等比的这样一个状态。

同样的布局容器下面会包含小的布局，里面会有一个“分组”，“分组”里面有“链接块”，它的作用是用于链接跳转，相当于限定的区域，当用户点击这个区域会跳转到链接块。“链接块”组建里面提供了一些图片和文本。图片对应的是图标，文本对应的是标题。

在今天的教程中，我们其实用到了多个报表组件。报表组件包括基础、布局、筛选和图表四类组件，其中：“基础”和“布局”类组件可以在画布的数据筛选与呈现区域均可使用；“筛选”类组件只能在画布数据筛选区域使用；“图表”和“其他”类组件只能在画布数据呈现组件区域使用。

布局容器：是一种有「布局」能力的容器，我们最常见的是线性顺序布局，即页面自上而下，依次排列。但实际页面设计与实现时，出了线性布局，常常还会遇到相对布局、绝对布局、弹性布局等诉求。
链接块：是一个容器类型组件，点击该容器内任意元素，都会触发跳转链接
分组：一个官方推荐的区块管理器，用于将功能能力相似的模块，内聚在一个分组中。
布局：是对已有的可视化组件的位置摆放控制，对应英语动词layout，表示了一种动作。
… …

在下一讲中，我们将针对企业疫情防控场景，教会大家从表单设计——首页布局——数据查看的全链路应用设计

>>>>第五讲详细步骤，点击收看视频版课程

原文链接：https://developer.aliyun.com/article/784321?

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

零起点入门教程：用宜搭简单布局一个首页相关推荐

零起点入门教程：1分钟极简操作，新手也能搭应用
简介:[零起点入门系列教程]将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建.即便是没有任何代码基础的新手只要跟着系列课程,从0开始慢慢修炼,也能找到成功搭建应用的乐趣.今天第一讲,1分钟开 ...
python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
视频教程-Python零基础入门教程-Python
Python零基础入门教程从2012年从事互联网至今有7年软件编程经验,曾任职国内北京互联网公司,中南林业大学授课Python 现任逻辑教育Python课程负责人,精通Python语言,精通人工智能 ...
九宫怎么排列和使用_剪映零基础入门教程第三十七篇：一学就会系列之九宫格小程序配音...
很多玩儿抖音的朋友都看过九宫格视频,但是并不是每个玩抖音的人都会制作这个九宫格视频,实际这个需要借助小工具来帮忙,而常用抖音的朋友们会对剪映更加熟悉一些,且九宫格视频在剪映内的制作方式则比较简单.那么 ...
ue4怎么用虚幻商城场景_【更新】UE4虚幻引擎野外场景制作零基础入门教程
原标题:[更新]UE4虚幻引擎野外场景制作零基础入门教程作为一套零基础入门教程,可以帮助虚幻4引擎的新手了解到环境制作流程和相关软件的配合.本教学适合零基础入门用户,不适合有一定经验的UE使用者. ...
零代码基础的我，用钉钉宜搭“开发”了一个“记者报选题”应用……｜低代码系列（三）...
关注ITValue,看企业级最新鲜.最价值报道! 最近低代码概念很火,作为一名毫无代码基础的小白,看到铺天盖地的"低代码/无代码基础创建应用"的言论,总是会心声疑惑:代码零基础真 ...
0基础能学漫画么？漫画零基础入门教程！
漫画零基础入门教程!很多人都喜欢看动漫,同时也会幻想成为动漫里的主角,与此同时也会诞生学漫画的想法.不论是你真的想学习漫画,又或出于个人爱好,或职业需要,或为了具备一项自己喜欢的看家本领.我们都要先清 ...
Python零基础入门教程（快速入门）
前言学无止境,无止境学. 今天要给大家分享的是<Python零基础入门教程01 快速入门>,这是一个系列的教程,从零基础到项目实战.在本教程中,我会给大家介绍Python入门的一些基础知 ...
C++零基础入门教程：基础篇（一）
前言嘿嘿,我叕来啦─=≡Σ(((つ•̀ω•́)つ!别问我为什么突然变成了零基础入门教程(一),因为前面那三篇都是基础的不能在基础的教程了.(其实是因为顺序乱了,而且那时候没有单独弄一个专栏,后面我会 ...

零起点入门教程：用宜搭简单布局一个首页

如何布局首页？

零起点入门教程：用宜搭简单布局一个首页相关推荐

最新文章

热门文章