天气查询页面是最适合练手 API 调用的项目。这篇文章给你一套完整 Prompt 模板,复制改词就能做出一个功能完整的天气查询应用。
天气查询页面,拆开看就 5 个部分
和 Todo 应用不同,天气查询页面多了一个关键环节,调用外部 API 获取数据。但拆开看,结构依然清晰。
搜索区域是入口,用户输入城市名点击搜索。当前天气是主展示区,显示温度、天气图标和描述。详情信息展开湿度、风速、气压等辅助数据。未来预报用卡片展示 5-7 天趋势。历史查询记录用户最近搜索过的城市,方便快速切换。
用户操作流程,一条线加两个判断
天气查询的核心难点不在 UI,而在数据获取的容错处理。把流程画出来,写 Prompt 的时候就知道每个分支该做什么。
用户输入城市名后,先判断城市是否存在。不存在就提示未找到,存在就请求天气 API。请求成功就渲染数据并保存查询历史,失败就显示错误信息。两个判断分支覆盖了最常见的异常场景。
最终效果长什么样
用下面的 Prompt 模板生成后,效果大概是这样的。
顶部搜索栏输入城市名,中间显示当前温度和天气图标,下方三栏展示湿度、风速、气压,底部是 5 天预报卡片,每天显示日期、天气和温度范围。整体配色用青绿色主调,详情卡片用蓝色,预报晴天用绿色,雨天用蓝色区分。
完整 Prompt 模板
此内容受限
此部分内容暂不可见