springboot+微信小程序（地图应用）（eclipse）开发文档

微信小程序之“脚步·生活”开发文档

——地图小程序

源码链接：https://github.com/LiuGuoXiangIamI/mapApp

目录： 开发前的准备；

微信小程序前端开发

管理网站前端开发

数据库设计

后端开发

前后端交互方法

Bug总结

总结与不足

附录：代码链接

• 开发前的准备

1、选定开发工具：

微信开发者工具（安装及配置见微信小程序官方开发文档）；

Eclipse；

1. 前端+后端选定框架：

前端：html+css+javascript+layui+colorui

后端：springboot（Eclispe配置Springboot见博客）+mybatis

地图API：高德API

• 微信小程序前端开发

功能需求与设计：

1. 多用户

功能说明：

实现用户的区分，以便用户可以查看属于自己的记录信息，并同时方便实现同城聊天和标记

功能实现：

用户在首次使用本微信小程序时，小程序先获取该用户的OpenID，则以此OpenID在数据库中进行查询，若未查询到，则给该用户绑定一个UserID，在小程序中使用UserID进行多用户的区分；若查询到，则返回之前绑定过的UserID；

2、标记当前用户的位置

功能说明：

用户在当前位置可以记录该位置的信息或当前的心情，以便之后回顾与查询

功能实现：

调用高德API获得用户标记时的位置信息，然后获取用户所记录的信息或心情或照片，调用后台接口进行上传

3、查看之前该用户所标记的位置信息

功能说明：

用户可查看之前标记的位置信息

功能实现：

调用后台接口返回数据库中之前记录的位置信息，后调用高德API将其显示在静态图中

4、记录用户的轨迹

功能说明：

用户想记录自己从某地到某地的自己走过的路径则可以通过该功能实现

功能实现：

①：用户点击开始记录按钮后，设置一个定时器，每5s记录一下该用户的当前位置信息，并作为该条路径中的一个点的格式上传到数据库中；

②用户点击结束记录按钮后，关闭定时器；

1. 查看之前该用户所记录的轨迹

功能说明：

用户可回看自己之前从某地到某地所经过的路径

功能实现：

从后台返回所查看的路径的信息（各时刻的位置信息），后调用高德API将其显示在静态图中

1. 匿名同城聊天

功能说明：

用户可以与使用该小程序的其他用户进行匿名聊天，其他用户显示在自己这是相同的头像显示在右侧，自己是用类微信聊天显示在左侧，且用绿色标识，在其他用户那里显示同理

功能实现：

①从后台每5s或更短时间返回聊天消息列表，判断消息的UserID是否是该用户的UserID，若是则以一种格式显示在列表左侧，若不是则以另一种形式显示在列表右侧以划分其他用户

②发送消息时，调用后台接口将其传到后台消息列表数据库中即可

1. 查看同城标记

功能说明：

用户可以查看使用该小程序的其他用户所标记的位置信息

功能实现：

调用后台接口，返回后台数据库中所记录的所有标记位置信息即可

1. 查看附近热点

功能说明：

可以搜索查看你想去的位置及周边建筑物的位置

功能实现：

调用高德API

1. 路线查询

功能说明：

查询某地到某地的导航信息

功能实现：

通过获取设置的出发地和目的地的位置信息，调用高德API返回路径规划信息

10、查看当时天气

功能说明：

查看当时的天气信息

功能实现：

调用高德API

页面设计：

采用ui：colorui

1. 起始页

页面预览：

页面代码：

见“/pages/firstPage/”

1. 标记位置页

页面预览：

           

页面代码

见：“/pages/testPage/”与“/pages/targetPage/”

1. 位置记录页

页面预览：

                 

页面代码：

见“/pages/positionLine”与“/pages/theConcreteRecordPage”与“/pages/theXiangQingPage”

1. 轨迹页面

页面预览：

         

页面代码：

见“/pages/myTrackPage”与“/pages/theConcreteTracePage”

1. 同城聊天界面

页面预览：

          

页面代码

见“/pages/chat”

1. 同城标记界面

