不懂代码也能开发？我用 AI 写了 4 万行代码，成功上线微信小程序！附：全过程

大家好！我是专注分享 AI 编程的瓜哥！

一个完全不懂代码的人，如何在AI的辅助下，完成微信小程序的开发并成功上线的？

今天，我就以刚上线的微信小程序（SciAnime - 奇幻动植球星球）为例，为大家拆解我是如何从零开始，一步步实现这个目标的。

【干货预警】

本文，3400 字，20 张图，内容非常硬核。梳理出七个关键环节，希望能让大家对整个流程有所了解。建议先关注，收藏后阅读！

超完整细节（含每一步截图），已打包放在飞书文档里，文末 免费领取！！

【省流版】

零代码开发并上线微信小程序 - 实战全流程

1. 项目概览与综述

1. 零基础开发的关键七步（域名/备案/云服务器/开发/上线）

1. 避坑与实战经验分享

1. 项目成功的知识技能树

一、项目概览

项目上线后，我统计了下代码量，这个看似不算复杂的项目，前后端加起来竟有 4万多 行代码，我自己都有点震惊！

1.1 AI编程工作量

1.2 按开发语言明细

#

二、零基础开发的关键七步

从域名申请到上线，以下是整个项目从筹备到上线的七个核心环节。

##

1. 域名购买与备案

在腾讯云/阿里云（域名服务商）购买域名，并完成实名认证和备案。推荐腾讯云，方便域名和后续的服务器统一管理。

###

1.1 什么是域名？

我们在浏览器里看到的 “https://www.baidu.com”，其实就是网站的 “地址”，专业名叫 URL（统一资源定位器），也就是咱们说的网址。

简单说，域名就像网站的 “身份证号 + 门牌号”，有了它，我们才能在茫茫互联网里准确找到想访问的网站～

###

1.2 域名名称的确定

域名长度：3-63个字符之间，仅由字母、连字符、数字组成。

• 与你的应用名称、用途强相关。（如汽车之家：autohome.com）

• 简单、好记（如QQ这个软件的域名是qq.com）

• 遵从法律要求，避免使用非法词汇

• 如强调个人品牌，用个人姓名或英文名字母也是个不错的选择

###

1.3 域名的备案

域名购买成功后，完成实名认证，且认证完成时间满 3 个自然日（一般1-3天），发起域名备案申请。

域名备案主流程

• 从腾讯云提交域名备案资料和申请

• 腾讯云进行资料和信息初步核对提交给工信部

• 工信部进行正式审核，一般1-3天

##

2. 云服务器购买

为后端服务运行准备，推荐选择腾讯云，主要优势：国内访问快，腾讯生态无缝整合。

这里有个小技巧可以帮大家省钱，大家在没注册云平台账号前，先去某宝找商家沟通下，一台云服务器至少能省几十块。

##

3.小程序注册与备案

2023年9月1日起，未备案小程序无法上架，这是必须要在上线前完成的重要步骤。

###

3.1 小程序注册

进入微信公众平台官网：https://mp.weixin.qq.com/ 右上角点击“立即注册”

###

3.2 小程序申请主流程

###

3.3 小程序备案

小程序想正式上架到微信，必须要完成小程序的备案申请。

###

3.4 微信认证

完成微信认证后，账号可获得“被搜索”和“被分享”能力。

##

##

4. 产品设计

SciAnime - 奇幻动植星球，是一款面向青少年和动植物爱好者的自然科学探索工具。致力于通过电影机的叙事和游戏化的互动，将科学知识转化为主动探索、沉浸其中的动植物乐园。

在动工前，最重要的一部是确定产品定位和功能设计，这里全程我都是跟AI（Gemini）讨论和确认。比如：

• 产品的定位

• 产品的功能规划

• 产品的差异性

• 产品的商业化

###

4.1 与AI讨论产品需求

• 沉浸式内容探索：首页采用横向卡片Feed流，提供流畅的探索体验

• 体系化的内容组织：发现页，用户可通过搜索、分类、专题和动态等不同方式，快速查找和浏览。

• 个人成就室：在“我的”页面，用户可以管理自己的收藏、回顾浏览历史，个人学习成果。

• 高质量的互动内容：所有动植物知识点通过精心设计的H5互动页面或视频进行呈现。

###

4.2 文档输出

产品需求文档（PRD）

产品定位、用户人群、产品设计、UI/UX线框图（如下图）和敏捷开发路线图。

