摘要
一、引言
二、项目背景与介绍
三、技术选型与实现
1. 后端框架：Midway3.0
2. 后台管理系统：Nuxt2.x
3. 小程序前端：Uniapp
4. 可视化引擎：Ant G2
四、使用教程与部署流程
叮点跑腿小程序 v2-本地开发教程
1.开发环境(自行百度安装)
nodejs 版本 16.x.x redis 版本 5.x mysql 版本 8.x 或 5.7 以上版本 git 版本 2.x
2.开发工具
Visual Studio Code HBuilderX 微信小程序
3.获取源代码
克隆远程代码
git clone https://gitee.com/landalfyao/ddrun.git
目录接口介绍
—admin // 后台管理员端 nuxt
—miniapp // 小程序端 uniapp
—server // 服务端 midway
—config.json.bak // 配置文件
—ecosystem.config.js
—nginx.conf.bak
—init.js
—package.json
-README.md
4.开发服务端
4.1 配置数据库和 redis
用 vscode 打开 server 目录 找到 src/config/config.local.ts.bak 文件，复制并粘贴到同一目录下，并更名为 config.local.ts 打开 src/config/config.local.ts 修改 mysql 及 redis 配置
4.2 安装依赖
在 vscode 中打开命令行工具
# 执行以下命令
npm install
# 或
yarn
4.3 启动服务
npm run local
# 或
yarn local
输出以下内容 说明启动成功
⠋ Midway Starting 2022-05-11 17:14:58,504 INFO 44228 [midway:redis] client connect success
[ Midway ] Start Server at http://127.0.0.1:8001
[ Midway ] Start on LAN http://10.0.5.40:8001
4.4 开始开发
开发请参考官方文档 midway
5.开发后台管理页面
5.1 配置代理
用 vscode 打开 admin 目录 找到 nuxt.config.js.bak 文件，复制并粘贴到同一目录下，并更名为 nuxt.config.js 打开 nuxt.config.js 修改 localUrl 的域名为 http://localhost:8001
const isLocal = process.env.NODE_ENV === 'local';
const isProd = process.env.NODE_ENV === 'prod';
const getProxyTarget = () => {
const localUrl = 'http://localhost:8001';
if (isLocal) {
return localUrl;
}
...
};
5.2 安装依赖
在 vscode 中打开命令行工具
# 执行以下命令
npm install
5.3 启动服务
npm run local
5.4 开始开发
Nuxt: https://www.nuxtjs.cn/ AntDesignVue: https://www.antdv.com/
6.开发小程序
6.1 配置 api 地址
用 HBuilderX 导入 miniapp 目录 找到 util/constant.js.bak 文件，复制并粘贴到同一目录下，并更名为 constant.js 打开 util/constant.js 修改 const API = http://localhost:8001
6.2 修改小程序 appid
打开 manifest.json 找到 appid 参数 并修改
6.3 运行
点击运行到微信小程序 扫码登录微信小程序开发者工具
五、结论与展望
参考文献
Midway官方文档：https://midwayjs.org/ Nuxt官方文档：https://www.nuxtjs.cn/ AntDesignVue官方文档：https://www.antdv.com/ Uniapp官方文档：https://uniapp.dcloud.io/ Ant G2官方文档：https://g2.antv.vision/zh/
https://www.malimawai.com
项目gitee地址：
前端模版交流群：
软件接单交流群：
体验创意P图工具：
体验二维码小程序
