宜搭是钉钉旗下的低代码平台搭建工具

Web开发界面

左侧菜单

大纲树

显示当前界面下的使用的低代码组件，和 DOM 树类似

组件

即类似前端组件那样的封装，分为基础组件和自定义组件

基础组件：官方提供的常用组件

自定义组件：官方提供 + 自行搭建组件

数据源

类似于前端开发中的 Vuex 全局数据

支持添加三种类型的数据

变量
新建远程 API
连接器

变量数据源

即全局变量

名称：变量名
描述：变量描述信息，只是用来查看
数据：对象类型的数据，也支持普通字符串，数字等

使用时通过 this.state 进行访问

新建远程 API

即开发中的请求接口，可以通过 this.state 获取

名称：请求接口函数名，只支持下划线
描述：描述信息
自动加载：开启后，在页面加载前/依赖变量变化时自动请求数据
加载方式：
- 串行：使用于依赖其他接口数据的清空，例如 A 接口依赖 B 接口数据
- 并行：不依赖任何接口数据
请求地址：请求 url
请求方法：Restful API
请求参数：和上述 自动加载联动，支持手动添加和使用数据源两种形式
是否发送请求：即条件满足时，是否要执行请求，还是说不使用，支持表达式
数据处理：类似请求的 hook 函数
默认数据：即类似于提前声明 Vue2.data 的变量，用于首屏渲染

使用变量面板

就是一个通用代码面板，需要根据情况配置对象和函数执行，在执行对应模块时会自动调用

数据源：即定义的全局变量
自定义处理函数：对应定义函数名，方便进行快速调用
预置处理函数：内置处理函数

所有支持变量的属性都有如下图标，点击图标可打开「变量绑定面板」

「变量绑定面板」支持绑定如下类型的变量，可通过点选直接使用：

数据源：在数据源面板中的所有数据源都会出现在这里，可以直接绑定或者使用一个表达式，

自定义处理函数：在 JS 面板中的所有 export 的函数都会出现在这里，但要能作为一个变量绑定给组件属性，还需要满足一些条件：
- 函数需要有返回值
- 函数内部不允许调用 this.setState()
预置处理函数：系统预置的处理函数
- utils.getLocale() ；获取当前的语言环境，返回 zh_CN 或 en_US
- i18n(key)；获取国际化文案，key 可以从左侧国际化面板中复制
- utils.formatter(type, value, options)；格式化

请求参数

两种模式

自定义参数模式

变量绑定模式，应该是可以和 自动请求功能进行联动

数据处理（钩子函数）

类似于 HOOK 钩子，和 axios 拦截器类似

willFetch

请求发送前处理函数；willFetch 允许用户在发送请求前修改请求的各种参数。示例：

function willFetch(vars, config) {
    // 通过 vars.data 可以更改查询参数
    // 通过 config.header 可以更改 header
    // 通过 config.url 可以更改  url
    vars.data.a = 1; // 修改发送请求参数中的 a 为1
    config.url = 'https://www.taobao.com'; // 修改请求的 url 为淘宝
    config.header['Content-Type'] = 'application/json'; // 修改 Content-Type
    console.log(vars, config); // 可以查看还有哪些参数可以修改。
}

fit

请求返回时的数据适配；

类似于 DDD（领域驱动开发）中的 Sever 适配层

fit 可以修改请求的原始 Response 以适配对应的数据请求格式。示例：

function fit(response) {
  const content = (response.content !== undefined) ? response.content : response;
  const error = {
    message: response.errorMsg ||
      (response.errors && response.errors[0] && response.errors[0].msg) ||
      response.content || '远程数据源请求出错，success is false',
  };
  let success = true;
  if (response.success !== undefined) {
    success = response.success;
  } else if (response.hasError !== undefined) {
    success = !response.hasError;
  }
  return {
    content,
    success,
    error,
  };
}

didFetch

请求完成回调函数

didFetch 允许用户对接收到的数据进行修改,

和 fit 不同的是, 接口返回的 success 为 true 才会执行。

function didFetch(content) {
    content.b = 1; // 修改返回数据结构中的 b 字段为1
    return content; // 重要，需返回 content
}

onError

请求错误处理函数

onError 用于捕获远程数据源的接口异常

接口返回的 success 为 false 时会执行,

function onError(error) {
  console.log(error);
}

动作面板

分为页面 JS 和组件别名两部分

页面 JS

语法检查：协助检测语法错误
重置引用计数：引用计数功能

函数导出

使用 export 来实现，也可以直接使用

/**
 * 自定义工具函数，不包括上下文(this)的使用
 */
function something() {
  alert('something')
}

/**
 * @title 自定义动作 A
 * 可以使用上下文(this)
 */
export function custom_action_a() {
  alert('custom action a')
}

/**
 * @title 自定义动作 B
 */
export function custom_action_b() {
  something(); // 调用自定义工具函数
  this.custom_action_a(); // 调用自定义动作函数
}

这里编写的 JS 代码使用 export 导出后，可以和右侧的动作面板联动，

选中任意组件 > 新建动作（即组件事件），选中对应动作组件即可完成实现

动作名称：即事件触发时的执行函数名
参数设置：即事件触发时给函数传入的参数

可以指定已声明的动作函数，在参数设置面板指定传入函数的参数

可以在添加新动作里指定传参，之后会在 JS 面板中创建对应的 onChange 函数

代码调试

可以在函数内声明 debugger，依赖 Crhome DevTool 执行调试功能

宜搭低代码平台笔记