手把手教你搭建微信小程序：从 0 到 1 的奇妙冒险_微信 小程序 原生开发 详细教程
嘿，各位小伙伴！是不是看着别人的微信小程序玩得飞起，心里痒痒的，也想搞一个属于自己的小程序呢？别担心，今天就跟着我，一步一步揭开微信小程序前端及后台部署搭建的神秘面纱，就算你是个编程小白，也能轻松上手，让你的小程序梦想照进现实！
一、前期准备：开启冒险之旅前的装备收集
（一）硬件与软件
搭建小程序，你只需要一台电脑就行，对电脑配置没啥特殊要求，就像你玩个普通小游戏一样，能带动就行。当然，你还得准备好微信开发者工具，这可是我们开发小程序的 “秘密武器”，从微信官方网站就能轻松下载。
（二）费用小清单
- 服务器购买：这就好比你要给小程序找个 “家”，推荐腾讯云或者阿里云。咱去腾讯云官网溜达溜达（阿里云也可以哦），先免费注册再实名认证，然后一头扎进活动专场，挑选一个性价比高的轻量应用服务器。像 2 核 2G3M 或 2 核 2G4M 这种配置就挺不错，价格通常 100 元以内就能搞定。注意啦，时长选 “自购买 1 年内有效”，然后点击购买。在配置选择页面，“地域” 随便挑一个你喜欢的地方（反正小程序也不会挑剔），“镜像” 选择 “CentOS Stream 8”，最后点击 “立即购买”，你的小程序 “家” 就有啦！
- 域名注册：域名就像是你小程序的门牌号，得让人能找到它。在腾讯云控制台下方搜索 “域名注册”，进入域名管理后台。先创建一个域名信息模板，把相关信息填好提交审核。接着注册一个域名，格式大概像 XXXX.YY，推荐买.cn 类型的，价格嘛，大约 20 元左右。不过要注意，域名注册后得备案，这就像给房子办房产证一样。登录腾讯云官网找到备案入口，按指引填好信息提交审核，审核时间一般 2 - 3 天。要是等不及，也可以联系我先拿个已备案的域名练练手。
- 小程序认证（可选）：如果你想开通线上支付功能，那就得给小程序认证。个体工商户认证费用 30 元，企业的话要 300 元。这就好比给你的小店办个营业执照，有了它才能合法收钱嘛。
二、后端搭建：打造小程序的 “智慧大脑”
（一）服务器配置
- 咱们在腾讯云官网首页右上角进入 “控制台”，找到刚买的服务器点击进去。
- 放行端口，这一步很关键哦，就像打开房子的窗户让空气流通一样。我们要开放 3306（数据库端口）和 8888（宝塔面板端口）。
- 重置服务器密码，密码得复杂点，包含大写、小写、数字或符号中的至少三项，记好这个密码，它可是你进入服务器 “房子” 的钥匙。
（二）宝塔面板安装
- 打开浏览器搜索 “宝塔面板”，进入官网点击 “立即免费安装”。
- 选择 Linux 面板在线安装，按照提示一步步来，安装完成后，你会得到宝塔面板的网址、账号和密码，这就是你管理服务器的 “魔法钥匙”，登录宝塔面板，准备开启搭建之旅。
（三）域名解析
- 回到腾讯云官网首页右上角的 “控制台”，点击 “域名注册” 进入面板。
- 找到 “我的域名”，点击 “解析”，添加一个二级域名，这就好比给你的房子在小区里设置一个更详细的门牌号。
（四）新建站点
- 登录宝塔面板，在左侧导航找到 “软件商店”，安装数据库 5.6 和 PHP7.4 版本，这两个就像是给房子装修时的必备材料。
- 同时在 PHP 中安装拓展 fileinfo redis，让你的 “房子” 功能更强大。
- 在宝塔面板点击 “网站”，选择 “添加站点”，把刚才解析的二级域名填进去。
（五）上传后端源码
- 点击网站根目录，把默认文件删除，就像清理房子里原来的杂物。
- 在根目录下点击 “上传”，选择后端源码文件，上传后解压，这样你的小程序 “智慧大脑” 的核心部分就放进去啦。
（六）设置运行目录
- 在左边导航点击 “网站”，再点击二级域名。
- 点击 “网站目录”，将 “运行目录” 设置为 “/public”，然后保存，这一步是告诉小程序从哪里开始运行它的 “大脑程序”。
（七）申请 SSL 证书
- 在宝塔面板左侧点击 “网站”，再点击二级域名。
- 点击 “SSL”，选择 “Let’ Encrypt”，申请成功后勾选 “强制 HTTPS”，然后保存。这就像给你的房子加上一把高级锁，保证数据传输安全。
（八）后台程序安装
- 获取数据库名、用户名和密码后，开始后台安装。
- 在后台安装页面填写数据库信息，点击 “开始安装”。安装成功后，你就可以进入后台管理界面，像个设计师一样进行店铺装修、商品上架等设置啦。
三、后台配置：让小程序 “大脑” 与外界顺畅沟通
（一）合法域名设置
- 登录微信公众平台，在左侧导航栏点击 “开发管理”。
- 找到服务器域名，把你自己的二级域名填进去，这就像是告诉小程序只能和这个 “门牌号” 的服务器交流。
（二）小程序 Appid 和密钥
- 在 “微信公众平台” 左侧导航栏点击 “开发管理”，能看到小程序的 Appid，这就好比小程序的身份证号。
- 点击 “生成” 可以生成小程序密钥，这是小程序的 “秘密武器”。
- 登录商城小程序管理后台，点击 “小程序设置”，将获取的小程序 Appid 和密钥复制粘贴在此，让小程序的 “大脑” 和微信平台能准确识别彼此。
四、前端搭建：给小程序穿上漂亮的 “外衣”
（一）下载 HBuilderX
在浏览器搜索 “Hbuilderx”，下载并安装，这是我们给小程序做 “衣服” 的工具，打开它准备大显身手。
（二）导入前端源码
在 HBuilderX 顶部菜单栏点击 “文件”-“导入”-“从本地目录导入”，把商城小程序前端源码文件导入进来，就像把做衣服的布料准备好。
（三）修改域名网址
打开前端源码中的 config.js 文件，找到 apiUrl 项，填入你的二级域名，这一步是告诉小程序前端从哪里获取数据，就像告诉衣服要和哪个 “身体” 适配。
（四）获取应用标识
点击前端源码中的 manifest.json 文件，选择基础配置，重新获取 uni - app 应用标识，这就像是给衣服贴上一个独特的标签。
（五）填写小程序 Appid
在 manifest.json 文件中选择微信小程序配置，修改为你自己的小程序 Appid，让小程序前端知道自己属于哪个 “主人”。
（六）下载微信开发者工具
在浏览器搜索 “微信开发者工具”，选择稳定版进行下载安装，安装完成后，用微信扫码登录，这是我们最后调试小程序 “衣服” 的地方。
（七）打包发行微信小程序
在 HBuilderX 工具顶部菜单栏点击 “发行”-“发行小程序 - 微信”，等待一会儿，它会自动跳转打开微信开发者工具，就像把做好的衣服送到试衣间。
（八）上传源码
微信开发者工具打开后，点击 “编译”，如果左侧能够正常显示小程序页面，说明搭建得挺成功，就像衣服试穿很合身一样，然后点击 “上传”。
五、审核发布：让小程序正式 “出道”
（一）设置小程序类目
登录微信公众平台，在左侧导航栏找到 “设置”，选择小程序类目，这就像是给小程序在 “娱乐圈” 里定个类别，让大家知道它是干什么的。
（二）提交审核
在微信公众平台左侧导航栏找到 “版本管理”，点击 “提交审核”，把小程序交给微信官方的 “评委们” 审核，看看它能不能顺利通过。
（三）发布小程序
审核通过后，登录微信公众平台，在版本管理中找到审核版本，点击发布。恭喜！你的小程序正式 “出道”，可以在微信的 “舞台” 上展示自己啦！
代码示例：
- 前端 WXML 代码示例（一个简单的按钮）：
- 后端 Node.js（Express 框架）代码示例（一个简单的 API 接口）：
const express = require(\'express\');const app = express();app.get(\'/api/data\', (req, res) => {res.json({ message: \'Hello from server!\' });});const port = 3000;app.listen(port, () => {console.log(`Server is running on port ${port}`);});好啦，小伙伴们，到这里一个完整的微信小程序就搭建完成啦！是不是没有想象中那么难呢？现在你也拥有了自己的小程序，说不定还能靠它开启一段新的 “财富密码” 旅程哦。赶紧动手试试吧，如果在过程中有什么问题，随时来问我，祝大家都能在小程序开发的世界里玩得开心！
