我做了一个科普小程序：奇妙动植星球｜从《地球脉动》到指尖交互！

大家好，我是爱研究AI编程落地的瓜哥。

我喜欢自然纪录片：从《动物世界》到《地球脉动》、《蓝色星球》、《植物王国》等。于是我产生了一个想法：为什么不把那些有趣的现象做成可互动的小实验呢？

我用免费工具（Kiro + Claude Sonnet 4）做了一个小程序 “奇妙动植星球” ，用 H5 动画把动植物知识讲清楚、讲好玩。

图片-产品主页面

看到这，觉得不错，不妨先点个 关注，方便后续关注进度。看到最后，文末我还留了 小程序二维码 扫码即可体验！

我在做什么？

• 一款免费微信小程序：面向喜欢动植物、爱探索自然的朋友。

• 核心玩法：用 H5 动态可视化，把“自然里的小问题”讲清楚、讲有趣。

• 我的目标：轻量、好看、能学到点东西。

为什么要做？

• 纪录片启蒙了我，但信息密度高、停留时间短；

• 小程序能把一个知识点拆小、做成交互动画，让“看懂”更轻松；

• 也想用这种方式，拉近大家与自然的距离。

已完成的进展

• 基础框架与导航

• 动态实验的 H5 渲染组件

• 内容管理（上传/编辑/更新/删除）

• 云端数据结构与资源存储

• 若干实验型互动页面（内测中）

先给大家放几个互动示例

三个互动示例（H5 动画）

• 金枪鱼为什么总在游？

• 动画呈现“游速”与“氧气摄入”的关系，速度过慢/过快都会影响供氧；

• 拖动滑杆改变速度，实时看到“耗氧—摄氧”曲线如何变化。

• 动态Gif演示：

• 猎豹冲刺的“极限点”在哪里？

• 动画呈现“速度↑→体温/耗氧↑”，存在一个最佳冲刺时长窗口；

• 拖动速度滑杆，观察体温曲线与成功率变化，超过阈值会触发“冷却”提示。

• 动态Gif演示：

• 企鹅抱团如何“保温不窒息”？

• 动画展示外冷内暖的温度层与缓慢换位形成的“通气通道”；

• 调整“风速/气温”，看群体密度与体表温度分布如何改变。

• 动态Gif演示：

更多选题，我会持续打磨后上线，计划每次只做好一个小知识点。

下面介绍，我具体是怎么做的。

我一个人怎么做的？

• 需求与选题：先列清“一个问题—一个动画—一句话结论”

• 原型与 UI：统一风格、保证阅读节奏与留白

• 开发：小步快跑，先动起来再打磨

• 内容管理：云端可改可更，方便持续迭代

产品形态

• 首页：最新 + 精选主题；

• 知识卡片：图文 + 小动画，帮助记忆；

• 搜索与收藏：找回看过的内容；

• 离线友好：弱网时，自动降级为低帧动画或静态图解。

迭代路线图

• 近期（1 周）

• 打磨三条示例交互细节与动效

• 上线首批 5–8 条“知识卡片”

• 开放小规模内测与反馈通道

• 中期（1 个月）

• 增加“分类/地区/生态位”筛选

• 上线“首页—精选—数据联动”闭环

• 完成UI的美化、修复bug、达到可上线状态

技术与工具

• 开发方式：重前端、轻后端。

• 代码辅助：Kiro + Claude Sonnet 4（全程用AI开发）。

• 微信侧：微信开发者工具 + 云开发（云函数/云存储/云数据库）。

• 成本策略：免费额度 + 按量付费，个人开发可控、压力小。

###

为什么这样选？

• Kiro + Claude：写前端交互时效率更高，把需求说清楚，就能很快落地；

• 微信云开发：省去了服务器与运维，内容、资源、接口都在一体化平台完成；

• H5 动画：适配小程序环境，表现力与性能之间的平衡点较好。

使用感受如何？

• 搭环境轻、上手快；

• 小模块能快速迭代，适合“一个人也能慢慢做大”的节奏；

• 云资源清晰、按量可控，心里不慌。

谢谢你看到这里！这个小程序从兴趣出发，也希望我能认真完成。愿我们在小小屏幕里，重新感到生命的有趣。

总结

奇妙动植星球想把“好看”的自然，变成“好玩也能学到点东西”的自然。我们用小而美的互动，把一个现象讲清楚：可视化关系、允许动手、给一句话结论。工具只是手段，目标只有一个——了解自然与生物，让理解变得轻松。