当前位置：首页>小程序源码>(2)5 天从 0 到小程序上线:零代码基础小白的微信小程序开发全流程实操指南

(2)5 天从 0 到小程序上线:零代码基础小白的微信小程序开发全流程实操指南

2026-06-24 23:39:49

大家好，我是哈哈姐！一个专注于挖掘适合普通上班族副业项目的分享者！关注我，我们一起攒 500 万养老金。🥹🤗

我们接着上一篇内容：（1）5 天从 0 到小程序上线：零代码基础小白的微信小程序开发全流程实操指南

这篇着重手把手详细讲解具体开发步骤。

二）开发流程（建议按手册逐步操作）

1. 注册账号和注册备案

1）注册账号：先在微信公众平台注册一个小程序账号（10 分钟左右）

打开 https://mp.weixin.qq.com/,

点击右上角[立即注册]，然后选择[小程序]。进入小程序注册页面后填写信息，选择小程序类目[其他]，主体类型[个人]，并登记你的个人信息，然后按提示完善小程序信息和类目即可。

2）提交备案：上传身份信息，等微信和工信部审核（填表 10 分钟，审核 3-7 个工作日）

建议还没想好要做什么小程序的就先不要做备案！确定要备案了，可以按下面流程操作：

第1步：登录微信公众平台（mp.weixin.qq.com）
第 2 步：在首页可以看到，去备案的按钮提示。
第 3 步：点击「去备案」
第 4 步：填写主办者信息主办者名称（你的姓名/企业名称）、证件号码（身份证号/统一社会信用代码）、通信地址（按身份证上的地址填）、联系电话（能接到回访电话的手机号！）、联系邮箱、上传证件照片
第 5 步：填写小程序服务信息小程序名称、服务内容简述（一两句话说清楚做什么）、服务类目、前置审批信息（工具类通常选“无”）
第 6 步：负责人信息验证管理员微信扫码、人脸识别（手机上对着摄像头眨眨眼就行）
第 7 步：确认信息无误，点击「提交审核」

备案过程可能会接到微信平台打来电话，备案通过后会发一条备案已变更的短信给你，等待备案通过时间约 3-15 个工作日。如果有不通过的，那就按平台要求修改就好了。

3）完成认证：支付 30 元认证费，拿到认证标识。（5 分钟左右）

认证步骤：
1.登录微信公众平台
2.在左侧菜单找到「设置」
3.找到「基本设置」里的「微信认证」
4.点击「去认证」或「详情」
5.按提示填写资料、上传证件
6.支付 30 元认证费（微信支付）
7.等待审核认证审核一般比备案快，通常 1-3 个工作日就能通过。有时候甚至当天就过了。我建议注册完账号以后，备案和认证同时提交。备案等 3-7 天，认证可能 2 天就过了。两边不冲突，同时走能节省时间。

注意：

1. 审核需要时间，但我们不必干等，可以趁这几天安装好工具、学开发、完善选题。

2. 注册时主体类型有个人、个体工商户、企业。新手建议选个人（认证费 30 元/年，一张身份证可注册 5 个小程序，但不能做付费/订阅变现）；如果你明确要做付费产品，那需要办理营业执照，然后直接选企业或个体户主体。

3. 注册个人主体的，建议注册一个新的邮箱来使用。

2.开发实操

1）步骤 1：TRAE 的安装和注册

打开 TRAE 官网：https://www.trae.cn/，点击右上角的下载 TRAE IDE

然后根据自己电脑系统选择合适版本下载并安装

安装完成后，会出现这个页面，直接点「开始」

然后出现下面这个页面，我们可以选择「跳过」

然后我们选择个人用户，来登录账号

可能会弹出一个「欢迎体验 SOLO」模式的提示，点击立即体验后会进入 S0L0 模式，这个模式对我们新手小白来说特别友好，因为不需要去管具体的代码了，只需要专注需求就好。SOLO 模式也可以在左上角退出。

配置模型时建议先把 AutoMode（自动模式）关闭掉。

