微信小程序从 0-1：从本地开发到部署服务器上线整体流程保姆式教学
适合人群：0 基础 / 刚接触小程序开发，希望能从 “我只是会写点代码” 走到 “我能把小程序真正上线给甲方用”。
本文将从 申请小程序 AppID → 本地开发 → 测试 → 购买服务器和域名 → 各种备案 → 部署上线 全流程展开，用尽量不那么专业、但足够详细的方式，一步一步带你走完。
一、整体流程一张图
先给你心里有个全貌，后面再一节一节拆开。
-
在微信公众平台注册小程序，获取 AppID
-
搭建本地开发环境（微信开发者工具 + VS Code + 数据库工具）
-
开发前端页面、后端接口、数据库
-
本地测试 / 体验版测试（配合 NATapp 内网穿透）
-
购买云服务器、域名，完成各项备案与 HTTPS 数字证书
-
部署后端到服务器，配置域名与合法请求域名
-
上传前端代码、提交审核、发布上线
二、第一步：在微信公众平台申请小程序 AppID
网址：https://mp.weixin.qq.com/
-
打开微信公众平台，用微信扫码登录。
-
在首页选择 「小程序」 模块，按流程创建一个新的小程序。
-
填写：
-
小程序名称
-
选择主体（个人 / 企业 / 组织）
-
绑定邮箱、管理员信息等
-
-
创建完成后，在左侧进入 「开发管理」→「开发设置」，可以看到该小程序的 AppID。
示意界面如下：
AppID 是什么？ 简单理解：它就是你这个小程序的 身份证号。以后无论是本地开发、上传代码、配置服务器，都要用到它。
建议： 把 AppID 复制下来，保存在一个安全的地方，后面创建项目会用到。
三、第二步：本地开发环境搭建
接下来就是在你自己的电脑上搭建一个 “实验室”： 前端、后端、数据库都先跑在你的开发机上。
2.1 安装必备工具
1. 微信开发者工具（前端预览与上传工具）
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装后桌面上会有一个图标，类似下面这样：
作用主要有三点：
-
预览小程序界面、模拟手机操作
-
调试前端代码（看日志、看网络请求等）
-
上传前端代码到微信公众平台
2. 代码编辑器（推荐 VS Code）
真正写代码的地方建议选 VS Code 或你习惯的其他 IDE。 注意： 微信开发者工具更多是用来预览、调试和上传代码，不是主力写代码的编辑器。
你的前端代码、后端代码都可以放在同一项目里，用 VS Code 打开整个项目目录进行开发。
3. 数据库工具：SSMS（SQL Server Management Studio）
如果你的后端使用 SQL Server 作为数据库，可以借助 SSMS 进行图形化管理和查看数据。
下载地址：https://learn.microsoft.com/zh-cn/ssms/install/install
安装后桌面上会多出一个这样的图标（对应第 2 张图）：
作用：
-
创建数据库、数据表
-
直观查看数据是否写入成功
-
执行 SQL 语句，方便调试和排查问题
小结一句：
微信开发者工具：看页面 + 调试 + 上传前端代码
VS Code：专门负责写代码（前端 + 后端）
SSMS：负责操作和查看数据库
2.2 在微信开发者工具中新建小程序项目并关联 AppID
打开微信开发者工具，选择 「小程序」 → 「新建项目」，会看到类似下面的界面（对应第 4 张图）：
主要需要填写几个关键项：
-
项目名称
-
随便取个好记的名字，比如
nail-service、miniprogram-1等。
-
-
目录
-
选择你准备存放前端代码的那个文件夹。
-
注意：要选到真正放代码的那一层目录，不要选外面上一层。
-
-
AppID
-
粘贴在微信公众平台中拿到的那个 正式小程序的 AppID。
-
如果只是玩玩，也可以选 “测试号”，但建议尽量用正式号，避免后面迁移。
-
-
开发模式
-
选「小程序」即可。
-
-
模板选择
-
刚开始可以直接用官方的 基础模板，里面自带一个 Hello World 页面。
-
点击「创建」之后，就会自动生成一套标准的小程序目录结构，例如：
miniprogram-1/ ├─ app.js # 小程序入口 JS ├─ app.json # 全局配置 ├─ app.wxss # 全局样式 ├─ pages/ │ ├─ index/ │ │ ├─ index.wxml │ │ ├─ index.wxss │ │ ├─ index.js │ │ └─ index.json │ └─ ... └─ ...
关键点：VS Code 和 微信开发者工具 打开的就是同一个文件夹。 你在 VS Code 中改完代码保存，切回微信开发者工具就会自动刷新，非常方便。
2.3 上传前端代码到微信平台
当你在本地开发完成一部分功能，就可以上传一次前端代码到微信公众平台。
在微信开发者工具右上角，能看到一个「上传」按钮（对应第 5 张图）：
上传流程：
-
点击「上传」。
-
填写版本号（例如
0.0.1）和版本描述（如 “完成首页基本布局”）。 -
确认上传。
上传成功后，在微信公众平台 → 「版本管理」里，就可以看到对应版本的代码包。
重要提醒： 上传到微信平台的只有 前端代码那部分目录。 所以创建项目时目录一定要选对，就是你存放小程序前端代码的那个文件夹。
2.4 前端、后端、数据库的大致关系
在开发阶段，我们一般会把整体系统拆成三块：
-
前端（小程序）
-
用 WXML + WXSS + JS 编写页面和逻辑。
-
通过
wx.request等方式调用后端接口，拿数据回来展示。
-
-
后端
-
部署在你的电脑上（开发阶段）或云服务器上（上线阶段）。
-
可以用 .NET / Java / Node.js / Python / PHP 等任意你熟悉的技术栈。
-
提供 HTTP 接口，比如：
-
GET /api/orders查询订单 -
POST /api/order创建订单等。
-
-
-
数据库
-
存放业务数据：用户、订单、商品、配置信息等等。
-
开发阶段一般也在你本地机子上，配合 SSMS 查看和调试。
-
整个本地开发时期的结构可以简单想象成：
微信开发者工具（前端） → 调用本机后端接口 → 本机数据库
四、第三步：测试环节
测试环节的目标是：在正式上线前，把大部分问题尽量在 “可控范围” 内暴露出来。 这里主要有两种方式，可以单独用，也可以搭配使用。
3.1 方式一：直接本地测试（适合自测）
特点：简单方便，缺点是只能在开发电脑上进行，甲方无法验证。
-
前端在微信开发者工具里运行，点「编译」「预览」即可。
-
后端服务 + 数据库都部署在本机：
-
本地接口地址可能是
http://localhost:5000/api/... -
或
http://127.0.0.1:8080/api/...
-
-
自己在开发电脑上把主要功能点走一遍，就能完成基本自测。
优点：
-
搭建成本极低，不需要额外花钱。
-
改一行代码立即重启、马上验证，非常高效。
缺点：
-
只能你自己测，甲方 / 测试同学 / 领导没法直接访问。
-
手机真机体验不方便，无法模拟复杂网络环境。
3.2 方式二：体验版 + NATapp 内网穿透（适合给甲方和测试同事用）
为了解决 “甲方要看效果，却访问不到你本地服务” 的问题，我们可以这么做：
-
前端代码上传到微信公众平台，设为测试/体验版本；
-
后端和数据库仍在你本地，通过内网穿透让外网能访问到你电脑。
这里用 NATapp 举例。
3.2.1 使用 NATapp 做内网穿透
网址：https://natapp.cn/#download
大致步骤：
-
在 NATapp 官网注册账号，并购买一个隧道（测试用的一般十几块钱即可）。
-
下载 NATapp 客户端，解压后配置：
-
本地地址：你的后端服务地址，例如
http://127.0.0.1:8080 -
或填写本地端口（如
8080），协议选择 HTTP。
-
-
启动 NATapp，成功后会给你一个外网可访问的地址，比如：
http://xxx.natapp.cc
-
打开微信公众平台 → 「开发管理」→「开发设置」，把这个地址配置到 request 合法域名 中。
3.2.2 配置体验版并添加测试成员
-
在微信开发者工具里点击「上传」，提交一份前端代码。
-
登录微信公众平台 → 「版本管理」：
-
把刚上传的版本设置为 体验版。
-
添加甲方、测试同事为 体验成员。
-
-
系统会生成一个体验版二维码，测试成员用微信扫码即可打开小程序。
这样一来：
-
前端：跑在微信的服务器上（通过体验版访问）
-
后端 + 数据库：仍在你的电脑上
-
NATapp：负责把外网的请求转发到你本机的后端服务
甲方就可以用他自己的手机实际操作小程序，使用到的是真正的业务逻辑和数据，非常适合验收前测试。
五、第四步：上线前的准备工作
当测试版运行稳定、甲方认可后，就可以进入 上线准备阶段。
上线的核心就是：
把原来在你电脑上的“临时环境”，搬到一个 7×24 小时在线的 云服务器 上。
4.1 购买服务器与域名
这里以阿里云为例，腾讯云、华为云等平台类似。
1. 购买云服务器（ECS）
-
操作系统选 Windows / Linux 均可，根据你后端技术栈决定。
-
配置上，小项目一般 2 核 4G 就能跑起来，后续可以按需升级。
2. 购买域名
-
比如：
example.com、example.cn等。 -
建议选好记、和项目相关的名称。
3. 域名解析到服务器
-
在阿里云控制台 → 域名解析中，添加一条记录：
-
记录类型：A 记录
-
主机记录：
api（最终效果是api.example.com） -
记录值：你的云服务器公网 IP
-
4.2 三个备案要一模一样
这是很多人会踩的坑。需要完成的备案主要包括：
-
阿里云备案
-
在阿里云备案系统中，填写主体信息（公司 / 个人）和网站信息。
-
提交资料、等待审核。
-
-
微信小程序备案
-
在微信公众平台后台有小程序备案入口。
-
要求填写的主体信息必须与云服务商备案的一致。
-
-
工信部备案（ICP 备案）
-
实际上通过阿里云备案最终都是走工信部系统。
-
备案成功后会拿到备案号，如：
京ICP备XXXXXXX号。
-
亲身教训： 在实际开发中，如果你 忘记给域名备案，或者备案信息前后不一致，就会导致前端虽然能访问小程序，但永远连不上后端接口。 我自己就因为没及时对购买的域名进行备案，导致前后端交互始终不通，排查很久才发现问题出在这一步。
务必牢记：
阿里云备案、微信小程序备案、工信部备案的主体信息要 完全一致， 公司名称、地址、法人姓名等一个字都不能差，否则很容易审核失败。
4.3 HTTPS 数字证书（必做）
微信小程序要求后台接口必须是 HTTPS 协议。
-
在阿里云证书服务中申请免费的 SSL 证书：
-
对于一般小项目，免费证书就足够了，有效期通常为 3 个月。
-
-
证书签发后，下载对应服务器类型的证书文件：
-
如果你用的是 Nginx，就下载 Nginx 版本；
-
用 IIS 就下载 IIS 版本。
-
-
在服务器上配置证书：
-
对应 Nginx / IIS 文档把证书配置上；
-
确保
https://api.example.com能正常访问。
-
如果项目是长期运行的，建议后续考虑购买更长期的证书，避免频繁更换带来的风险。
六、第五步：部署后端并发布小程序
5.1 在服务器上部署后端 & 数据库
1. 搭建运行环境
-
根据后端技术栈安装相应的运行环境：
-
.NET 运行时 / SDK
-
JDK
-
Node.js
-
Python 等等
-
2. 部署后端程序
-
将本地开发好的后端代码打包（或编译成可执行文件），通过远程桌面 / SFTP / 宝塔面板等工具上传到服务器。
-
在服务器上启动后端服务，确保可以通过
https://api.example.com/api/...正常访问。
3. 部署数据库
-
小项目可以直接把数据库也放在同一台服务器上：
-
在服务器安装 SQL Server（或其他数据库）。
-
本地数据库备份后上传到服务器，进行还原。
-
-
大项目可以考虑单独使用云数据库服务（例如 RDS），这里不展开。
4. 在微信小程序后台配置服务器域名
-
进入微信公众平台 → 「开发管理」→「开发设置」
-
在「服务器域名」处填写：
-
https://api.example.com（request 合法域名）
-
-
提交后，记得在小程序中修改接口地址为正式域名。
5.2 上传前端体验版 → 提交审核 → 正式发布
-
确认前端代码中的接口地址已经改成 正式服务器域名。
-
在微信开发者工具中点击右上角「上传」，填写版本号和描述，将一份新的代码包上传到微信公众平台。
-
登录微信公众平台：
-
在「版本管理」中选择刚上传的版本。
-
填写小程序介绍、使用说明、类目等信息。
-
点击「提交审核」。
-
-
等待审核结果：
-
审核通过后，在「版本管理」中把该版本发布为 线上版本。
-
至此，小程序就正式对所有用户开放了。
-
七、常见坑与避坑指南
-
AppID 填错 / 使用了测试号
-
创建项目时一定要确定使用的是正式小程序的 AppID，而不是测试号，否则后面切换会很麻烦。
-
-
项目目录选错层级
-
微信开发者工具中新建项目时，目录要选到真正小程序代码的那一层文件夹，否则会出现无法上传、路径混乱等情况。
-
-
接口域名没配置或没备案
-
小程序如果提示网络请求失败，优先检查：
-
是否使用 HTTPS；
-
域名是否已经配置在 “request 合法域名” 中；
-
域名是否完成备案。
-
-
-
三项备案信息不一致
-
阿里云备案信息、微信小程序备案信息、工信部备案信息一定要保持一致，哪怕是一个字的差别都可能导致失败。
-
-
证书过期导致接口全部失效
-
免费证书往往只有 3 个月有效期，到期前一定要续期并更新配置，否则小程序会突然全部请求失败。
-
-
忽略测试环境和正式环境的区分
-
建议保留一个测试环境（可以继续用 NATapp + 本地服务），不要在生产环境上随意试验新功能。
-
八、结语
从 0 到 1 把一个微信小程序做出来并上线，看起来步骤很多，但归纳下来其实就三大块：
-
微信侧：申请小程序、获取 AppID、上传前端代码、提交审核；
-
本地开发侧：搭建开发环境（微信开发者工具 + VS Code + 数据库）、完成前后端与数据库的编码和测试；
-
服务器侧：购买服务器和域名、办理各项备案、申请 HTTPS 证书、部署后端并配置域名。
你完全可以按本文的顺序，一步一步往下做： 先跑通本地 Hello World，再慢慢加功能，最后完成服务器部署与上线。
当这个流程走完，你就不仅仅是 “会写一点代码”，而是已经打通了 从开发到上线的完整闭环，下一次再做类似项目，你会快很多、稳很多。
如果你在实践中遇到具体问题，可以在对应步骤回头对照这篇笔记，逐个排查，相信一定能把你的小程序顺利上线。
