这次做一个比较简单的 微信景点小程序，适合作为课程设计、毕业设计或者 SpringBoot + 微信小程序练手项目。
项目不做复杂功能，只实现：
微信登录
首页轮播图
首页景点推荐
景点分类
景点列表
景点详情
景点收藏
景点路线规划
我的收藏
退出登录
后端使用 SpringBoot + MySQL，前端使用 微信原生小程序。
一、项目效果
整个小程序可以设计为 3 个主要页面：
首页
景点分类
我的
首页主要展示：
轮播图
↓
景点分类
↓
推荐景点
用户点击景点之后进入详情页，可以查看景点介绍、地址，并进行：
收藏景点
路线规划
整体流程非常简单。
登录
↓
首页
↓
选择景点
↓
景点详情
↓
收藏 / 路线规划
二、技术栈
小程序端
微信原生小程序
WXML
WXSS
JavaScript
微信地图组件
后端
Java
SpringBoot
MyBatis-Plus
JWT
MySQL
开发工具
IDEA
微信开发者工具
Navicat
三、首页设计
首页主要包含三个部分。
- 轮播图
使用微信小程序自带的 swiper。
<image
src="{{item.image}}"
mode="aspectFill">
</image>
轮播图可以展示：
热门景点
旅游宣传图
特色景区
四、景点分类
首页轮播图下面展示景点分类。
例如：
自然风景
历史古迹
博物馆
主题乐园
城市公园
分类数据可以从 SpringBoot 后端获取。
接口：
GET /api/category/list
返回：
[
{
“id”: 1,
“name”: “自然风景”,
“icon”: “/images/nature.png”
},
{
“id”: 2,
“name”: “历史古迹”,
“icon”: “/images/history.png”
}
]
点击分类以后进入景点列表。
五、首页景点推荐
首页下面展示推荐景点。
例如：
华山
秦始皇兵马俑
大唐芙蓉园
西安城墙
每个景点卡片显示：
景点图片
景点名称
景点地址
景点简介
后端接口：
GET /api/scenic/recommend
SpringBoot：
@GetMapping(“/recommend”)
public Result recommend() {
List<Scenic> list =
scenicService.getRecommend();
return Result.success(list);
}
前端调用：
wx.request({
url: app.globalData.baseUrl
+ ‘/api/scenic/recommend’,
success(res) {
this.setData({
scenicList: res.data.data
})
}
})
六、景点列表
点击景点分类以后，可以查询该分类下面的全部景点。
例如：
GET /api/scenic/list?categoryId=1
页面展示：
景点图片
景点名称
景点简介
景点地址
点击其中一个景点进入详情。
七、景点详情
景点详情是整个项目比较重要的页面。
主要展示：
景点图片
景点名称
景点介绍
景点地址
开放时间
景点经纬度
页面底部放两个按钮：
收藏
路线规划
接口：
GET /api/scenic/{id}
例如：
GET /api/scenic/10
返回：
{
“id”: 10,
“name”: “华山”,
“cover”: “/upload/huashan.jpg”,
“description”: “华山是中国著名五岳之一”,
“address”: “陕西省渭南市华阴市”,
“openTime”: “08:00-18:00”,
“latitude”: 34.483,
“longitude”: 110.089
}
八、景点路线规划
路线规划主要依靠景点的：
latitude
longitude
也就是：
纬度
经度
最简单的实现方法，是调用微信地图。
wx.openLocation({
latitude: Number(this.data.scenic.latitude),
longitude: Number(this.data.scenic.longitude),
name: this.data.scenic.name,
address: this.data.scenic.address,
scale: 16
})
用户点击：
路线规划
以后，就可以打开地图查看景点位置并进行导航。
对于毕业设计来说，这种方式已经够用了。
如果后续需要在小程序内部直接画：
驾车路线
步行路线
骑行路线
可以接入 腾讯位置服务路线规划 API。
九、微信登录
用户第一次进入小程序时需要登录。
小程序调用：
wx.login({
success(res) {
console.log(res.code)
}
})
微信会返回：
code
然后把 code 发送给 SpringBoot。
wx.request({
url: app.globalData.baseUrl
+ ‘/api/auth/login’,
method: ‘POST’,
data: {
code: res.code
}
})
后端接口：
POST /api/auth/login
SpringBoot 根据 code 获取用户对应的：
openid
如果用户第一次登录：
创建用户
如果已经登录过：
查询用户
最后生成 JWT Token。
返回：
{
“token”: “xxxxx”,
“user”: {
“id”: 1
}
}
小程序保存 Token：
wx.setStorageSync(
‘token’,
res.data.data.token
)
后续请求都携带 Token。
十、景点收藏
用户进入景点详情页以后，可以点击：
收藏
收藏接口：
POST /api/favorite
参数：
{
“scenicId”: 10
}
后端根据 Token 获取当前用户。
然后保存：
userId
scenicId
十一、取消收藏
再次点击收藏按钮，可以取消。
接口：
DELETE /api/favorite/{scenicId}
例如：
DELETE /api/favorite/10
十二、我的收藏
用户进入：
我的
↓
我的收藏
查看自己收藏的景点。
接口：
GET /api/favorite/list
返回：
[
{
“id”: 10,
“name”: “华山”,
“cover”: “/upload/huashan.jpg”,
“address”: “陕西省渭南市华阴市”
}
]
点击以后仍然进入景点详情。
十三、退出登录
项目使用 JWT 登录。
用户点击：
退出登录
最简单的方式就是清除本地 Token。
wx.removeStorageSync(‘token’)
然后跳转登录页面。
wx.reLaunch({
url: ‘/pages/login/login’
})
这样下一次请求没有 Token，就需要重新登录。
十四、数据库设计
这个项目不需要设计很多表。
大概 5 张表 就够用了。
用户表
user
字段：
id
openid
nickname
avatar
create_time
景点表
scenic
字段：
id
name
cover
category_id
description
address
latitude
longitude
open_time
recommend
create_time
其中：
recommend = 1
表示首页推荐。
分类表
category
字段：
id
name
icon
收藏表
favorite
字段：
id
user_id
scenic_id
create_time
轮播图表
banner
字段：
id
image
scenic_id
sort
点击轮播图以后，也可以直接进入对应景点详情。
十五、SpringBoot 接口
整个项目实际上只需要下面这些接口。
功能 请求方式 接口
登录 POST /api/auth/login
轮播图 GET /api/banner/list
分类 GET /api/category/list
推荐景点 GET /api/scenic/recommend
景点列表 GET /api/scenic/list
景点详情 GET /api/scenic/{id}
收藏 POST /api/favorite
取消收藏 DELETE /api/favorite/{id}
我的收藏 GET /api/favorite/list
路线规划不需要后端接口。
直接读取景点：
经纬度
调用微信地图即可。
十六、小程序页面结构
项目页面可以设计成：
pages
│
├── login
│ └── 登录
│
├── index
│ └── 首页
│
├── category
│ └── 景点分类
│
├── scenic-list
│ └── 景点列表
│
├── scenic-detail
│ └── 景点详情
│
├── favorite
│ └── 我的收藏
│
└── mine
└── 我的
底部 TabBar 只需要：
首页
分类
我的
整体会比较简单。
十七、项目最终功能
第一版最终只需要实现：
✅ 微信登录
✅ 首页轮播图
✅ 景点分类
✅ 首页推荐景点
✅ 景点列表
✅ 景点详情
✅ 景点路线规划
✅ 收藏景点
✅ 取消收藏
✅ 我的收藏
✅ 退出登录
扫一扫
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
