注意，本小程序前端采用uniapp + Vue3，后端采用node.js且部署在自己的云服务器上。至于为什么要写小程序？当然是为了 写 毛概 着 学习前后端 玩

前期准备

1.注册小程序账号

在微信公众平台注册一个账号，补充完信息后进行备案

QQ20260315-185101.png

2.安装开发工具

下载微信开发者工具，这个是最后联调和上传用

前端开发

1.项目初始化

前端为 uniapp + Vue3，支持 H5 与微信小程序。

首先搜索unip，在快速上手找到创建unip项目的命令：

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

在预计存放前端代码的文件夹开cmd输入命令，my-vue3-project改为自己文件夹名字，初始化项目，结构如下：

1.png

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.接口对接

首先保证前端能正常向后端发送请求，确保发送和接收数据格式正确无误，封装网络请求的地方已经根据实际后端进行了修改。

2.核心测试

打开微信开发者工具，新增项目，项目目录选择刚才的mp-weixin文件夹，直接进行编译。不出意外的话就可以开始愉快调试了。
2.png

如果调试时遇见问题，更改了前端代码，注意要运行：

npm run build:mp-weixin

重新打包文件，之后回到微信开发者工具里清除全部缓存重新编译，就能看到更改后的结果

3.上传和发布

在微信公众平台的开发管理中，找到服务器域名，为request合法域名添加自己的域名。

在微信开发者工具里进行代码的上传

在微信公众平台的版本管理里，把开发版本递交审核，通过审核后就能正常发布