开发环境与规范文档

项目的技术栈、服务器环境、部署流程、开发规范、bug修复经验沉淀等。

任务管理文档

Readme文档

##

5. 代码开发

进入实战环节，Cursor + Gemini 2.5 Pro 是我的AI编程 绝对主力，负责前端、后端和联调的所有代码编写。

前端功能的验证，我会在《微信开发工具》，后端CMS系统功能验证会在Chrome浏览器。

实战经验分享：就是当你用一种AI大模型反复多次都解决不了问题的时候，请尝试更换不同的AI大模型来解决，往往有奇效。

###

5.1 小程序前端开发

新建项目，目录导入《微信开发者》工具

同步将项目目录导入 Cursor

###

5.2 CMS后台开发

后端的开发也是由Cursor来完成，在本地负责代码开发，开发完成后给我上传文件到服务器的命令。

后台主要功能：

• 知识卡片，创建/编辑/删除

• 分类管理，内容的分类自定义管理

• 专题管理，支持后续内容专题的创建/编辑等管理操作

• 用户反馈，可随时接收和查看用户对小程序的吐槽和建议

• 基础功能，cms的基础页面，UI布局，账号管理，登入登出等

实战经验分享：针对后端服务器的变更一定要慎重。为了安全，我只让AI生成后端代码，而后端代码文件的上传、变更等均为我手动操作，防止因AI实物导致服务器崩溃。

###

5.3 前后端联调

一共涉及到10个API接口，包括用户认证、内容获取、用户数据三个部分。

在API服务的设计上，保持一个功能一个独立接口的方式，便于功能扩展和开发过程中的问题处理。

在调试过程中一个重要的经验就是，分段去定位问题，分为前端/后端API，通过会先检查后端API的服务状态是否正常，如请求和数据获取都没问题的情况下，在调试前端调用API的方式，逐步排查解决问题。

##

6. 内容生产

小程序的骨架已经搭建好了，接下来就是要填充内容的时候。正在我为内容发愁的时候，Sora 2来了。

###

6.1 视频脚本讨论

我会跟Gemini来讨论视频脚本，并且反复进行修改从而提升提示词的质量。

###

6.2 视频的生成

视频生成就比较简单了，可以让视频脚本分为2,3个段落分开生成，每次生成10秒内容，最后通过视频剪辑工具，将视频拼接在一起。

6.3 内容上传与发布

用AI开发了CMS后端，所以后续的内容上传、编辑不再依赖发版，而是可以独立进行操作，这是典型的代码功能与内容运营分离的方式。

#

7. 小程序上线

在本地测试通过后，通过微信开发工具上传代码

##

前往小程序后台，开发管理-服务器域名，完成域名配置

##

稍等微信数据同步，在微信里查看发布的小程序

##

到这里，就完成了整个小程序从0到上线的全流程。

四、踩坑经验分享

1. 不熟悉的技术慎用

刚开始为了省事，不想自建后端服务器，希望前段用AI编程工具搞定，后端直接用微信云函数。结果是由于对微信云开发和云函数完全不了解，导致项目后续出现问题后非常难进行排查。

最后痛定思痛，自建后端服务器，有AI生成后端代码，才将整个项目从失控的边缘拉了回来。

##

2. 缺规划想到哪干到哪

刚开始的时候有一个粗的产品文档，但随着项目的推荐，里面完全前期没有预想到细节，需要不停的做决策，比如选择方案A还是B，这个时候一定要先停下来思考下，如果拿不准建议跟AI进行讨论，让他告诉你不同的方案的优缺点，以及新增功能与原有功能如何进行融合。

##

3. 碰到死活都修不好的bug

在AI开发的过程中，一定会碰到有个bug，AI尝试了几十次死活都搞不定，这个时候我的经验是别死磕。 方法1：通过开新会话 - 让AI忘掉前面的上下文和记忆，重新分析问题，往往有奇效。 方法2：更换AI大模型或开发工具，比如我常用的Gemini 2.5 Pro作为我的主力开发工具，但是当Gemini死活搞不定的时候，我会尝试切换到Claude或gpt去解决，往往对于Gemini是一个无解的问题，在Claude或gpt里一把过。

#

五、知识技能树

如果你也想完整完成一个微信小程序项目的开发，至少需要具备的知识点：

由于所涉及的细节实在太多，很难在一篇文章中全部展开。本文更希望是分享项目整体的一个实现思路和关键步骤。