rk3588's 小破站 - Vue3
type: channel
link: http://8.162.1.103/index.php/tag/Vue3/
items: 搭一个微信小程序（偏部署）

搭一个微信小程序（偏部署）
type: item
date: 2026-03-15T21:04:00+08:00
description: 注意，本小程序前端采用uniapp + Vue3，后端采用node.js部署云服务器上。经验很少接触的不多有错误欢迎指正前期准备1.注册小程序账号在微信公众平台注册一个账号，补充完信息后进行备案2.安装开发工具下载微信开发者工具，这个是最后联调和上传用前端开发1.项目初始化前端为 uniapp + Vue3，支持 H5 与微信小程序。首先搜索unip，在快速上手找到创建unip项目的命令：npx degit dcloudio/uni-preset-vue#vite my-vue3-project在预计存放前端代码的文件夹开cmd输入命令，my-vue3-project改为自己文件夹名字，初始化项目，结构如下：pages内存放每一个view文件，static内存放静态资源pages.json内是路由管理，新建页面时在这里添加地址；package.json是项目的依赖管理与脚本配置文件；vite.cofig.js控制项目构建；index.html是H5入口html文件；main.js是应用的入口脚本文件；APP.vue是应用根组件，渲染页面官网的api提供很多封装好的接口；安装npm依赖：npm i在package.json里运行H5脚本以进行本地调试。之后编写前端代码，非通用流程就不展示了2.项目打包在项目根目录下的终端输入：npm run dev:mp-weixin得到mp-weixin文件夹，等待后端建立后联调后端开发由于之前服务器上已经有博客网站，我们直接在它的基础上开发1.添加域名解析把之前已经备案好的域名添加一条解析记录，主机记录填api。在宝塔面板新增站点并绑定该子域名，注意要开MySQL数据库。为它申请SSL证书，尝试ping一下看能不能通2.配置node.js环境宝塔软件商店下node.js版本管理器，安装node版本，命令行版本选首位数字相同的。3.建立数据库表进入数据库管理，根据前端需求建立数据表eg:-- 创建用户表 CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `account` varchar(32) NOT NULL COMMENT '账号', `password` varchar(255) NOT NULL COMMENT '密码', `nickname` varchar(50) DEFAULT NULL COMMENT '昵称', `created_at` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '注册时间', PRIMARY KEY (`id`), UNIQUE KEY `account` (`account`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表'; -- 创建打卡记录表 CREATE TABLE `checkins` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL COMMENT '用户ID', `date` date NOT NULL COMMENT '打卡日期(如2025-03-15)', `time` time NOT NULL COMMENT '打卡时间(如14:30:05)', `content` text COMMENT '打卡内容', `created_at` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`id`), KEY `user_id` (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='打卡记录表';之后编写具体后端代码。注意让后端程序在本地空闲端口运行4.安装依赖并运行测试cd到后端文件夹，打开终端输入：npm install npm app.js之后API服务会持续监听上面设置的空闲端口5.配置反向代理找到站点中的反向代理并添加，名称随意，目标URL一定要填写 http://127.0.0.1:3000这里127.0.0.1指代本地回环地址，代表运行反向代理的服务器本机；也就是说反向代理和后端服务放在一个服务器上时只能填这个，如果不是这种情况再另说。3000指的是之前监听的端口6.使用PM2保持监听状态我们不能一直开着终端监听端口，所以需要找其他办法安装PM2并用它启动项目：npm install pm2 -g pm2 start app.js --name "checkin-api" pm2 save联调测试1.接口对接首先保证前端能正常…