产品动态
产品公告
代码创建
功能说明
代码创建是指通过编写代码从零构建 Widget 的方式，适用于对展示结构、交互逻辑和样式效果有较高定制需求的场景。
该方式具备更高的灵活性与可控性，适合具备一定前端或 Widget 开发经验的用户使用。
适用场景
平台提供的 Widget 模板无法满足使用需求。
需要实现复杂或高度定制化的展示与交互效果。
使用者具备一定的代码开发能力，能够自行完成 Widget 创建。
操作步骤
您可以参考以下生成天气预报 Widget 的步骤进行创建：
1. 新建 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 效果预览如下：
文档反馈