03.前端部署文档

1、说明

前端包括4个端，分别是：

• 用户端（微信小程序）
• 快递员端（安卓app）
• 司机端（安卓app）
• 后台管理端（pc web）

2、用户端

2.1、开发者工具

用户端是基于微信小程序开发的，首先需要下载并安装微信开发者工具：

可以使用课程资料中提供的安装包或在线下载，点击下载

2.2、申请测试账号

接下来，申请微信小程序的测试账号，点击申请，通过手机微信扫码进行操作。

申请成功后，进行登录，点击登录，如下：

通过手机微信进行扫码登录：

即可看到测试账号信息：

需要将AppID和AppSecret保存到nacos配置中心的 sl-express-ms-web-customer.properties中：

2.3、导入代码

从git拉取代码，地址：http://git.sl-express.com/sl/project-wl-yonghuduan-uniapp-vue3

打开微信开发者工具（需要通过手机上的微信客户端进行扫码登录，不要使用游客身份登录），导入代码，注意导入的目录为：project-wl-yonghuduan-uniapp-vue3\unpackage\dist\dev\mp-weixin，使用测试账号：

导入完成后，需要修改env.js配置文件，将baseUrl变量设置为：http://api.sl-express.com/customer，此链接为与后端服务交互的地址，入口为网关地址：（修改完成后需要点击【编译】按钮进行重新编译）

如果需要完成登录，需要确保如下服务保持启动状态：

测试登录：



登录成功：

3、司机、快递员端

司机和快递员端都是安卓app的，可以安装在手机或通过模拟器进行使用，这里介绍模拟器的方式进行使用。（如果使用手机的话，需要通过内网穿透的方式访问网关）

3.1、模拟器

3.1.1、联想模拟器

在Windows平台推荐使用【联想模拟器】，安装包在资料\软件包\模拟器中找到。（如果联想模拟器不能正常使用也可以使用其他的模拟器）
安装完成后，设置分辨率为【手机 720 * 1280】：

效果如下：（安装apk直接拖入即可）

模拟器中的共享目录：

在模拟器的定位功能中可以设定位置信息，主要用于app中获取定位，在项目用于车辆位置上报等场景：

3.2、启动服务

测试登录的话，需要确保如下的服务处于启动状态：

3.3、快递员端

在app中设置接口地址：http://192.168.150.101:9527/courier


使用正确的用户密码即可登录：

3.4、司机端

司机端与快递员端类似，需要配置url为：http://192.168.150.101:9527/driver
输入正确的用户名密码即可登录成功：

4、pc管理端

pc管理端是需要将前端开发的vue进行编译，发布成html，然后通过nginx进行访问，这个过程已经在Jenkins中配置，执行点击发布即可。
地址：http://jenkins.sl-express.com/view/%E5%89%8D%E7%AB%AF/job/project-slwl-admin-vue/

vue打包命令：

将打包后的html等静态文件拷贝到指定目录下：

nginx中的配置：

nginx所在目录：/usr/local/src/nginx/conf
输入地址进行测试：http://admin.sl-express.com/#/login

确保如下服务是启动状态：