# 1、说明
前端包括4个端，分别是：

- 用户端（微信小程序）
- 快递员端（安卓app）
- 司机端（安卓app）
- 后台管理端（pc web）
# 2、用户端
## 2.1、开发者工具
用户端是基于微信小程序开发的，首先需要下载并安装微信开发者工具：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666082052978-b1cdc9f0-9831-415c-91fa-55bbec63c8f2.png#averageHue=%23f9f8f8&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=211&id=u3148892a&name=image.png&originHeight=348&originWidth=1114&originalType=binary&ratio=1&rotation=0&showTitle=false&size=50359&status=error&style=shadow&taskId=uf2b33888-c95b-42d2-bd9d-ab71acfc156&title=&width=675.1514761288107)
可以使用课程资料中提供的安装包或在线下载，[点击下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)
## 2.2、申请测试账号
接下来，申请微信小程序的测试账号，[点击申请](https://mp.weixin.qq.com/wxamp/sandbox)，通过手机微信扫码进行操作。
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666082822936-8abbd126-8c4b-4e02-ad5a-4ca5c4e12e44.png#averageHue=%23e1e1e1&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=426&id=u75add51e&name=image.png&originHeight=703&originWidth=541&originalType=binary&ratio=1&rotation=0&showTitle=false&size=67786&status=error&style=shadow&taskId=ud0d00d23-382d-4f91-b70e-1481e22c3e7&title=&width=327.8787689279054)
申请成功后，进行登录，[点击登录](https://mp.weixin.qq.com/)，如下：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666082977858-38849f07-3112-4c0b-9058-e989b5fb58ad.png#averageHue=%234bce89&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=385&id=ub8b3bb79&name=image.png&originHeight=635&originWidth=1811&originalType=binary&ratio=1&rotation=0&showTitle=false&size=862206&status=error&style=shadow&taskId=u38e41a32-910a-4f93-a642-41abffb52d9&title=&width=1097.575694137591)
通过手机微信进行扫码登录：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666083012252-db5ad7cc-68cf-4943-8af1-e5ad9ffe3ec0.png#averageHue=%23fefdfd&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=246&id=u32ce2bb3&name=image.png&originHeight=406&originWidth=570&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23572&status=error&style=shadow&taskId=u49786afa-1714-4ad9-a131-8ba9a344474&title=&width=345.4545254878116)
即可看到测试账号信息：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666083048608-08e392c6-426a-4794-abea-566f78431be6.png#averageHue=%23fafbfb&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=405&id=ub7a7b181&name=image.png&originHeight=668&originWidth=1702&originalType=binary&ratio=1&rotation=0&showTitle=false&size=30981&status=error&style=shadow&taskId=u7dc5bb6d-39e1-41ed-acea-909dba457bc&title=&width=1031.515091895185)

需要将AppID和AppSecret保存到nacos配置中心的 `sl-express-ms-web-customer.properties`中：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666796771252-549b88a6-c41d-44b0-a7d6-f56753a4f902.png#averageHue=%23202020&clientId=uc1e66e0c-908f-4&from=paste&height=291&id=u79cded72&name=image.png&originHeight=436&originWidth=892&originalType=binary&ratio=1&rotation=0&showTitle=false&size=68561&status=done&style=shadow&taskId=ub7dd2e21-cb80-44e0-bed8-b45b43a02f5&title=&width=594.6666666666666)
## 2.3、导入代码
从git拉取代码，地址：[http://git.sl-express.com/sl/project-wl-yonghuduan-uniapp-vue3](http://git.sl-express.com/sl/project-wl-yonghuduan-uniapp-vue3)
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666086804481-271ff5ec-8328-437f-baaa-990c6cec55cc.png#averageHue=%23e3ac64&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=92&id=u8bc430e7&name=image.png&originHeight=152&originWidth=566&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10589&status=error&style=shadow&taskId=u21062056-f2d3-438e-a565-bdcc8591bb3&title=&width=343.0302832036866)
打开微信开发者工具（需要通过手机上的微信客户端进行扫码登录，不要使用游客身份登录），导入代码，注意导入的目录为：`project-wl-yonghuduan-uniapp-vue3\unpackage\dist\dev\mp-weixin`，使用测试账号：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666086915604-93ab78eb-fa7f-4943-b447-5bc91f898a1b.png#averageHue=%23fafaf9&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=549&id=u1a2fa314&name=image.png&originHeight=906&originWidth=1200&originalType=binary&ratio=1&rotation=0&showTitle=false&size=60171&status=error&style=shadow&taskId=u98a957d5-321f-4233-b8a2-3b8be18e60e&title=&width=727.2726852374981)
导入完成后，需要修改`env.js`配置文件，将`baseUrl`变量设置为：`http://api.sl-express.com/customer`，此链接为与后端服务交互的地址，入口为网关地址：（修改完成后需要点击【编译】按钮进行重新编译）
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666087117309-34ab0053-42c7-4d53-a153-fdbf08f9a92c.png#averageHue=%23f4f1ee&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=618&id=u5296f2da&name=image.png&originHeight=1020&originWidth=1920&originalType=binary&ratio=1&rotation=0&showTitle=false&size=337143&status=error&style=shadow&taskId=u947359a7-e668-46a7-9a23-a5f6a897862&title=&width=1163.636296379997)
如果需要完成登录，需要确保如下服务保持启动状态：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666087670046-af8e37f9-6cd0-435f-93a8-6dcc1d8bf60e.png#averageHue=%230f131d&clientId=u7729d0e1-b5cc-4&errorMessage=unknown%20error&from=paste&height=274&id=ud912be12&name=image.png&originHeight=452&originWidth=1651&originalType=binary&ratio=1&rotation=0&showTitle=false&size=76408&status=error&style=shadow&taskId=u7a9329b5-57a8-4407-90bc-2a883369682&title=&width=1000.6060027725912)
测试登录：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666088371030-e7a02156-1628-422d-bb22-e17880a327c0.png#averageHue=%23fdf1f0&clientId=ua3104b4f-a4f8-4&errorMessage=unknown%20error&from=paste&height=480&id=u5666bfec&name=image.png&originHeight=792&originWidth=484&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23520&status=error&style=shadow&taskId=ue458f33d-48e5-4087-a501-228b0863dc9&title=&width=293.33331637912426)
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666088396227-c20932d6-ed8e-45f1-8363-75c026878caa.png#averageHue=%23ccc7c6&clientId=ua3104b4f-a4f8-4&errorMessage=unknown%20error&from=paste&height=481&id=ua1f2b1ce&name=image.png&originHeight=793&originWidth=476&originalType=binary&ratio=1&rotation=0&showTitle=false&size=66392&status=error&style=shadow&taskId=u4c2cb589-f875-48f1-a6da-41822f7b251&title=&width=288.48483181087425)
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666088428155-39d52547-94de-4d91-9414-241a17b338f6.png#averageHue=%238a8a8a&clientId=ua3104b4f-a4f8-4&errorMessage=unknown%20error&from=paste&height=479&id=u3ba12442&name=image.png&originHeight=790&originWidth=482&originalType=binary&ratio=1&rotation=0&showTitle=false&size=48078&status=error&style=shadow&taskId=u5d7ad405-a798-49ff-a638-4f8e618577b&title=&width=292.1211952370617)
登录成功：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666088451139-ee29c78c-7d5a-4e69-921c-45cc8f907c68.png#averageHue=%23f4dbd8&clientId=ua3104b4f-a4f8-4&errorMessage=unknown%20error&from=paste&height=480&id=u84493463&name=image.png&originHeight=792&originWidth=482&originalType=binary&ratio=1&rotation=0&showTitle=false&size=71682&status=error&style=shadow&taskId=ud8098131-4597-44a8-87b4-d00d292336c&title=&width=292.1211952370617)
# 3、司机、快递员端
司机和快递员端都是安卓app的，可以安装在手机或通过模拟器进行使用，这里介绍模拟器的方式进行使用。（如果使用手机的话，需要通过内网穿透的方式访问网关）
## 3.1、模拟器
### 3.1.1、联想模拟器
在Windows平台推荐使用【联想模拟器】，安装包在`资料\软件包\模拟器`中找到。（如果联想模拟器不能正常使用也可以使用其他的模拟器）
安装完成后，设置分辨率为【手机 720 * 1280】：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666094236717-cee34e71-9eb3-4697-bd72-4b6168e4038d.png#averageHue=%231d2527&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=507&id=ue5c31003&name=image.png&originHeight=837&originWidth=990&originalType=binary&ratio=1&rotation=0&showTitle=false&size=38403&status=error&style=shadow&taskId=u607528e2-fdf8-461b-9f62-2062597e6cd&title=&width=599.999965320936)
效果如下：（安装apk直接拖入即可）
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666094259231-cd5432d0-c288-4cc9-b9e8-99ddf3f97baf.png#averageHue=%231e272e&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=582&id=uf4e39193&name=image.png&originHeight=961&originWidth=575&originalType=binary&ratio=1&rotation=0&showTitle=false&size=352553&status=error&style=shadow&taskId=ub513e2ff-228c-4312-bba5-592192de4ec&title=&width=348.48482834296783)
模拟器中的共享目录：
![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1677721099105-43b860fd-8057-46fb-827d-697d23a66e03.png#averageHue=%231f292e&clientId=u72f7516e-8236-4&from=paste&height=595&id=uf077d3fc&name=image.png&originHeight=892&originWidth=1032&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=114890&status=done&style=shadow&taskId=u9d3810cf-0d61-4ebd-a6d9-8403dc60399&title=&width=688)
在模拟器的定位功能中可以设定位置信息，主要用于app中获取定位，在项目用于车辆位置上报等场景：
![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1677721897213-44032d06-29c7-415c-9de9-a93c4ea10b6a.png#averageHue=%23b6e8df&clientId=u72f7516e-8236-4&from=paste&height=539&id=u8df4dfb1&name=image.png&originHeight=809&originWidth=1244&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=615731&status=done&style=shadow&taskId=u64078e4f-b9bd-41f8-a254-c3673c6c709&title=&width=829.3333333333334)
### 3.1.2、官方模拟器
如果使用的是苹果Mac电脑并且是M1、M2芯片的同学，可以安装官方的模拟器进行使用。
在资料文件夹中找到`android-emulator-m1-preview-v3.dmg`安装包，进行安装。
安装完成后，还不能安装apk，需要安装android-sdk，这里通过brew命令安装，首先安装brew，在命令控制台输入命令：
`/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" `
推荐使用2号安装：
![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1678606318315-9c8c183e-99ce-4a74-92ef-79db890eecab.png#averageHue=%23fcfcfc&clientId=uee7de322-406c-4&from=paste&height=229&id=udbe94230&name=image.png&originHeight=458&originWidth=904&originalType=binary&ratio=2&rotation=0&showTitle=false&size=112543&status=done&style=shadow&taskId=u2f6906d8-144a-4976-ab69-3b0b9fb5708&title=&width=452)
> 如果没有安装git，在提示框中选择安装即可。

![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1678606702403-2cd42a0c-d2ab-46ef-95e2-9bd832702733.png#averageHue=%23fefefd&clientId=uee7de322-406c-4&from=paste&height=166&id=udee1f244&name=image.png&originHeight=332&originWidth=1028&originalType=binary&ratio=2&rotation=0&showTitle=false&size=98099&status=done&style=shadow&taskId=ub7fa9242-6870-4cd4-8a61-a9ddace803a&title=&width=514)
执行命令立即生效：`source /Users/tianze/.zprofile`
接下来安装android-sdk：
```shell
#先安装android-sdk，再安装android-platform-tools
brew install --cask android-sdk

brew install android-platform-tools

#查看
brew list android-sdk
brew list android-platform-tools
```
可以看到在`/opt/homebrew/Caskroom`目录下有`android-platform-tools`和`android-sdk`两个文件夹：
![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1678606999353-59b261f0-1660-46f8-ad20-323bb76c2f0a.png#averageHue=%23f4f4f4&clientId=uee7de322-406c-4&from=paste&height=180&id=u0406da84&name=image.png&originHeight=360&originWidth=920&originalType=binary&ratio=2&rotation=0&showTitle=false&size=48731&status=done&style=shadow&taskId=ua2b7f445-6584-4960-93b8-c3c753acc63&title=&width=460)
在模拟器中设置adb路径：`/opt/homebrew/Caskroom/android-platform-tools/34.0.1/platform-tools/adb`
![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1678607204992-61f21f8d-1f08-422c-a4bf-97640667aba7.png#averageHue=%23efebea&clientId=uee7de322-406c-4&from=paste&height=671&id=uf6dec2cc&name=image.png&originHeight=1342&originWidth=1958&originalType=binary&ratio=2&rotation=0&showTitle=false&size=514412&status=done&style=shadow&taskId=u3afb292d-42f3-4fcf-9deb-97bf38fe8aa&title=&width=979)
设置完成后，即可拖入apk进行安装：
![image.png](https://cdn.nlark.com/yuque/0/2023/png/27683667/1678607334882-e3288903-3956-4c65-a13d-9186d0d0a590.png#averageHue=%23fbf8f7&clientId=uee7de322-406c-4&from=paste&height=748&id=udfe1aac1&name=image.png&originHeight=1496&originWidth=810&originalType=binary&ratio=2&rotation=0&showTitle=false&size=173463&status=done&style=shadow&taskId=ucc08f3f9-05c9-48dd-9d8e-a93aacb0d79&title=&width=405)
## 3.2、启动服务
测试登录的话，需要确保如下的服务处于启动状态：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666094397961-e1141f78-8d06-417a-a81a-8ec672666f33.png#averageHue=%230f131e&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=279&id=u28832025&name=image.png&originHeight=461&originWidth=1673&originalType=binary&ratio=1&rotation=0&showTitle=false&size=78810&status=error&style=shadow&taskId=udde786d9-4bc2-43c5-bb82-4c686d411c9&title=&width=1013.9393353352787)
## 3.3、快递员端
在app中设置接口地址：`http://192.168.150.101:9527/courier`
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666096686586-339fcd7b-cad6-49c4-992d-e93d4ca9c9a0.png#averageHue=%23fcf2f1&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=554&id=u160b9773&name=image.png&originHeight=914&originWidth=514&originalType=binary&ratio=1&rotation=0&showTitle=false&size=28124&status=error&style=shadow&taskId=uf35bdd8c-9041-4982-824c-cb0142703e6&title=&width=311.5151335100617)
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666096747049-143afd57-3549-482d-856d-6a36af4a3727.png#averageHue=%23a4a3a3&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=554&id=u10a201b7&name=image.png&originHeight=914&originWidth=514&originalType=binary&ratio=1&rotation=0&showTitle=false&size=34785&status=error&style=shadow&taskId=u62990baa-8ffb-47f8-8149-779d9c631fa&title=&width=311.5151335100617)
使用正确的用户密码即可登录：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666096821007-90b5cfce-a6bd-4979-99aa-91aba65772c7.png#averageHue=%23f5d0cd&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=554&id=uf09ed66f&name=image.png&originHeight=914&originWidth=514&originalType=binary&ratio=1&rotation=0&showTitle=false&size=94992&status=error&style=shadow&taskId=u128fb41d-cf08-4cb3-944f-247dfe0cece&title=&width=311.5151335100617)
## 3.4、司机端
司机端与快递员端类似，需要配置url为：`http://192.168.150.101:9527/driver`
输入正确的用户名密码即可登录成功：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666097103984-ff98e9ab-d196-4c5e-9ca9-aad7d80405aa.png#averageHue=%23f5c5c1&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=554&id=u71d02a1d&name=image.png&originHeight=914&originWidth=514&originalType=binary&ratio=1&rotation=0&showTitle=false&size=59339&status=error&style=shadow&taskId=u6e224831-98bb-4006-8b40-66508737a64&title=&width=311.5151335100617)
# 4、pc管理端
pc管理端是需要将前端开发的vue进行编译，发布成html，然后通过nginx进行访问，这个过程已经在Jenkins中配置，执行点击发布即可。
地址：[http://jenkins.sl-express.com/view/%E5%89%8D%E7%AB%AF/job/project-slwl-admin-vue/](http://jenkins.sl-express.com/view/%E5%89%8D%E7%AB%AF/job/project-slwl-admin-vue/)
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666098383387-549c2872-5327-4830-b8ff-a74456799ed6.png#averageHue=%23fefefe&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=398&id=ue44eaeb6&name=image.png&originHeight=657&originWidth=1392&originalType=binary&ratio=1&rotation=0&showTitle=false&size=116388&status=error&style=shadow&taskId=u63a23e7c-c86a-470a-b4cc-677aca5329b&title=&width=843.6363148754979)
vue打包命令：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666098487931-f57d9677-2de2-4647-bb42-4ff9fc755da0.png#averageHue=%23fefefe&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=393&id=u1d537ab7&name=image.png&originHeight=649&originWidth=1248&originalType=binary&ratio=1&rotation=0&showTitle=false&size=39931&status=error&style=shadow&taskId=u64c746d0-9da2-4317-a530-8c162cebcbf&title=&width=756.3635926469981)
将打包后的html等静态文件拷贝到指定目录下：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666098524587-05dbe2bf-ea7c-4195-bbcf-e21ec02688f9.png#averageHue=%23fefefe&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=370&id=u9927ec36&name=image.png&originHeight=610&originWidth=1248&originalType=binary&ratio=1&rotation=0&showTitle=false&size=41992&status=error&style=shadow&taskId=ub42930dd-39bc-4725-bb67-50dec7f0864&title=&width=756.3635926469981)
nginx中的配置：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666098569834-bdefa479-5906-4177-9301-949b2531e314.png#averageHue=%230e111a&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=299&id=u7896c96d&name=image.png&originHeight=493&originWidth=852&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23532&status=error&style=shadow&taskId=u036a2f6e-de2d-43f3-9e67-151d2384f2a&title=&width=516.3636065186237)
nginx所在目录：`/usr/local/src/nginx/conf`
输入地址进行测试：[http://admin.sl-express.com/#/login](http://admin.sl-express.com/#/login)
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666098654094-6b100778-a834-4a2f-8915-9ea027d8cc01.png#averageHue=%23557765&clientId=u94370c3f-5450-4&errorMessage=unknown%20error&from=paste&height=554&id=u6a084306&name=image.png&originHeight=914&originWidth=1920&originalType=binary&ratio=1&rotation=0&showTitle=false&size=957720&status=error&style=shadow&taskId=uf5a6d82c-1dd5-49f2-b4ce-557220f77bc&title=&width=1163.636296379997)
确保如下服务是启动状态：
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27683667/1666099328254-3ef3aaea-3625-4746-9bce-4de51e18d11e.png#averageHue=%230f131d&clientId=u890b030f-c2af-4&errorMessage=unknown%20error&from=paste&height=303&id=u45b1cf52&name=image.png&originHeight=500&originWidth=1665&originalType=binary&ratio=1&rotation=0&showTitle=false&size=82531&status=error&style=shadow&taskId=ud297e4b3-9c00-4fe8-9619-401a13004b2&title=&width=1009.0908507670287)