# 基础概念

是什么低代码？在现有 PaaS 平台中，通过少量编码可以完成应用程序的开发、增强。在销帮帮中，借助 PaaS 低代码，可以让用户完善业务逻辑闭环，自行定制逻辑。

我们将按照一个利于理解的线路来介绍低代码，在最新版本的销帮帮中，所有旗舰版客户在管理中心会多出两个菜单：

# 开发人员

首先，低代码会涉及到相关到编码工作，为了考虑配置相关界面不干扰大量用户，相关配置和编码的操作都需要用户成为开发人员才可见。

新建开发者，选择对应的表单权限，随后该用户即可在表单设计页的右下角中看到低代码的入口：

# 低代码配置

目前低代码还处于持续迭代阶段，开放了表单的低代码配置和事件，对于字段的低代码配置，目前仅开放了部分的能力。

开放的表单事件：

表单展示时
表单提交前
表单提交后
列表页按钮点击
详情页按钮点击
审批页按钮点击

点开低代码面板后，左侧是一个 JavaScript 编辑器，编辑器的内容为一个 JS 文件，一个表单只存在一份 JS 文件，所有的事件都统一在这边写代码。

右上方的标题表明了现在是对表单或者是哪个字段进行配置，怎么切换到其他字段呢？其实低代码是根据字段、表单属性选中情况来判断的，如果表单设计右侧选中的是字段属性，并且有字段信息，那么点开低代码的面板就是对这个字段的配置，如果选中的是表单属性，那么就是对整个表单的低代码配置：

# 字段配置低代码

所有能够配置低代码的字段，点开以后都可以看到有一个唯一标识的 key，这个 key 可以在代码中获取值、赋值；

第二块是动作设置，点击动作设置，您可以选择需要由什么来响应动作：

# 普通字段

目前，大部分的字段都只有一个响应器，即值发生改变，点击值发生改变后，会唤起动作配置：

# 【阶段推进器】

阶段推进器除了值发生改变事件外，还增加了一个阶段变更前事件。通过给该事件绑定低代码，将低代码的返回值置为false即可阻断用户的变更阶段操作。

目前总共支持 4 种动作，打开 URL、页面 JS、发起请求、API 服务，首先不管是哪一种，都是会在值发生改变以后触发，一个完成的字段低代码配置是这样：

当客户简称这个字段的值发生改变后，会依序同步执行打开 URL、页面 JS 两个动作，您可以在此通过拖拽完成排序。

# 打开 URL

打开 URL 即当触发这个动作的时候会打开一个页面，填写地址（仅允许 http/https 开头），新开页面的配置在 Web 端的区别同理window.open和window.location.href，移动端则只有 window.location.href（新开页面）的模式。

# 页面 JS

页面 JS 是低代码功能的重中之重，打开页面 JS 后，仅有一个弹框填写需要执行的 JS FunctionName

这里的函数名称和JS 面板中的函数名称对应：

当触发到了所配置的页面 JS 时，我们会去执行对应 FunctionName 的函数。具体页面JS 内容我们会在下面单独再讲。

# 服务注册

在我们讲发起请求和 API 服务两个动作之前，我们需要先引入服务注册这个概念，在低代码的流程中，您如果需要从第三方平台获取数据、推送数据到第三方等场景，都需要使用服务注册，点开管理中心的服务注册，您可以看到我们分为前端服务和后端服务。

两者有何区别？后端服务会提供给动作中的 API 服务的列表，前端服务会提供给动作中的发起请求列表，两者唯一的区别是，后端服务更像是 webhook，在销帮帮这边仅是一个通知，不会有任何流程、逻辑的处理，而前端服务会参与到销帮帮前端流程中，前端会等待接口发送成功然后把返回的内容提供给后面的流程。

新建服务中，主要需要填写 URL 地址、请求方式、根据您的需要配置 MD5 或 SHA256加密等信息，此外需要在此预先定义好这个接口需要传递的参数：

配置好相关内容以后，就可以在动作中的发起请求和 API 服务中调用了。

# 发起请求

发起请求中可以选择数据源，这里的数据源就是从管理中心-服务注册-前端服务的列表读取的，选择完对应的数据源后，可以配置参数。这里的参数是跟服务注册时填写的关联的，前面的名称就是服务注册参数列表中的标签名。固定值可以直接填写值，动态值可以选择当前表单的一个字段作为参数动态传入：

在具体执行的时候，我们将会把参数转换为一个对象（POST 请求）或者 url parameter（GET 请求）发送给接口，并且 key 名会使用服务注册中参数列表定义的参数名。

发起请求是一个同步过程，任何发起请求后的动作都会等待请求结束再执行，比如：