接下来我们还需要配置一下大模型，推荐使用 Kimi-K2.5。Kimi-K2.5 和 GLM-5V-Turbo 这两个模型支持阅读图片，其他模型不支持。建议以 Kimi-K2.5 作为主力，遇到这个模型难以解决的问题时，再切换到其他模型。

2）步骤 2：安装微信开发者工具

下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完成后扫码登录一下，就会进入这个界面

现在我们两个软件安装成功了。在我们的小程序开发中，这两个工具是相辅相成的。TRAE 主要负责把我们的需求翻译成小程序的代码，而微信开发者工具打开同一个文件夹后，把这个代码变成可视化的界面，供我们查看实时效果。

3）步骤 3：跟 TRAE 说需求

我最开始先跟 DeepSeek 对话确定所有我想要的功能，并让其整理成完整的提示词，再直接发给 Trae。提示词模板如下：

下面是 DeepSeek 整理出我想要的小程序的所有功能

“体重记录神器·哈哈版” 设计框架

【一句话说清楚做什么】设定减重/增重目标，记录每日体重，自动生成变化曲线与目标进度，轻松掌控每一步

【首页是什么样的】首页采用简洁活泼的卡片式布局，主色调荧光绿（#00E5A0）。顶部显示小程序名称和欢迎语；**目标进度条**放在显眼位置（体重数字上方），显示“距目标还差 X.X kg”及进度百分比；中部 C 位超大数字体重面板，显示最近一次体重；体重数字下方显示“较上次变化（↑/↓ X kg）”和“与目标差距”；面板下方是荧光绿“➕ 记录”大按钮；再往下是体重变化曲线图（支持 7 天/30 天/全部切换）；底部 Tab 栏分为“首页”和“记录”两个入口。

📌 高点击率要点：目标进度条让用户每次打开都有“还差多少就能达成”的心理暗示，显著提升打开率和记录频率。

【操作 1】快速记录体重点击首页荧光绿“➕ 记录”按钮，弹出半屏数字键盘，输入体重值（支持小数点），系统自动记录当天日期，保存后首页体重数字、变化差值、目标差距、进度条全部实时更新。支持长按体重数字编辑已有记录。

【操作 2】查看体重变化曲线图首页曲线图展示体重走势，荧光绿描点，横轴日期纵轴体重。顶部提供“7 天/30 天/全部”切换。曲线图上可叠加显示**目标线**（虚线表示目标体重），让用户直观看到当前曲线与目标的距离。

【操作 3】管理历史记录清单底部“记录”页面，按日期倒序列出所有记录，每条显示“日期 + 体重 + 较上次变化”。支持编辑、删除（二次确认）。顶部显示总记录次数、初始体重、当前目标体重。

【操作 4】设置与查看目标体重- **入口位置**：首页顶部（欢迎语旁边）或体重数字卡片右上角放一个“🎯 设目标”小图标。- **操作方式**：点击后弹出半屏设置面板，输入目标体重（如 60kg），选择目标是“减重”（体重需低于当前）还是“增重”（体重需高于当前），保存。- **展示效果**：保存后，首页出现目标进度条（荧光绿填充百分比），并显示“还差 X.X kg 达成目标”或“已超额完成！”. 用户可随时修改目标。

📌 高点击率要点：目标设置是驱动用户持续记录的核心引擎。很多成功健康类小程序（如“目标体重助手”）都把这个功能放在最显眼位置。

【技术实现提醒】
- 数据存储：用` wx.setStorageSync `存储一个对象，包含 `records` 数组（每条记录有 date， weight）和 `target` 对象（value， mode）。
- 目标进度计算：根据最新体重与目标体重的差值，以及目标是减/增，计算出进度百分比（例如减重：进度 = （初始体重-当前体重）/（初始体重-目标体重） * 100%，注意边界）。
- 曲线图绘制：使用 `echarts-for-wechat `或原生 canvas，添加一条目标线（恒定值）。