页面预览：

页面代码

见“/pages/theSameCityMark”

1. 附近热点界面

页面预览：

页面代码

见“/pages/poi”

1. 路径规划页面

页面预览：

          

页面代码

见“/pages/firstOfNavigation”与“/pages/endOfNavigation”与“/pages/navigation_car”

1. 天气页面

页面预览：

页面代码

见“/pages/weather”

• 管理网站前端开发

功能需求与设计：

1. 功能需求：

①管理者登录

②位置管理

③轨迹管理

④聊天消息管理

1. 功能设计：

①管理者登录：

提供一种较为安全的登录机制，用户在发送登录请求时，先将用户输入的用户名发给后台，检测是否存在，若存在，在后台端产生随机数并将该随机数返回按一定规则插入到用户所输入的密码中，随后进行md5加密，发给后台，后台进行密码与该随机数的同种处理后进行判断是否相等；在登录界面的前端添加验证码

②管理信息：

调用后台接口，将各信息从后台返回到页面中，然后结合高德API进行显示即可

页面设计：

所采用ui：layui

登录页面：

位置管理页面：

轨迹管理页面：

消息管理页面：

• 数据库设计

采用工具：mysql+navicat

结构：

①管理者用户设计：

②位置信息设计：

③轨迹信息设计：

④聊天信息设计：

• 后端开发

该微信小程序后端采用的是springboot+mybatis

项目结构如下：

项目结构说明：

pom.xml：项目依赖项等的管理（maven库）

MapAppApplication：项目启动项

myPosition等：位置信息类等

UserMapper：由于本人并不是很了解springboot的原理，本人感觉该层是对sql语句的外部封装

UserService：本人感觉为对UserMapper的进一步封装

UserServiceImpl：对UserService的重写

UserController：提供与前端交互的封装

application.yml：与数据库连接等的配置

UserMapper.xml：sql语句的内部封装

后端接口所提供的功能：

插入所标记的位置信息；查询所标记的位置信息；删除所标记的位置信息；插入轨迹信息；查询轨迹信息；删除轨迹信息；判断管理者登录；插入聊天信息；查询聊天信息；删除聊天信息；实现多用户操作；上传照片等

UserController预览：

UserMapper.xml预览：

其他具体代码见源码

• 前后端交互方法

具体参见上一篇博客

https://blog.csdn.net/weixin_42412973/article/details/90082427

• bug总结

开发初期遇到的bug见上一篇博客

https://blog.csdn.net/weixin_42412973/article/details/90082427

本次开发遇到的bug有：

1. 我是将该后台部署到了阿里云上，所以讲一下部署的步骤：

参见博客

https://blog.csdn.net/xw12138/article/details/78503399

在打成jar包时：

出现test错误，这时我查阅博客发现可以跳过test阶段：

参见博客

https://www.cnblogs.com/ShanHeDiao/p/5705121.html

https://www.cnblogs.com/youran-he/p/9590855.html这一篇我好像因为有webSocket，所以它讲了一下为啥不行

打包流程：

参见博客

https://blog.csdn.net/qq_34975710/article/details/83989642

thymeleaf访问页面解析出错Could not parse as expression:

出现在JavaScript二维数组的解析上：

参见博客

https://blog.csdn.net/minion_banana/article/details/82772034

打包在服务器端运行后，没办法访问其资源里的静态页面：

参见博客

https://blog.csdn.net/fengzyf/article/details/83341479这一篇博客有个错误是

这个地方是不能在index前面加“/”的，我测试的是这样

微信小程序中的定时器设置：

参见博客

https://www.jianshu.com/p/4f6e48701d37

官方文档

https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/setTimeout.html

• 总结与不足

通过制作本微信小程序，我学会了springboot的使用和前端制作以及前端与后台交互的方式，学会了使用地图API，并学会使用了数据库，为以后的项目打下了基础。

不足之处在于小程序很多地方并不完善，功能过于单一和简陋，用户逻辑欠缺考虑等。

附录：源码连接

https://github.com/LiuGuoXiangIamI/mapApp