微信小程序从 0 到 1 开发部署全流程指南

安装后桌面上会多出一个这样的图标。

作用：

• 创建数据库、数据表
• 直观查看数据是否写入成功
• 执行 SQL 语句，方便调试和排查问题

小结一句：微信开发者工具：看页面 + 调试 + 上传前端代码；VS Code：专门负责写代码（前端 + 后端）；SSMS：负责操作和查看数据库

3.2 在微信开发者工具中新建小程序项目并关联 AppID

打开微信开发者工具，选择「小程序」→「新建项目」，会看到类似下面的界面。

主要需要填写几个关键项：

1. 项目名称：随便取个好记的名字，比如 nail-service、miniprogram-1 等。
2. 目录：选择你准备存放前端代码的那个文件夹。注意：要选到真正放代码的那一层目录，不要选外面上一层。
3. AppID：粘贴在微信公众平台中拿到的那个正式小程序的 AppID。如果只是玩玩，也可以选'测试号'，但建议尽量用正式号，避免后面迁移。
4. 开发模式：选「小程序」即可。
5. 模板选择：刚开始可以直接用官方的基础模板，里面自带一个 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 中改完代码保存，切回微信开发者工具就会自动刷新，非常方便。

3.3 上传前端代码到微信平台

当你在本地开发完成一部分功能，就可以上传一次前端代码到微信公众平台。

在微信开发者工具右上角，能看到一个「上传」按钮。

上传流程：

1. 点击「上传」。
2. 填写版本号（例如 0.0.1）和版本描述（如'完成首页基本布局'）。
3. 确认上传。

上传成功后，在微信公众平台 → 「版本管理」里，就可以看到对应版本的代码包。

重要提醒： 上传到微信平台的只有前端代码那部分目录。所以创建项目时目录一定要选对，就是你存放小程序前端代码的那个文件夹。

3.4 前端、后端、数据库的大致关系

在开发阶段，我们一般会把整体系统拆成三块：

• 前端（小程序）
  • 用 WXML + WXSS + JS 编写页面和逻辑。
  • 通过 wx.request 等方式调用后端接口，拿数据回来展示。
• 后端
  • 部署在你的电脑上（开发阶段）或云服务器上（上线阶段）。
  • 可以用 .NET / Java / Node.js / Python / PHP 等任意你熟悉的技术栈。
  • 提供 HTTP 接口，比如：
    • GET /api/orders 查询订单
    • POST /api/order 创建订单等。
• 数据库
  • 存放业务数据：用户、订单、商品、配置信息等等。
  • 开发阶段一般也在你本地机子上，配合 SSMS 查看和调试。

整个本地开发时期的结构可以简单想象成：

微信开发者工具（前端） → 调用本机后端接口 → 本机数据库

四、第三步：测试环节

测试环节的目标是：在正式上线前，把大部分问题尽量在'可控范围'内暴露出来。这里主要有两种方式，可以单独用，也可以搭配使用。

4.1 方式一：直接本地测试（适合自测）

特点：简单方便，缺点是只能在开发电脑上进行，甲方无法验证。

1. 前端在微信开发者工具里运行，点「编译」「预览」即可。
2. 后端服务 + 数据库都部署在本机：
   • 本地接口地址可能是 http://localhost:5000/api/...
   • 或 http://127.0.0.1:8080/api/...
3. 自己在开发电脑上把主要功能点走一遍，就能完成基本自测。

优点：

• 搭建成本极低，不需要额外花钱。
• 改一行代码立即重启、马上验证，非常高效。

缺点：

• 只能你自己测，甲方 / 测试同学 / 领导没法直接访问。
• 手机真机体验不方便，无法模拟复杂网络环境。

4.2 方式二：体验版 + NATapp 内网穿透（适合给甲方和测试同事用）

为了解决'甲方要看效果，却访问不到你本地服务'的问题，我们可以这么做：

1. 前端代码上传到微信公众平台，设为测试/体验版本；
2. 后端和数据库仍在你本地，通过内网穿透让外网能访问到你电脑。

这里用 NATapp 举例。

4.2.1 使用 NATapp 做内网穿透

网址：https://natapp.cn/#download

大致步骤：

1. 在 NATapp 官网注册账号，并购买一个隧道（测试用的一般十几块钱即可）。
2. 下载 NATapp 客户端，解压后配置：
   • 本地地址：你的后端服务地址，例如 http://127.0.0.1:8080
   • 或填写本地端口（如 8080），协议选择 HTTP。
3. 启动 NATapp，成功后会给你一个外网可访问的地址，比如：http://xxx.natapp.cc
4. 打开微信公众平台 → 「开发管理」→「开发设置」，把这个地址配置到 request 合法域名中。

4.2.2 配置体验版并添加测试成员

1. 在微信开发者工具里点击「上传」，提交一份前端代码。
2. 登录微信公众平台 → 「版本管理」：
   • 把刚上传的版本设置为体验版。
   • 添加甲方、测试同事为体验成员。
3. 系统会生成一个体验版二维码，测试成员用微信扫码即可打开小程序。

这样一来：

• 前端：跑在微信的服务器上（通过体验版访问）
• 后端 + 数据库：仍在你的电脑上
• NATapp：负责把外网的请求转发到你本机的后端服务

