wx_map_miniprogram_demo

1. 开发环境

1.1. 开发工具：

• 微信开发者工具；
• pycharm；

---

1.2. 前端+后端框架：

• 前端： html + css + javascript + bootstrap；
• 后端： pyrhon + flask；
• 地图API： 高德API；

2. 微信小程序前端开发

2.1. 功能需求和设计

多用户

功能说明：

• 实现不同用户的区分，方便用户查看自己的记录信息；

功能实现：

• 用户在首次使用此小程序时，小程序会先获取用户的openid，并在数据库中查询此openid，若未查询到则将openid放入数据库中，若查询到则返回已经添加，将openid作为用户的唯一识别码。

标记当前用户位置

功能说明：

• 用户在当前位置可以记录该位置，方便之后再次查看；

功能实现：

• 调用高德API获得用户标记时的位置信息，然后调用接口进行上传；

路线规划

功能说明：

• 用户在选定起始点和目的地之后给出导航信息；

功能实现：

• 通过获取设置的出发地和目的地的位置信息，调用高德API返回路径规划信息，同时将出发地和目的地的信息通过调用接口上传到数据库，方便之后查询；

历史路线规划查询

功能说明：

• 用户可以查看自己之前从某地到某地的路线规划；

功能实现：

• 从后台返回历史路线规划的记录，点击任意一条历史后会从后台返回所查看路径的信息，后调用高德API将其再次显示；

查看附近热点

功能说明：

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

功能实现：

• 调用高德API；

查看当前天气

功能实现：

• 调用高德API；

---

2.2. 页面设计

采用UI：colorui、weiui

起始页

• demo：

• 代码：“/pages/firstPage/“

位置标记页

• demo：

• 代码：“/pages/testPage/”

路线规划

• demo：

• 代码：
• “/pages/firstOfNavigation”；
• “/pages/endOfNavigation”；
• “/pages/navigation_car”；

历史路线规划查询

• demo：

• 代码： "/pages/myTrackPage/“

附近热点页面

• demo：

• 代码：“/pages/poi”

天气页面

• demo：

• 代码：“/pages/weather”

---

3. 管理网站前端开发

3.1. 功能需求与设计

功能需求

• 管理员登录、注册；
• 位置管理；
• 路径规划记录管理；
• 管理员管理；
• 微信用户管理；

页面设计

**UI：**BootStrap

• 登录页面：

• 注册页面：

• 首页：

• 位置记录页面：

• 轨迹管理页面：

• 用户管理页面：
• 管理员管理页面：

---

4. 数据库设计

环境： mysql + navicat;

结构：

---

5. 后端开发

后端采用 python + Flask 框架开发

• 结构如下：

• 项目结构说明：

  1. static: 存放css样式、js文件、图片等文件；
  2. templates: 存放html文件；
  3. venv: pythonk虚拟环境；
  4. app.py: 与数据库链接、接口和Flask开发；
  5. config.py: 数据库配置；
  6. decorators.py: 对页面login函数封装，实现未登录跳转；

具体代码详情见附件

6 附件

源码下载地址（非移动用户） 百度网盘下载地址（提取码：gla8） 博客地址 Flask+BootStrap开发