桂院校园导航 | 云上高校导航云开发项目二次开发教程 2.0

奇妙方程式

已于 2024-04-03 16:43:21 修改

阅读量2.5k

点赞数 25

分类专栏：校园导航小程序文章标签：微信小程序小程序 javascript 前端腾讯云

于 2024-03-04 21:05:26 首次发布

本文链接：https://blog.csdn.net/weixin_45940369/article/details/136439513

版权

校园导航小程序专栏收录该内容

33 篇文章 34 订阅

订阅专栏

本文详细介绍了如何开发和升级桂院校园导航2.0版本的小程序，涉及首页设计、校园导航功能增强、地图API集成、数据库管理以及后台添加功能等内容，适合IT技术人员学习和参考。

摘要由CSDN通过智能技术生成

Gitee代码仓库：桂院校园导航小程序

GitHub代码仓库：GLU-Campus-Guide

教程演示↓（看完文章还不会的，看这个）

【校园导航小程序】2.0版本云开发项目开发教程

云开发项目 2.0版本升级日志

序号	板块	详情
1	首页	重做了首页，界面更加高效和美观
2	校园页	新增了 “校园指南” 功能，可以搜索和浏览校园生活指南
3	地图页	①弃用路线规划插件，改用SDK开发包。可以无阻通过审核并发布。得益于SDK中的接口，能够获取路线数据，可以渲染到地图上 ②新增轨迹回放功能，获取路线后，有小车沿着路线，从起点移动到终点 ③新增点聚合功能，地点过于密集时，会自动聚合此类地点 ④新增起点终点交换功能，可一键交换起点和终点 ⑤页面底部按钮重做，点击可以查看当前类别下的地点/路线详情 ⑥更改了类别栏的位置，删去了地点栏
4	数据存储	数据分门别类写入多个js文件，使用时分别引入。区分开容易查找和修改 media.js ：图片和视频路径 school.js ：学校和校园指南信息 map.js ：地图参数、各个地点的坐标 utils.js ：其他信息
5	后台管理	①地点管理页新增默认地点管理功能 ②媒体管理页新增默认图片管理功能

0. 导入项目

一定要看 ↓

桂院校园导航 | 云上高校导航导入与配置教程

可以将图片上传至云存储，获取图片链接，替换掉项目里原来的图片链接。

0.1 上传所有云函数

将 cloudfunctions云函数文件夹下的所有文件夹 - 右键 - 上传并部署

0.2 建立数据库集合并导入对应文件

admin

0.3 修改数据库集合权限

将数据库中所有集合的数据权限改为第一项

1. 全局 app.json

app.json 中的 navigationBarTitleText 属性设置的是 全局的导航栏标题文字内容，改成自己的。

"navigationBarTitleText": "桂院校园导航",

2. 首页 pages/home/home

风景轮播图在后台管理 自行修改。

图标引用 media.js 的数据，均引用 images文件夹 的图片， 自行修改。

校徽（将新图片拖入文件夹覆盖原图片）

学校信息（学校全称 + 学校信息）引用 school.js 的数据，自行修改。

部分信息（小程序名称）引用 utils.js 的数据，自行修改。

天气api 引用 utils.js 的数据，调用 和风天气API 实现，自行修改。

和风天气API申请教程

如果你想搞那种根据定位获取天气，或者是展示更多天气的那种，可以参考下面的大佬的文章

微信小程序实现天气预报功能（支持自动定位）（附源码）

官微按钮是通过 wx.previewImage 接口实现（全屏预览图片）。

获取公众号二维码的方法

招生官微按钮是通过 wx.navigateToMiniProgram 接口实现（跳转外部小程序）。如果你学校没有小程序就改成像楼上一样全屏预览图片（学校的官方图书馆、学生会或者什么的公众号）。

获取小程序 appId 的方法

3. 学校简介 pages/home/introduction/introduction

风景轮播图和首页的是一样的，就不用改了

学校信息（学校全称 + 学校英文名 + 学校简介）引用 school.js 的数据，自行修改。

宣传视频在后台管理 自行修改。

4. 地图信息 pages/map/map

图标引用 media.js 的数据，均引用 images文件夹 的图片， 自行修改。

地图api 引用 map.js 的数据，调用 腾讯位置服务API 实现，自行修改。

腾讯位置服务API申请教程

地点数据在后台管理自行修改

地图数据引用 map.js 的数据。

longitude：地图中心点坐标经度（范围：-180→180）

latitude ：地图中心点坐标纬度（范围：-90→90）

经纬度不要写反了

enablepoi：是否展示 POI 点

showLocation：是否显示带有方向的当前定位点

scale：地图默认缩放级别

minscale：地图最小缩放级别，比默认缩放级别小一点为宜

地图各项参数选取和设置方法 ↓

小程序地图参数预览

将地图参数预览demo中的数据粘贴过来并覆盖 utils/map.js 的对应数据

地图中心点坐标

地图边界、学校范围

地图边界：限制地图的显示范围，不能划出这个范围

通过 MapContext.setBoundary 接口实现，使用此接口需基础库 2.22.0及以上版本

学校范围：判断当前位置（定位）在不在学校

通过 wx.getLocation 接口获取当前的地理位置。将其中的经度纬度进行判断，若经度和纬度在特定范围内，就说明你的位置在校区内。