JavaScriptWeChat大前端
微信小程序从 0 到 1 开发部署上线全流程指南
微信小程序从 0 到 1 的开发与上线全流程。涵盖申请 AppID、搭建本地开发环境（微信开发者工具、VS Code）、前后端开发与测试（含内网穿透方案）、购买云服务器及域名备案、配置 HTTPS 证书、后端部署及提交审核发布。重点强调备案一致性、HTTPS 要求及常见避坑指南，帮助开发者完成从编码到上线的完整闭环。
微信小程序从 0 到 1 的开发与上线全流程。涵盖申请 AppID、搭建本地开发环境（微信开发者工具、VS Code）、前后端开发与测试（含内网穿透方案）、购买云服务器及域名备案、配置 HTTPS 证书、后端部署及提交审核发布。重点强调备案一致性、HTTPS 要求及常见避坑指南，帮助开发者完成从编码到上线的完整闭环。
本文将从申请小程序 AppID、本地开发、测试、购买服务器和域名、备案、部署上线等全流程展开，详细讲解每一步操作。
AppID 是什么？ 简单理解：它就是你这个小程序的 身份证号。以后无论是本地开发、上传代码、配置服务器，都要用到它。
建议：把 AppID 复制下来，保存在一个安全的地方，后面创建项目会用到。
接下来就是在你自己的电脑上搭建一个'实验室'：前端、后端、数据库都先跑在你的开发机上。
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装后桌面上会有一个图标。
作用主要有三点：
真正写代码的地方建议选 VS Code 或你习惯的其他 IDE。注意： 微信开发者工具更多是用来预览、调试和上传代码，不是主力写代码的编辑器。
你的前端代码、后端代码都可以放在同一项目里，用 VS Code 打开整个项目目录进行开发。
如果你的后端使用 SQL Server 作为数据库，可以借助 SSMS 进行图形化管理和查看数据。
下载地址：https://learn.microsoft.com/zh-cn/ssms/install/install
作用：
小结一句：微信开发者工具：看页面 + 调试 + 上传前端代码；VS Code：专门负责写代码（前端 + 后端）；SSMS：负责操作和查看数据库
打开微信开发者工具，选择「小程序」→「新建项目」。
主要需要填写几个关键项：
nail-service、miniprogram-1 等。点击「创建」之后，就会自动生成一套标准的小程序目录结构，例如：
miniprogram-1/
├─ app.js # 小程序入口 JS
├─ app.json # 全局配置
├─ app.wxss # 全局样式
└─ pages/
└─ index/
├─ index.wxml
├─ index.wxss
├─ index.js
└─ index.json
关键点：VS Code 和 微信开发者工具 打开的就是同一个文件夹。 你在 VS Code 中改完代码保存，切回微信开发者工具就会自动刷新，非常方便。
当你在本地开发完成一部分功能，就可以上传一次前端代码到微信公众平台。
在微信开发者工具右上角，能看到一个「上传」按钮。
上传流程：
0.0.1）和版本描述（如'完成首页基本布局'）。上传成功后，在微信公众平台 → 「版本管理」里，就可以看到对应版本的代码包。
重要提醒： 上传到微信平台的只有 前端代码那部分目录。所以创建项目时目录一定要选对，就是你存放小程序前端代码的那个文件夹。
在开发阶段，我们一般会把整体系统拆成三块：
wx.request 等方式调用后端接口，拿数据回来展示。整个本地开发时期的结构可以简单想象成：
微信开发者工具（前端） → 调用本机后端接口 → 本机数据库
测试环节的目标是：在正式上线前，把大部分问题尽量在'可控范围'内暴露出来。这里主要有两种方式，可以单独用，也可以搭配使用。
特点：简单方便，缺点是只能在开发电脑上进行，甲方无法验证。
http://localhost:5000/api/...http://127.0.0.1:8080/api/...优点：
缺点：
为了解决'甲方要看效果，却访问不到你本地服务'的问题，我们可以这么做：
这里用 NATapp 举例。
网址：https://natapp.cn/#download
大致步骤：
http://127.0.0.1:80808080），协议选择 HTTP。这样一来：
甲方就可以用他自己的手机实际操作小程序，使用到的是真正的业务逻辑和数据，非常适合验收前测试。
当测试版运行稳定、甲方认可后，就可以进入 上线准备阶段。
上线的核心就是：
把原来在你电脑上的'临时环境'，搬到一个 7×24 小时在线的 云服务器 上。
这里以阿里云为例，腾讯云、华为云等平台类似。
example.com、example.cn 等。api（最终效果是 api.example.com）这是很多人会踩的坑。需要完成的备案主要包括：
京 ICP 备 XXXXXXX 号。亲身教训： 在实际开发中，如果你 忘记给域名备案，或者备案信息前后不一致，就会导致前端虽然能访问小程序，但永远连不上后端接口。
务必牢记：
阿里云备案、微信小程序备案、工信部备案的主体信息要 完全一致，公司名称、地址、法人姓名等一个字都不能差，否则很容易审核失败。
微信小程序要求后台接口必须是 HTTPS 协议。
https://api.example.com 能正常访问。如果项目是长期运行的，建议后续考虑购买更长期的证书，避免频繁更换带来的风险。
https://api.example.com/api/... 正常访问。https://api.example.com（request 合法域名）从 0 到 1 把一个微信小程序做出来并上线，看起来步骤很多，但归纳下来其实就三大块：
你完全可以按本文的顺序，一步一步往下做：先跑通本地 Hello World，再慢慢加功能，最后完成服务器部署与上线。
当这个流程走完，你就不仅仅是'会写一点代码'，而是已经打通了 从开发到上线的完整闭环，下一次再做类似项目，你会快很多、稳很多。遇到问题可对照步骤排查，相信一定能把你的小程序顺利上线。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online