开发者学堂课程【低代码认证-第一章:项目评选系课程:自定义页面的介绍】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/1007/detail/15053
自定义页面的介绍
内容介绍:
一、课程概述
二、课程背景
三、课程目标
四、什么是自定义页面
五、区块模板
六、实操演练
一、课程概述
本次高级课程面向 IT 和服务商,帮助企业实现更为复杂的业务逻辑。
第一章, 通过项目评选系统实践学习自定义页面开发的前端知识,
掌握数据交互功能。
第二章, 自定义连接器连接第三方资产管理系统,更新资产库存信
息,打破数据孤岛。
第三章, Serverless 与宜搭深度集成实现行程码实践,通过 FaaS
连接器和云服务平台书写后端代码判断行程码。
第四章, 宜搭应用内的企业数据集成到宜搭大屏,实现炫酷数字化
展示。
二、课程背景
通过拖拉拽和简单的业务关联规则我们可以创建一个的较为复杂的流程应用,如搭建招聘管理系统、物资管理系统、员工管理系统等。如果需要搭建一个界面丰富美观并且通过界面进行数据操作的系统,就需要用到 JS、API 等能力,实现系统的自定义扩展。
本章课程将通过一个项目评选系统的案例,学习如何在自定义页面展示项目并实现评选功能,掌握 JS 面板、远程数据源的使用,同时具备高级的低代码开发能力。
三、课程目标
了解自定义页面
掌握 JS API 基础
掌握远程数据源的使用
掌握宜搭引入外部 JS 的相关配置
独立搭建项目评选系统
四、什么是自定义页面
1、自定义页面:通过低代码搭建的能够承载文字、图片、链接、按钮等元素的页面,能够借助数据源或更丰富的组件实现应用 Portal 或复杂业务场景的页面。
可以直接使用创建好的模板,也可以自行对页面中的元素进行自定义的布局和设置。
2、自定义页面和表单页面的区别
表单页面 自定义页面
0代码、简单易上手 需要有代码基础
标准化展示数据 个性化展示
用于收集数据 用于展示数据
3、自定义页面设计器介绍
自定义页面设计器整体分为「顶部操作栏」、「左侧工具栏」、「中间画布」和「右侧属性配置面板」这四个部分。
和表单设计器相比自定义页面左侧工具栏当中多了一个区块模板
五、区块模板
1、区块模板:自定义页面中已设计好的区块,可以直接拖拽到画布中使用,实现网页页面的快速搭建,提高了设计效率。
路径:创建自定义页面>>左侧工具栏>>区块模板>>选择公共/私有模板拖动到页面中
区块模板的类型:公共模板和私有模板
2、区块模板分类
公共区块模板:宜搭中提供的公共模板。
私有模板:允许用户在编辑器中将任意一块区域保存为项目私有模板,以便随时在项目中复用。
六、实操演练
点击创建应用,起名为项目评选系统,点击确定
点击新建自定义页面,起名为自定义页面,点击确定
创建自定义页面之后,可以选择页面模板,可以启用在这里展示的模板,也可以从空白创建,因为从空白创建,所以点击跳过,这样就完成了创建自定义页面。
这是自定义页面设计器,左侧是工具栏,顶部是操作栏,右侧是属性区域,中间是画布区域
工作栏中主要讲解的是和表单页面不同的区块模板,点击区块模板,这里分为公共模板,和私有模板,可以根据需要选择对应的模板进行使用,选择内容卡片模板拖动到画布当中,可以看到卡片布局是一排三,还有鼠标划过卡片的动画效果,这里面的图片和文字都可以根据需要自定义的,在右侧的属性中进行更改
私有模板中我们可以选择图片或者是容器,选择保存为区块,给私有模板定义一个名字,例如私有,点击确定,我们就完成了创建
可以在区块模板中选择私有模板,在里面就可以拖动出来进行复用。
完成了区块模板的介绍之后,我们来看一下页面的属性,首先点击页面属性,可以看到里面有页面内容的设置,可以设置 PC 端的设置,和 Mobile 端的设置也就是移动端的设置
更改这里的设置,画布区域也会同步进行预览展示,最后点击预览来看一下更改之后的效果。
这就是自定义页面的初步使用。