功能说明

代码创建是指通过编写代码从零构建 Widget 的方式，适用于对展示结构、交互逻辑和样式效果有较高定制需求的场景。

该方式具备更高的灵活性与可控性，适合具备一定前端或 Widget 开发经验的用户使用。

适用场景

平台提供的 Widget 模板无法满足使用需求。
需要实现复杂或高度定制化的展示与交互效果。
使用者具备一定的代码开发能力，能够自行完成 Widget 创建。

操作步骤

您可以参考以下生成天气预报 Widget 的步骤进行创建：

在 Widget 开发页面单击新建 Widget，选择代码创建。

2. 填写基础信息

输入 Widget 名称：天气预报，新建标签：天气、结果展示，单击确定，进入卡片预览界面。

3. 编辑代码

单击编辑，分别在Template、Schema、Default 界面编辑代码，生成 Widget ，单击确定，完成 Widget 的编辑。

Template 模块：定义天气预报 Widget 中组件的布局结构，主要使用了 Card 卡片、Title 标题、Icon 图标等组件，具体编辑方法可参见 Widget 组件。

<Card size="sm">  {/* 创建小尺寸卡片容器，作为Widget的主体框架 */}
    <Col gap={2}>  {/* 垂直布局容器，子元素间距为2个单位 */}
      {/* 标题区域 */}
      <Title value="明天天气" size="md" />  {/* 显示Widget标题，中等字号 */}
      
      {/* 位置和天气状态行 */}
      <Row gap={2}>  {/* 水平布局容器，子元素间距为2个单位 */}
        <Icon name="map-pin" size="sm" color="secondary" />  {/* 位置图标，小尺寸，次要颜色 */}
        <Text value={city} size="sm" color="secondary" />  {/* 城市名称，绑定city变量 */}
        <Spacer />  {/* 弹性空白区域，将后续元素推到右侧 */}
        <Badge label={condition} color="info" />  {/* 天气状况标签，绑定condition变量 */}
      </Row>
      
      {/* 温度信息行 */}
      <Row gap={2}>  {/* 水平布局容器，子元素间距为2个单位 */}
        <Text value={`温度 ${temp}°C`} size="sm" />  {/* 当前温度，使用模板字符串绑定temp变量 */}
        <Spacer />  {/* 弹性空白区域，将后续元素推到右侧 */}
        <Caption value={`最高 ${high}°C • 最低 ${low}°C`} />  {/* 最高最低温度，小号文本 */}
      </Row>
    </Col>
    
    <Divider />  {/* 分割线，分隔不同内容区域 */}
    
    {/* 穿衣建议区域 */}
    <Col gap={1}>  {/* 垂直布局容器，较小间距 */}
      <Caption value="穿衣建议" />  {/* 区域标题 */}
      <Text value={advice} size="sm" color="secondary" />  {/* 穿衣建议内容，绑定advice变量 */}
    </Col>
</Card>

JSON Schema 模块：配置数据格式和变量类型。

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",  // 指定JSON Schema版本规范
  "type": "object",  // 根数据类型为对象
  "properties": {  // 定义对象的属性结构
    "city": {
      "type": "string"  // 城市名称，字符串类型
    },
    "condition": {
      "type": "string"  // 天气状况，字符串类型（如：晴天、多云、雨天等）
    },
    "temp": {
      "type": "string"  // 当前温度，字符串类型（包含单位，如：25°C）
    },
    "high": {
      "type": "string"  // 最高温度，字符串类型（包含单位）
    },
    "low": {
      "type": "string"  // 最低温度，字符串类型（包含单位）
    },
    "advice": {
      "type": "string"  // 穿衣建议，字符串类型（根据温度给出的建议文本）
    }
  },
  "required": [  // 必填字段列表，所有字段都是必需的
    "city",      // 城市名称必填
    "condition", // 天气状况必填
    "temp",      // 当前温度必填
    "high",      // 最高温度必填
    "low",       // 最低温度必填
    "advice"     // 穿衣建议必填
  ],
  "additionalProperties": false  // 禁止添加未定义的额外属性，确保数据结构严格
}

Default 模块：填充变量数据作为示例。

{
  city: '深圳',
  condition: '阴',
  temp: '14',
  high: '18',
  low: '10',
  advice: '建议穿着毛衣或厚外套，外出时携带雨具，关注气温变化。',
}

Widget 效果预览如下：

功能说明

适用场景

操作步骤

1. 新建 Widget

2. 填写基础信息

3. 编辑代码