微信小程序从 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，再慢慢加功能，最后完成服务器部署与上线。

当这个流程走完，你就不仅仅是 “会写一点代码”，而是已经打通了 从开发到上线的完整闭环，下一次再做类似项目，你会快很多、稳很多。

如果你在实践中遇到具体问题，可以在对应步骤回头对照这篇笔记，逐个排查，相信一定能把你的小程序顺利上线。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/weixin_66039060/article/details/156063073