代码创建是指通过编写代码从零构建 Widget 的方式，适用于对展示结构、交互逻辑和样式效果有较高定制需求的场景。
该方式具备更高的灵活性与可控性，适合具备一定前端或 Widget 开发经验的用户使用。
平台提供的 Widget 模板无法满足使用需求。
需要实现复杂或高度定制化的展示与交互效果。
使用者具备一定的代码开发能力，能够自行完成 Widget 创建。
您可以参考以下生成天气预报 Widget 的步骤进行创建：
在 Widget 开发页面单击新建 Widget，选择代码创建。
输入 Widget 名称：天气预报，新建标签：天气、结果展示，单击确定，进入卡片预览界面。
单击编辑，分别在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 效果预览如下：
