开发者学堂课程【低代码开发师认证课程：项目评选系统需求分析及布局设计】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1046/detail/15212
项目评选系统需求分析及布局设计
内容介绍
一、课程概述
二、第一节——项目评选系统实践
三、第二节——项目评选实践的低代码基础
一．课程概述
本次高级课程面向 IT 和服务商，帮助企业实现更为复杂的业务逻辑。本次高级课程总共分为四章。
第一章，通过项目评选系统实践学习自定义页面开发的前端知识，掌握数据交互功能。
第二章，自定义连接器连接第三方资产管理系统，实现更新资产库存信息，打破数据孤岛。
第三章，Serverless 与宜搭深度集成实现行程码实践，通过 FaaS 连接器和云服务平台书写后端代码判断行程码。
第四章，宜搭应用内的企业数据集成到宜搭大屏，实现炫酷的数字化展示。
二．第一章——项目评选系统实践
现在我们就开始第一章项目评选系统实践的学习。首先来看一下本章的课程背景。
1.课程背景
通过拖拉拽和简单的业务关联规则，我们可以创建一个较为复杂的流程应用，如搭建招聘管理系统、物资管理系统、员工管理系统等。如果需要搭建一个界面非常丰富美观并且通过界面进行数据操作的系统，这就需要用到 JS、API 等能力，实现系统的自定义扩展。本章课程将通过一个项目评选系统的案例，学习如何在自定义页面展示项目并实现评选的功能，掌握 JS 面板、远程数据源的使用，同时具备高级的低代码开发能力。了解了课程背景后，一起来看一下本章的学习目标。
2.课程目标
了解自定义页面
掌握 JS、API 基础
掌握远程数据源的使用
掌握宜搭引入外部 JS 的相关配置
可以独立搭建项目评选系统
3.自定义页面介绍
接下来我们来学习第一章的第一小节，自定义页面介绍。本小节讲什么是自定义页面，它和表单页面有哪些区别？还有自定义面设计器介绍等。首先来看一下什么是自定义页面，它可以实现哪些？
自定义页面是通过低代码搭建的，能够承载文字、图片、链接、按钮等元素的页面，能够借助数据源或更丰富的组件实现应用的 Portal ，也就是门户展示，或复杂的业务场景的页面。创建自定义页面时，可以直接使用创建好的模板，也可以自行对页面中的元素进行自定义的布局和设计。了解完自定义页面后，来看一下它和表单页面的区别。
4.表单页面和自定义页面的区别
表单页面
零代码、简单易上手
标准化的展示数据
用于收集数据
自定义页面
需要有代码基础
可以个性化的展示数据
用于展示数据
接下来了解一下自定义页面设计器的介绍。
5.自定义页面设计器介绍
自定页面设计器整体分为【顶部操作栏】，【左侧工具栏】，【中间画布】和【右侧属性配置面板】这四个部分（如下图所示）。
和表单设计器相比，自定义页面左侧的工具栏当中多了一个区块模板，那么区块模板又有哪些功能呢？
如上图所示，这就是区块模板。区块模板是自定义页面中已经设计好的区块，可以直接拖拽到画布中去进行使用，实现网页页面的快速搭建，提高了设计效率。实现路径是，创建自定义页面 >> 点击左侧的工具栏 >> 找到区块模板 >> 选择公共或私有的模板拖动到页面当中。区块模板总共分为公共模板和私有模板这两种类型。我们来看一下公共模板和私有模板都有哪些区别。
6.公共模板和私有模板的区别
如图所示，这使用的是公共模板当中内容卡片之零一，将它通用的画布的区域就可以使用该模板了。而且宜搭中提供公共模板。
私有模板如图所示，允许用户在编辑器中将任意一块区域保存为项目私有模板，以便随时在项目中进行复用。下面我们进行实操演练。
7.实操演练
我们先创建一个新的应用，起名为项目评选系统，点击确定。接下来，我们需要创建一个自定义页面，起名为自定义页面，点击确定。创建自定页面之后，我们可以选择页面模板。我们可以启用在宜搭平台展示的模板，也可以从空白创建，现在我们选择从空白创建，所以点击跳过，这样我们就完成了创建自定页面。
如图，这是自定页面设计器，左侧是工具栏，顶部是操作栏，右侧是属性区域，中间是画布区域。工作栏中主要讲解的是和表单页面不同的区块模板。我们点击区块模板，这里分为公共模板和私有模板，可以根据需要选择对应的模板进行使用，我们在这里选择一个内容卡片的模板，拖动到画布当中。
如图，这里的卡片的排列布局是一排三，还有鼠标划过卡片的动画效果，当然这里面的图片还有文字都是可以根据需要自定义的，可以在右侧的属性中进行更改。然后我们来看一下私有模板，我们可以选择图片或者是容器，然后选择保存为区块，给私有模板定义一个名字，比如私有，然后点击确定，这样我们就完成了它的创建。然后我们就可以在区块模板当中选择私有模板，在这里面就可以将它拖动出来进行复用。完成了区块模板的介绍之后，我们来看一下页面的属性，首先我们点击页面属性可以看到这里面有它页面内容的设置，可以设置PC 端的设置和 mobile 端的设置，也就是移动端的设置，更改这里的设置画布区域也会同步进行预览展示，最后我们点击预览可以看一下我们更改之后的效果，这就是自定义页面的初步使用。下面我们继续学习项目评选系统实践第二节项目评选实践的低代码基础。
三．第二节——项目评选实践的低代码基础
本小节会讲解一个自定义页面查看表单数据的实践案例，通过拆解本小节的案例对这些功能一一进行介绍，从而了解项目评选实践所需要的低代码基础。首先来看一下，自定义页面查看表单数据案例涉及的核心功能及知识点。
1.涉及核心功能及知识点
这里面涉及到的有动作面板、数据面板，还有宜搭接口的功能。动作面板功能是按钮绑定动作，去配置跳转的 API ，跳转到详情数据中。数据源面板功能是通过数据源面板新增远程数据源，调用接口获取表单数据，新增变量数据源保存页面临时变量。宜搭接口功能，宜搭提供应用维度可以直接调用的接口和第三方获取宜搭数据的接口。
2.动作面板功能概述
了解了涉及的核心功能及知识点后，我们来看一下动作面板，动作面板是可以用来编写 JavaScript 代码，来实现一些更定制化的需求，它支持动作绑定，这里的支持动作绑定指的是将【组件的动作】和【动作面板当中自定义的函数】进行绑定。如上图所示，我们可以选择页面属性，右侧中有生命周期，在这里就可以去进行动作绑定，绑定完成之后，它就可以在中间去书写页面加载完成时的函数。当然，动作面板支持直接书写 JS 代码定义函数，也支持书写 debugger 进行断点调试。那么在动作面板中，我们可以书写哪些有宜搭封段的函数，而这些函数又可以在哪里去进行寻找呢？
3.开发者中心介绍
我们首先来看一下宜搭的开发者中心，开发者中心（ https://www.aliwork.com/developer/）提供 API 文档、组件使用的事例、常见业务场景来继续深入并解决所遇到的这些问题。
如图所示，这里面我们标注的是一个 API 参考，这里是宜搭对执行特定任务的代码块，封装成可以随时被调用的JS函数，或者说 JS 方法。我们可以直接将它取出来，然后放置在我们的工作面板当中进行使用。除了 API 参考以外，我们还有专题、布局组件、基础表单、高级组件，还有一些场景案例等。接下来，我们来看一下常用的 API 参考。
4.常用 API
这里面常用的 API 方法有 get 、set 、getValue 、setValue ，分别都是去获取当前组件或者表单的属性值，或者是它的值。还有 show 和 hide 方法，它们是用于显示或隐藏对话框的。 dataSourceMap 用来加载远程数据源， utils.dialog 用于弹出对话框， utils.router.push 用于路由跳转。下面我们用一些事例来讲解这几个功能。
5.常用 API 使用示例
（1）get get 的作用是获取当前文本组件的属性值，用法是 this.$(fieldId).get(key)， fieldId 是组件的唯一标识， Key 是组件的属性。
如图所示，我们可以通过 get 去获取文本里面的 content ，也就是文本的内容。 （2）dataSourceMap
dataSourceMap 用于加载远程数据源，它的用法是this.dataSourceMap.mockReq.load(params) ，mockReq 是远程数据源的名称， Params 是请求的携带参数。如图所示，在这里面我们就先通过 cost 定义了一个 params ，也就是定义了请求的携带参数，定义完成之后去调用加载远程数据源，这里已经将远程数据源的名称更改为已经定义好的远程数据源的名称，用这种方式去进行调用。
（3）utils.dialog
utils.dialog 它的作用是弹出对话框，用法是 this.utils.dialog(options) ，这里面的 options 是 dialog 的属性，上图中以蓝色框框出的部分使用到了 utils.dialog， 这里面 dialog 的属性包含 title 、tap 还有 content 等一些属性。动作面板的常用 API 讲解完成后，我们来讲解一下数据源面板。
6.数据源面板
数据源面板可以声明一个变量或者一个远程变量，用于动态的展示一些数据使用，在控件的属性配置上可以进行对数据源的数据绑定。新建的数据源分为三个种类，分别是参数数据源、变量数据源和远程数据源。
参数数据源是系统默认传入该数据源，用于获取当前 url 中的参数。
变量数据源一般用于保存配置项、页面临时变量等。
远程数据源一般是从一个服务端接口中获取数据。
上图展示的是变量数据源，在这个输入框内支持的变量有字符串、数字、布尔值、对象、数组还有空值，下面我们来看一下宜搭的接口。
7.宜搭接口
宜搭提供以下两种调用数据的接口，分别为宜搭平台接口和 Open API 开放接口。
宜搭平台接口
宜搭页面数据源可以直接调用的接口
支持应用维度接口，将当前组织架构内的数据获取到 Open API 开放接口
需要申请接口的调用权限
它支持定时将数据拉回到自建系统中进行精加工或归档
也可以将表单提交、流程发起操作的入口集成到现有的平台上。 这就是宜搭的接口，了解了上述的功能点后，我们来看一下自定义页面表单数据实践。
8.自定义页面表单数据实践
本次实践的功能点有区块模板展示数据和详情跳转功能。
区块模板展示数据是当我们获取了表单的数据之后，我们需要处理并绑定在区块模板的文本内容属性上进行展示。
详情跳转功能是可以点击按钮跳转到对应的数据详情页面，查看更多的数据。
这里面涉及到了表单页面和自定义页面，我们会在自定义页面中，通过远程数据源调用宜搭平台的接口获取表单数据。获取完成后，我们处理数据并绑定在文本内容属性上，绑定完成之后我们去设置详情跳转的功能，这里的详情跳转功能是使用到了动作面板加跳转的 API 来实现的，我们会跳转到表单的详情页面去查看更多的数据。了解了实践流程以及实践的功能点，下面我们来进行实操演练。
9.实操演练
首先进入到我们上节课创建的项目管理应用当中，在这里我们已经提前创建好了一个表单页面，名称为项目表单。
在这里已经录入了四条数据（如图所示），接下来我们就要在自定义页面实现获取表单里面的这些数据，并且绑定在自定义页面上，来展示这些数据。首先我们打开自定义页面的编辑页面，然后我们要选择左侧工具栏当中的数据源，然后点击添加，在这里面，我们可以快速新建一个远程 API ，也就是创建一个远程数据源。
在这里面我们可以去配置它的名称、描述自动加载、加载方式、请求地址、请求方法、请求参数、是否发送请求还有数据处理等等。我们先来更改它的名称，可以随意起名，但是这个名称不能使用JavaScript 的关键字。然后我们去更改它的请求地址，我们想要在它进入这个页面的时候就把数据展示出来，所以我们是开启的自动加载，并且加载方式是并行的。然后来讲一下请求地址，它的请求地址可以从文档中获取宜搭平台的接口，然后放置在里面。先打开我们的使用手册，然后找到宜搭平台的接口。
如图，这是我们使用手册中的宜搭平台接口，第一点是我们的调用说明，它是由域名、应用编码和接口路径组成的，我们可以直接复制这个地址。我们将它复制下来，然后去更改它的 APP tap ，也就是应用编码，还有它的接口路径即可。 /dingtalk/web/APP_X1X2X3X4/v1/process/startInstance.json 我们将它复制过来，然后这边的应用编码，我们如果是浏览器的话，可以将上方的 APP tap 直接复制下来，粘贴在里面即可（如下图所示）。
如果使用的不是浏览器，而是工作台，我们也可以返回到我们的应用中，然后在应用设置中部署运维，去获取到我们的应用编码，我们先保存，然后再保存，这样我们返回页面的时候，这个数据源也是保存的。我们返回到页面，在应用设置中有部署运维，在这里可以获取到我们的应用编码（如图所示），然后放入到我们的地址中。
返回页面，我们继续配置远程数据源，我们的接口还没有修改，这里面的接口，我们可以去宜搭平台接口中寻找，因为我们调取的项目表单是一个表单页面，所以我们在这边找到的是表单实例。我们需要根据条件去搜索实例详情，所以我们使用3.6的这个接口。
如图，这就是它的一个接口，它的请求类型、权限控制、必填参数都有说明。我们先将接口复制过去，请求参数中有一项是必填的，也就是 formUuid 。所以我们选择添加一项，然后在参数名这里将宜搭平台接口里的参数名复制过来，这是防止我们书写错误。参数名 formUuid ，我们应该去哪里去获取呢？
我们来看一下它的简介，它是表单的 ID ，它的示例是这样的（如图所示），这样我们就知道了如何去找。返回到我们的部署运维中，这里同样的先保存一下，我们先复制一个这个页面，以备后续使用，然后返回到我们的页面中，同样的点击应用设置、部署运维，在这里可以看到我们有两个表单（如下图所示）。
其中，项目表单就是需要获取的数据，我们将它的表单 ID 获取到，然后返回到我们的页面，将参数值输入进去，这样就完成了我们配置的远程数据源。填写完成后，我们想要看一下返回的数据，除了控制台的 network 查询可以查看以外，我们还可以通过这里面的数据处理去查看我们返回的数据。这里面我们可以使用请求完成回调的函数，也就是 didFetch ，然后在里面去打印我们返回的数据。
保存后预览，我们选择用新窗口打开，右键点击检查，在这里可以看到我们打印的数据，这就是我们请求的数据源返回出来的数据，可以看到 content 对象中是用 date 来存放表单数据的（如下图所示）。
可以看到，这里面有四条数据，对应的是我们项目表单里面的四条数据，然后我想要在这个页面中，也就是描述信息中获取里面的详情，这里的详情是多号文本写入的，那么我们应该如何去获取呢？这里面用的是 date 来存放表单的数据，然后如果获取的第一条数据，那么我们就用下标为零来进行获取。
这条数据里面的具体的内容我们又需要在 formData 中进行寻找对应的这样的值，也就是说，请求的接口返回的数据，我们还需要再次处理，才能返回表单组件内的值，展示在我们的页面上。根据这种方式，我们来绑定文本内容，我们在文本中去绑定变量，在这里面可以选择我们定义好的一个数据源，我们选择的是 state.getDatas ，也就是刚才我们定义的 getDatas 的远程数据源，并且我们找到 D0 的下标，也就是第一条数据，然后我们去找里面的具体内容，具体内容在 formData 中。
然后是里面具体内容的这个值，我们将它复制过来。这样我们就绑定完成了，我们点击确定、预览来看一下效果是否有更改。
点击预览可以看到，这里面的文字已经变成了我们刚才看到的多行文本里面的内容，这样我们就将我们的数据获取到了当前的自定义页面当中。如果我们想要点击这个按钮去跳转到对应的项目表单的详情页面，应该如何去实现呢？
我们在这边拖动一个文本组件，用来存放 formInstId 。在项目表单的数据管理页当中，我们来查看这条数据。新开页面，在这里可以看到它前面是固定的，所以我们需要的是点击按钮，然后跳转到这个页面，拼接上它唯一的 formInstId ，这样就可以找到对应的项目表单页面。我们返回到自定义页面中，然后在这里面同样的绑定这个变量，去获取到我们的 formInstId。 我们来查看一下它的位置。将它关上，然后看一下它的第零条数据里面的 formInstId ，在这里面我们就可以通过 Data0.formInstId 来获取这一条数据（如下图所示）。
然后来到自定义页面，如果怕拼写错误，也可以复制过来，然后点击确定，这样我们的 formInstId 就已经配置完成了。我们需要的是点击按钮去跳转，所以需要给按钮绑定一个点击动作。我们点击这个按钮，然后在属性中找到动作设置，在这里面可以新建动作，选择 onClick 点击按钮，也就是创建一个点击的事件。绑定完成后，我们在里面去书写业务逻辑。在这里面我们使用的是 GSAPI 中的路由跳转，我们到宜搭开发者中心去，找到 API 参考，在这里面去寻找路由的页面跳转。
这里面有四个参数，我们在这里更改它的一个路径和携带参数，后面两个使用 to 就可以了。再返回到页面当中，将它复制过来，然后去更改它的路径。
将前面的复制粘贴过来，这里面的携带参数是要获取到 formInstId ，也就是要获取已经放入到我们文本当中的这样的 formInstId ，我们需要的是获取到这个文本的唯一标识，进而获取里面的内容，这里面内容的属性是 content ，而不是 value ，所以我们不能使用 get value 来获取，而使用的是 get 的方法。我们先复制唯一标识，再在这边去定义一个 formInstId ，然后通过 API 方法， =this.$(“ 唯一标识 ”）.get ，这里面是它的属性，我们用 content ，也就是内容来获取到它（如下图所示）。
这样我们就获取到了唯一标识，这里面传递的参数，我们是以这样的方式去进行传递的（ {formInstId:formInstId},true,isUrl ），然后我们后面改为 true 。
拼写完成后保存预览，我们来看一下效果。我们点击这个按钮，就可以看到，它已经跳转到对应的表单的一个详情页面去查看里面的数据了，这就是点击按钮查看表单详情页面的配置。当然，如果认为我们的自定义页面中展示的这个 formInstId 很难看，我们也可以将它隐藏掉，这并不影响它获取里面的内容。
我们可以在这个文本后面找到它的容器，然后设置容器的隐藏，也可以找到文本，然后设置文本的隐藏，最后预览看一下效果，这样我们的文本就隐藏了，但是并不影响点击按钮的使用。这就是项目评选实践的低代码基础，接下来我们继续学习项目评选系统实践第三节，项目评选系统的需求与分析。
