基于AI辅助的零代码基金工具微信小程序开发手记-夜雨聆风

基于AI辅助的零代码基金工具微信小程序开发手记

一、项目起源：从一个刚需痛点开始

项目的起点，源于身边同事朋友的一个共同需求：各大平台陆续下架基金实时估值板块，日常看盘、调仓变得格外不便。

当时同事手里有可用的接口，但只能通过命令行操作，门槛高、体验差。笔者便萌生了一个想法：能不能做一个轻量化的前端页面，把接口能力封装成可视化、可交互的功能？最终敲定了以微信小程序为载体，既不用额外下载APP，也能最大程度降低用户的使用门槛。

二、全流程拆解：纯小白的自然语言开发路径

作为毫无开发经验的纯新手，笔者全程没有手动编写一行代码，全靠自然语言与AI对话，走完了从0到1的完整开发流程。

核心步骤如下：

流程节点极简说明

1. 接口采集：AI自动获取全网公开基金接口，同步纳入同事提供的现有接口
2. 接口质检：AI自动化完成全量接口测试，精准标记可用/作废接口
3. 文档输出：AI整理生成完整接口文档，同步附带全量测试结果
4. 需求输出：AI基于接口能力与核心需求，生成PRD产品需求文档
5. 前端产出：AI结合PRD与接口文档，生成前端页面渲染Demo
6. 联调打通：完成接口与前端页面的数据逻辑对接
7. 调试迭代：多轮测试、bug修复与功能、视觉优化
8. 完工上线：基础功能开发完成 → 代码打包上传

三、核心前置工作：接口的获取、测试与文档化

接口是整个小程序的核心数据来源，除了同事提供的接口，笔者全程借助AI完成了公开接口的全流程处理。

整个过程分为两步，结构化处理如下：

Step 1：接口资源采集通过豆包专家模式发起全网检索，精准梳理并汇总市面上公开可用的基金数据接口链接。Step 2：接口深度分析与文档化将所有接口导入Trae（Kimi 2.5模型），由AI完成全量接口的分析、可用性测试。

最终输出成果：生成完整的接口文档，清晰标注每一个接口的【测试结果、调用方式、可用字段】。

四、定好产品框架：AI生成轻量化PRD需求文档

有了接口基础，接下来就是明确产品的核心需求，笔者给AI的核心提示词如下：

帮我生成一个微信小程序的PRD文档，无需复杂功能，核心需求如下：

1. 具备基金搜索与自选功能

2. 可通过搜索找到目标基金，支持查看详情与添加自选

3. 必须包含历史业绩与实时估值两大核心模块，这是本项目的核心诉求

4. 所有数据均通过接口获取，具体可参考接口文档完成方案评估

AI最初给出的方案包含了数据库设计，与笔者轻量化、快速落地的初衷不符。于是笔者补充了需求：「如果优先考虑可行性与快速开发测试，主打免费且轻量化，应该选用什么样的架构？」

最终AI输出了一套完全符合预期的PRD方案。

核心框架

【架构与技术栈要求】

1. 采用微信原生开发框架（WXML, WXSS, JS），不使用任何云开发、云函数或自建后端服务器
2. 数据持久化：完全依赖小程序本地缓存，存储用户的自选基金代码列表
3. 数据请求：使用 wx.request 直接在前端调用公开HTTPS接口
4. 样式风格：参考主流金融APP规范，上涨为红色，下跌为绿色，字体清晰，排版简洁留白

【核心数据模型定义】在 utils/storage.js 中封装本地缓存逻辑，用户自选列表存储在Key为WATCH_LIST的缓存中，数据结构为极简字符串数组。

【API接口封装规范】要求在 utils/api.js 中统一封装接口，核心接口包含：

1. 获取全市场基金列表（用于搜索功能）
2. 批量获取自选列表实时行情（用于首页自选列表）
3. 获取单只基金历史净值（用于详情页折线图渲染）

【页面规划与任务分解】基于以上设定，拆解为四大开发任务，依次输出完整代码：

• Task 1：基础配置与工具类封装
• Task 2：首页（自选列表页面）开发
• Task 3：基金搜索页面开发
• Task 4：基金详情页面开发