甲方就可以用他自己的手机实际操作小程序，使用到的是真正的业务逻辑和数据，非常适合验收前测试。

五、第四步：上线前的准备工作

当测试版运行稳定、甲方认可后，就可以进入上线准备阶段。

上线的核心就是：

把原来在你电脑上的'临时环境'，搬到一个 7×24 小时在线的云服务器上。

5.1 购买服务器与域名

这里以阿里云为例，腾讯云、华为云等平台类似。

1. 购买云服务器（ECS）

• 操作系统选 Windows / Linux 均可，根据你后端技术栈决定。
• 配置上，小项目一般 2 核 4G 就能跑起来，后续可以按需升级。

2. 购买域名

• 比如：example.com、example.cn 等。
• 建议选好记、和项目相关的名称。

3. 域名解析到服务器

• 在阿里云控制台 → 域名解析中，添加一条记录：
  • 记录类型：A 记录
  • 主机记录：api（最终效果是 api.example.com）
  • 记录值：你的云服务器公网 IP

5.2 三个备案要一模一样

这是很多人会踩的坑。需要完成的备案主要包括：

1. 阿里云备案
   • 在阿里云备案系统中，填写主体信息（公司 / 个人）和网站信息。
   • 提交资料、等待审核。
2. 微信小程序备案
   • 在微信公众平台后台有小程序备案入口。
   • 要求填写的主体信息必须与云服务商备案的一致。
3. 工信部备案（ICP 备案）
   • 实际上通过阿里云备案最终都是走工信部系统。
   • 备案成功后会拿到备案号，如：京 ICP 备 XXXXXXX 号。

常见错误： 在实际开发中，如果你忘记给域名备案，或者备案信息前后不一致，就会导致前端虽然能访问小程序，但永远连不上后端接口。排查很久才发现问题出在这一步。

务必牢记：

阿里云备案、微信小程序备案、工信部备案的主体信息要完全一致，公司名称、地址、法人姓名等一个字都不能差，否则很容易审核失败。

5.3 HTTPS 数字证书（必做）

微信小程序要求后台接口必须是 HTTPS 协议。

1. 在阿里云证书服务中申请免费的 SSL 证书：
   • 对于一般小项目，免费证书就足够了，有效期通常为 3 个月。
2. 证书签发后，下载对应服务器类型的证书文件：
   • 如果你用的是 Nginx，就下载 Nginx 版本；
   • 用 IIS 就下载 IIS 版本。
3. 在服务器上配置证书：
   • 对应 Nginx / IIS 文档把证书配置上；
   • 确保 https://api.example.com 能正常访问。

如果项目是长期运行的，建议后续考虑购买更长期的证书，避免频繁更换带来的风险。

六、第五步：部署后端并发布小程序

6.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 合法域名）
• 提交后，记得在小程序中修改接口地址为正式域名。

6.2 上传前端体验版 → 提交审核 → 正式发布

1. 确认前端代码中的接口地址已经改成正式服务器域名。
2. 在微信开发者工具中点击右上角「上传」，填写版本号和描述，将一份新的代码包上传到微信公众平台。
3. 登录微信公众平台：
   • 在「版本管理」中选择刚上传的版本。
   • 填写小程序介绍、使用说明、类目等信息。
   • 点击「提交审核」。
4. 等待审核结果：
   • 审核通过后，在「版本管理」中把该版本发布为线上版本。
   • 至此，小程序就正式对所有用户开放了。

七、常见坑与避坑指南

1. AppID 填错 / 使用了测试号
   • 创建项目时一定要确定使用的是正式小程序的 AppID，而不是测试号，否则后面切换会很麻烦。
2. 项目目录选错层级
   • 微信开发者工具中新建项目时，目录要选到真正小程序代码的那一层文件夹，否则会出现无法上传、路径混乱等情况。
3. 接口域名没配置或没备案
   • 小程序如果提示网络请求失败，优先检查：
     • 是否使用 HTTPS；
     • 域名是否已经配置在'request 合法域名'中；
     • 域名是否完成备案。
4. 三项备案信息不一致
   • 阿里云备案信息、微信小程序备案信息、工信部备案信息一定要保持一致，哪怕是一个字的差别都可能导致失败。
5. 证书过期导致接口全部失效
   • 免费证书往往只有 3 个月有效期，到期前一定要续期并更新配置，否则小程序会突然全部请求失败。
6. 忽略测试环境和正式环境的区分
   • 建议保留一个测试环境（可以继续用 NATapp + 本地服务），不要在生产环境上随意试验新功能。

八、结语

从 0 到 1 把一个微信小程序做出来并上线，看起来步骤很多，但归纳下来其实就三大块：

1. 微信侧：申请小程序、获取 AppID、上传前端代码、提交审核；
2. 本地开发侧：搭建开发环境（微信开发者工具 + VS Code + 数据库）、完成前后端与数据库的编码和测试；
3. 服务器侧：购买服务器和域名、办理各项备案、申请 HTTPS 证书、部署后端并配置域名。

你完全可以按本文的顺序，一步一步往下做：先跑通本地 Hello World，再慢慢加功能，最后完成服务器部署与上线。

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

遇到问题可对照此流程逐个排查，相信一定能把你的小程序顺利上线。