WhatsApp Flows模板字符串中计算表达式无法正确渲染

问题场景 #

我在使用WhatsApp Flows构建表单时，需要根据用户输入的数量（TextInput字段）实时计算总成本（数量×固定单价100）并展示。但直接在TextHeading的text属性中写"the total cost is ${form.number * 100}"时，表达式被当作字面字符串显示，无法得到计算后的结果。

解决方案 #

WhatsApp Flows的静态文本组件不会直接解析内嵌表达式，需通过数据绑定+计算属性实现动态值渲染，具体修改如下：

1. 在屏幕的data区域新增计算属性totalCost，通过expression关联用户输入的数量与单价，实现实时计算；
2. 在TextHeading的text中引用这个预计算的data.totalCost值。

修改后的完整代码：

{
  "version": "5.0",
  "screens": [
    {
      "data": {
        "value": {
          "type": "boolean",
          "__example__": true
        },
        "totalCost": {
          "type": "number",
          "expression": "form.number * 100"
        }
      },
      "id": "SCREEN",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "TextInput",
            "label": "Quantity",
            "name": "number",
            "type": "number"
          },
          {
            "type": "TextHeading",
            "text": "the total cost is ${data.totalCost}"
          },
          {
            "type": "Footer",
            "label": "Complete",
            "on-click-action": {
              "name": "complete",
              "payload": {}
            }
          }
        ]
      },
      "title": "Welcome",
      "terminal": true,
      "success": true
    }
  ]
}

额外提示 #

• 给TextInput添加type: "number"属性，可限制用户仅输入数字，避免非数字输入导致计算异常；
• data中的expression会自动监听form.number的变化，实时更新totalCost的值，确保展示的总成本始终与用户输入同步。

内容的提问来源于stack exchange，提问作者Omar Jabban