这个功能仅在 Pro 版本的设计器中提供。 详细了解 Pro 版本功能

变量

设计器中支持定义和绑定变量，可以在表单中动态获取和使用数据。通过变量，您可以轻松地将表单数据与外部数据源进行绑定，并在需要时进行动态更新。

内置变量

设计器提供了一些内置变量，用于获取不同来源的数据：

• $form: 获取表单中的数据
• $cookie: 获取cookie中的数据
• $localStorage: 获取localStorage中的数据
• $globalData: 获取全局数据源中的数据
• $var: 获取全局变量中的数据

获取表单数据

通过 $form 变量，您可以访问表单中各个组件的值。例如，要获取当前表单中 userName 组件的值，可以使用以下方式：

// 使用 API 获取
api.getData('$form.userName');
// JavaScript 中获取
get('$form.userName');
// 模板中使用
//{{$form.userName}}

读取Cookie

使用 $cookie 变量从 Cookie 中获取数据。例如，要读取 token 的值：

// 使用 API 获取
api.getData('$cookie.token');
// JavaScript 中获取
get('$cookie.token');
// 模板中使用
//{{$cookie.token}}

读取localStorage

通过 $localStorage 变量，可以从 localStorage 中获取数据。例如，获取 user 对象中的 id：

// 使用 API 获取
api.getData('$localStorage.user.id');
// JavaScript 中获取
get('$localStorage.user.id');
// 模板中使用
//{{$localStorage.user.id}}

读取全局数据

使用 $globalData 变量来访问全局数据源中的数据，这些数据可能是从远程服务器获取的。例如，获取 merchant 的 mer_id：

// 使用 API 获取
api.getData('$globalData.merchant.mer_id');
// JavaScript 中获取
get('$globalData.merchant.mer_id');
// 模板中使用
//{{$globalData.merchant.mer_id}}

读取全局变量

通过 $var 变量访问全局变量。例如，获取 price 的值：

// 使用 API 获取
api.getData('$var.price');
// JavaScript 中获取
get('$var.price');
// 模板中使用
//{{$var.price}}

定义变量

设计器还支持自定义变量。您可以在函数中定义变量，并将这些变量绑定到表单中。自定义变量的值可以根据外部数据源或逻辑进行动态计算。当变量发生变化时，绑定到这些变量的组件会自动更新。

自定义变量示例

假设您希望定义一个 token 变量，并从 Cookie 中读取它的值，如果 Cookie 中没有 token，则使用默认值 "default Token"：

function handle(get, api) {
    return {
        token: get("$cookie.token")||"default Token"
    }
}

在函数中，get 是一个函数，它用于访问内置变量或自定义变量的值。当 token 变量的值发生变化时，所有依赖于 token 的组件将会自动重新渲染，保持数据的实时性和一致性。

动态数据处理

在这个示例中，greeting 变量会根据 userId 的值动态更新。当 userId 从表单或 Cookie 中变化时，greeting 的值也会随之更新。

function handle(get, api) {
    const userId = get("$form.userId") || get("$cookie.userId");
    return {
        greeting: userId ? `Hello, User ${userId}` : "Hello, Guest"
    };
}

动态更新表单字段

您可以使用变量动态控制表单字段的属性，例如根据全局数据动态设置字段的选项：

function handle(get, api) {
    const options = get("$globalData.fieldOptions") || [];
    return {
        fieldOptions: options.map(option => ({
            value: option.value,
            label: option.label
        }))
    };
}

通过合理使用内置变量和自定义变量，您可以更灵活地控制表单中的数据展示和业务逻辑，实现复杂的数据绑定和动态更新。