第二个动作页面 JS 一定会等待发起请求完成后才会执行，并且在这个步骤中可以在函数入参上获取到发起请求回调的结果。

# API 服务

API 服务是一个异步任务，不会阻塞代码的运行，不参与到逻辑编排流程当中。API 服务选择的内容是通过管理中心-服务注册-后端服务添加的，其他的逻辑与发起请求的动作类似。

# 表单配置低代码

表单可配置的内容与字段配置不同：

# 表单-服务注册

首先是服务注册，表单的服务注册有点类似于业务规则，

在这里可以配置三个类似于 hook 的内容，当表单提交后（新建完成）、表单编辑后（修改完成）、表单删除后都可以触发对应的后端服务（在管理中心-服务注册-后端服务中添加的内容），且同样可以选择固定值或动态值绑定当前表单的字段值。

# 表单-动作配置

表单的动作中有 6 种触发方式：

表单页面被展示时：即新建表单页面的时候触发。
表单提交前：在表单提交到销帮帮完成落库请求之前，这个 hook 允许低代码自行阻断表单提交，常用与自定义表单校验，比如可以在表单提交前触发一个 JS，只要这个 JS return了 false，就可以阻断表单校验。
表单提交后：在表单提交到销帮帮完成落库后触发。
列表页按钮点击：点击列表页按钮并且在系统逻辑执行之前触发，按钮的信息通过参数传入页面JS中，如果函数返回false则会阻止系统逻辑的执行。
详情页按钮点击：点击详情页按钮并且在系统逻辑执行之前触发，按钮的信息通过参数传入页面JS中，如果函数返回false则会阻止系统逻辑的执行。
审批页按钮点击：点击审批页按钮并且在系统逻辑执行之前触发，按钮的信息通过参数传入页面JS中，如果函数返回false则会阻止系统逻辑的执行。

以上六者可配置的动作内容都是一致的：

按钮级低代码例子：

// 这个方法会阻止打印按钮的执行
export async function button({ val }) {
    if (val.btn.value === '打印') {
        return false;
    }
}

# 表单-自定义按钮

自定义按钮可以往四个位置推送自定义按钮：

新建页按钮在新建页右上角

编辑页的按钮和新建页一样

列表页按钮则展示在列表页下方。

详情页按钮则会被植入到详情页折叠菜单内。

添加完成后可以直接修改按钮的名称，这个名称会直接展示在按钮的文字上。动作也可以同样进行执行顺序的排序。此外，相同的按钮位置（如两个按钮都在详情页按钮上），也可以通过排序改变在位置展示上的顺序。

注意，目前由于云叩开发平台支持更高维度的列表页和详情页按钮自定义，所以 PaaS 低代码的列表页详情页按钮暂时不支持页面 JS 配置，也不能在发送请求和API 服务中拿到对应的数据，请谨慎使用。

# JS 面板

强烈建议不熟悉JavaScript的开发者先去看下MDN上的JavaScript教程 (opens new window)

JS 面板用于提供给页面 JS 调用。在页面 JS 中，已经享有基本的 JS 语法提示、销帮帮 SDK 语法提示以及当前表单字段唯一ID提示，主题、字体大小配置等功能。

在引号内(单引号和双引号)使用ctrl + sapce(空格键)调起代码提示可看到字段对应的唯一id。字段唯一ID提示

注意：所有需要被页面 JS 调用的函数，都需要用 export 导出，并且函数名不可重复。

JS 面板中 return 返回的内容都可以在后面的流程中获取，并且只要 return false都会阻断流程，中断整个动作的执行，并且可以在表单提交前这个 hook 中阻断表单提交，达到自定义校验的目的。

JS 面板中集成了了销帮帮 SDK，SDK 可以用于获取表单数据、设置表单数据等操作，详见云叩的 SDK 文档。

注意，右下角的保存按钮仅会保存低代码配置，并且把当前 JS 面板内的内容置为开发版本（下面有介绍），如果想要页面 JS 的代码真实对公司所有使用该表单的人员生效，需要点击上方发布代码。

# 开发环境

如果当前用户为开发者，可以在右上角用户点击的菜单内看到“使用开发环境的 JS 文件”这一选项，前面我们有说到，低代码的保存仅会把JS 文件置为发布状态，这个时候您可以点击“使用开发环境的 JS 文件”，这个设计的目的在于代码可能需要调试，但您不想影响其他人的正常使用，所以需要有一个测试的过程。点击“使用开发环境的 JS 文件”后，您进入表单即可体验最新的、您未发布的 JS 代码效果。

当您目前是开发环境，这里的菜单会变成“使用生产环境的JS文件”，点击即可切换回正常的生产环节 JS 代码效果。

快速上手 →