自定义页面的介绍|学习笔记

简介: 快速学习自定义页面的介绍

开发者学堂课程【低代码认证-第一章:项目评选系课程自定义页面的介绍】学习笔记,与课程紧密联系,让用户快速学习知识。  

课程地址:https://developer.aliyun.com/learning/course/1007/detail/15053


自定义页面的介绍

内容介绍:

一、课程概述

二、课程背景

三、课程目标

四、什么是自定义页面

五、区块模板

六、实操演练

 

一、课程概述

本次高级课程面向 IT 和服务商,帮助企业实现更为复杂的业务逻辑。

第一章, 通过项目评选系统实践学习自定义页面开发的前端知识,

掌握数据交互功能。

第二章, 自定义连接器连接第三方资产管理系统,更新资产库存信

息,打破数据孤岛。

第三章, Serverless 与宜搭深度集成实现行程码实践,通过 FaaS

连接器和云服务平台书写后端代码判断行程码。

第四章, 宜搭应用内的企业数据集成到宜搭大屏,实现炫酷数字化

展示。

二、课程背景

通过拖拉拽和简单的业务关联规则我们可以创建一个的较为复杂的流程应用,如搭建招聘管理系统、物资管理系统、员工管理系统等。如果需要搭建一个界面丰富美观并且通过界面进行数据操作的系统,就需要用到 JS、API 等能力,实现系统的自定义扩展。

本章课程将通过一个项目评选系统的案例,学习如何在自定义页面展示项目并实现评选功能,掌握 JS 面板、远程数据源的使用,同时具备高级的低代码开发能力。

三、课程目标

了解自定义页面

掌握 JS API 基础

掌握远程数据源的使用

掌握宜搭引入外部 JS 的相关配置

独立搭建项目评选系统

四、什么是自定义页面

1、自定义页面:通过低代码搭建的能够承载文字、图片、链接、按钮等元素的页面,能够借助数据源或更丰富的组件实现应用 Portal 或复杂业务场景的页面。

可以直接使用创建好的模板,也可以自行对页面中的元素进行自定义的布局和设置。

图片1.png

2、自定义页面和表单页面的区别

表单页面                                     自定义页面

0代码、简单易上手                           需要有代码基础

标准化展示数据                               个性化展示

用于收集数据                                 用于展示数据

3、自定义页面设计器介绍

自定义页面设计器整体分为「顶部操作栏」、「左侧工具栏」、「中间画布」和「右侧属性配置面板」这四个部分。

图片2.png

和表单设计器相比自定义页面左侧工具栏当中多了一个区块模板

五、区块模板

1、区块模板:自定义页面中已设计好的区块,可以直接拖拽到画布中使用,实现网页页面的快速搭建,提高了设计效率。

路径:创建自定义页面>>左侧工具栏>>区块模板>>选择公共/私有模板拖动到页面中

区块模板的类型:公共模板和私有模板

图片3.png

2、区块模板分类

公共区块模板:宜搭中提供的公共模板

私有模板:允许用户在编辑器中将任意一块区域保存为项目私有模板,以便随时在项目中复用。

图片4.png

 

六、实操演练

点击创建应用,起名为项目评选系统,点击确定

图片5.png

点击新建自定义页面,起名为自定义页面,点击确定

图片6.png

创建自定义页面之后,可以选择页面模板,可以启用在这里展示的模板,也可以从空白创建,因为从空白创建,所以点击跳过,这样就完成了创建自定义页面

这是自定义页面设计器,左侧是工具栏,顶部是操作栏,右侧是属性区域,中间是画布区域

图片7.png

工作栏中主要讲解的是和表单页面不同的区块模板,点击区块模板,这里分为公共模板,和私有模板,可以根据需要选择对应的模板进行使用,选择内容卡片模板拖动到画布当中,可以看到卡片布局是一排三,还有鼠标划过卡片的动画效果,这里面的图片和文字都可以根据需要自定义的,在右侧的属性中进行更改

图片8.png

私有模板中我们可以选择图片或者是容器,选择保存为区块,给私有模板定义一个名字,例如私有,点击确定,我们就完成了创建

图片9.png

可以在区块模板中选择私有模板,在里面就可以拖动出来进行复用

完成了区块模板的介绍之后,我们来看一下页面的属性,首先点击页面属性,可以看到里面有页面内容的设置,可以设置 PC 端的设置,和 Mobile 端的设置也就是移动端的设置

图片10.png

更改这里的设置,画布区域也会同步进行预览展示,最后点击预览来看一下更改之后的效果。

图片11.png

这就是自定义页面的初步使用。

相关文章
|
5月前
唯美动态个人404页面源码
手机端先加载静态图再缓慢加载gif动图,电脑端先加载静态图在加载mp4。提升打开速度!
28 0
唯美动态个人404页面源码
|
5月前
|
小程序
【每周一个小技巧】小程序如何获取页面栈内某个页面的实例
【每周一个小技巧】小程序如何获取页面栈内某个页面的实例
48 9
|
12月前
|
缓存 Java Maven
为网站设置欢迎页面和自定义网站的图标教程~
为网站设置欢迎页面和自定义网站的图标教程~
|
JavaScript
fastadmin如何自定义一个列表上的按钮。
fastadmin如何自定义一个列表上的按钮。
303 0
Web|如何实现导航栏的默认,预览以及选中时的样式
Web|如何实现导航栏的默认,预览以及选中时的样式
71 0
|
前端开发
前端学习案例-自定义navLink&自定义导航1
前端学习案例-自定义navLink&自定义导航1
73 0
前端学习案例-自定义navLink&自定义导航1
|
JSON 小程序 数据格式
【微信小程序】动态设置导航栏标题
这种方法是使用app.json或者页面的json文件配置导航栏标题。如果是在app.json中进行配置,则它是全局行为,项目所有的页面将显示同一个标题;如果是在页面的json中进行配置,则只会影响当前页面。
|
缓存 小程序 JavaScript
【微信小程序】页面跳转、组件自定义、获取页面参数值
单词中最好不要有大写字母,如果有大写字母,除单词第一个字母外,其余大写字母将被转换为小写。
|
开发者
自定义列表|学习笔记
快速学习自定义列表
自定义列表|学习笔记