（注：因详细代码占用篇幅过多，【API 接口封装规范】和【页面规划与任务分解】中AI生成的详细代码方案已省略）

这份PRD文档，笔者能看懂的逻辑部分均符合预期，看不懂的技术细节也无需深究——毕竟最终的代码实现依然交给AI完成。当然，如果有想要学习了解的技术点，随时可以让AI展开讲解，也是一个很好的学习过程。

五、自然语言编程：指哪打哪的调试与优化

有了完整的PRD文档与接口文档，笔者直接将两份文档导入Trae，交给Kimi 2.5完成代码开发与页面实现。

第一版开发完成后，基础功能已经初见雏形：

搜索界面1

搜索界面2

自选列表界面

但很快就遇到了第一个问题：基金详情页出现bug，历史走势数据无法正常加载渲染。

作为开发新手，笔者的解决方式也很简单直接——纯自然语言“指哪打哪”：直接把bug截图丢给AI，清晰描述问题现象，AI会自动完成代码排查、问题分析与修复，全程无需手动修改一行代码。经过几轮调试修复，历史走势功能成功落地。

但此时的功能仍有局限：仅支持近30天数据展示，且图表无交互功能。于是笔者再次向AI提出优化需求：

希望在详情页支持时间区间切换，包含近1个月、近3个月、近6个月、近1年、今年来、成立以来多个选项，切换选项时图表同步更新，默认展示近1个月走势；同时支持图表滑动交互，手指滑动时可同步显示对应日期的具体数据值。

AI很快给出了优化版本，但出现了新的问题：净值数值标签的提示框，会固定遮挡基金涨跌幅数据，无法跟随手指滑动同步移动。

笔者继续向AI描述问题、迭代调试，基本实现了核心功能，但依然存在一个棘手的瑕疵：基金详情页的历史净值走势图表，数值提示框被相关图层遮挡，无法很好的显示。

和Kimi 2.5进行了多轮沟通调试，都没能解决这个问题。最终笔者换用Claude处理，仅一两轮对话就完美修复了bug。

这里也给大家一个实用经验Tips：当用一个大模型卡在某个问题上迟迟无法解决时，不妨换一个大模型试试，往往会有意想不到的效果。

核心逻辑与全部bug修复完成后，笔者觉得Kimi提供的前端视觉效果并不理想，于是再次用Claude对页面细节、视觉效果进行了多轮优化。最终完成的版本，无论是功能完整性还是界面美观度，都基本符合笔者的预期，实测也未发现明显bug。

六、打包与上线：暂时止步内测的合规考量

笔者在微信开发者工具中把全部功能完成后，进行多轮功能调试、兼容性测试与真机调试，确认无异常后完成了代码打包与上传。按照微信小程序的官方发布流程，完成主体信息认证后即可提交审核、发布体验版。

但考虑到金融类小程序的合规性监管要求，目前项目仅停留在内部测试版本，暂未正式上线。后续有机会，同时条件成熟时，会争取正式上线。

七、开发心得：AI时代，人人都能做产品

这个项目全程都是笔者利用空闲时间完成的，无数据库的轻量化开发模式，对毫无开发经验的新手格外友好。整个过程中最深刻的感受是：AI极大地降低了开发的技术门槛，当一个大模型无法实现预期效果时，换一个大模型、组合使用多个模型的能力，往往能带来意想不到的突破与收获。

走完整个从0到1的流程，笔者最大的感悟是：在AI的加持下，未来或许真的能实现“人人都是产品经理、人人都是开发工程师”的理想状态。而这时候，一款产品的核心竞争力，将不再是代码能力（当然扎实的代码基础依然有不可替代的价值），而是设计者的产品思维、落地能力与需求转化能力——只有精准触达用户、读懂用户需求，才能做出真正被用户认可的产品。

最后，感谢大家耐心读到这里，也祝愿每一位读者，在AI时代下，都能借助AI的力量，开发出属于自己的、能解决日常痛点的实用小工具。

【风险提示】文中出现的具体基金代码，仅作为工具功能效果演示使用，不构成任何投资建议。市场有风险，投资需谨慎。