代码仓库
Gitee：桂院校园导航小程序
GitHub：GLU-Campus-Guide
具体小版本号以推送记录的描述为准
更新日志
| 序号 | 模块 | 内容 |
|---|---|---|
| 1 | 【新增特性】 | ①云开发项目实现多校区切换（将坐标、范围、默认地点等数据融入校区管理中） ②地图、搜索和热度页中均有多校区切换（只存在一个校区时不显示） |
| 2 | 【优化】 | ①云开发项目无需使用“地图参数获取工具” ②初始化时，云数据库集合只用创建，无需导入文件 ③删除未使用的云函数 ④格式化所有代码 ⑤提取公共方法 |
| 3 | 【问题修复】 | 无 |
| 4 | 【其他】 | ①清理无意义的控制台打印语句 |
0. 导入项目
一定要看 ↓
桂院校园导航 导入与配置教程
一定要看 ↑
将图片上传至云存储，获取图片链接，替换掉项目里原来的图片链接
0.1 上传所有云函数
将 cloudfunctions云函数文件夹 下的 所有文件夹 - 右键 - 上传并部署
0.2 建立数据库集合
无需导入文件
| 序号 | 集合名称 | 描述 |
|---|---|---|
| 1 | campus | 校区 |
| 2 | category | 地点类型 |
| 3 | site | 地点 |
| 4 | schoolguide | 校园指南 |
| 5 | media | 媒体信息 |
| 6 | admin | 管理员 |
0.3 如果后续看不到图片，就修改存储的权限
1. 全局 app.json
app.json 中的 navigationBarTitleText 属性 是 全局的导航栏标题文字内容，自行修改
“navigationBarTitleText”: “xx校园导航”,
2. 数据 data/*
2.1 部分数据 data/data.js
这里存放 和风天气API、小程序名称 和 作者信息，自行修改
和风天气API调用方式改过，实在搞不起来，可以直接用我的
2.2 地图数据 data/map.js
这里存放 腾讯位置服务API、学校坐标 和 部分地图参数信息，自行修改
腾讯位置服务API记得申请额度
这里的学校坐标其实只用于天气API的位置传递
2.3 媒体数据 data/media.js
这里存放 图片、图标 的链接
将图片上传至云存储，获取图片链接，替换掉原来的图片链接
2.4 学校数据 data/school.js
这里存放 学校公众号二维码、小程序（没有可置空），以及学校信息
通过 wx.previewImage 接口实现 全屏预览（公众号二维码）图片
通过 wx.navigateToMiniProgram 接口实现 跳转外部小程序
前一个数组是公众号，后一个数组是小程序码
做成这样是为了更便捷地调整（可以置为空数组，也可以自行调整长度，从而显示对应数量的东西）
3. 图片
校徽（将新图片拖入images文件夹覆盖原图片），保持文件名（school_logo.png）不变
4. 首页 pages/home/home
如果你想搞那种根据定位获取天气，或者是展示更多天气的那种，可以参考下面的大佬的文章
首页的学校格言和荣誉，自行根据字数的多少，来使用和注释不同的css代码，实现一行两列或两行一列的效果
5. 地图 pages/map/map
这里暂时不用改什么，说下相关细节
考虑到会存在不同校区的路线规划，相关逻辑会变得复杂，故取消了地图边界的设定。需要的可以自行研究
地图边界：限制地图的显示范围，不能滑出这个范围。通过 MapContext.setBoundary 接口实现
简单说明一下，判断当前位置是否在学校内部 的逻辑
①先确定学校范围，即一个在地图上的，闭合的，边不交叉的多边形
②接着通过 wx.getLocation 接口获取当前的地理位置
③使用射线法判断点是否在多边形内，从而推断出 当前位置 是否在校区内
wx.getLocation接口 申请教程，如果实在搞不定接口，可以询问群友
射线法简要原理： 平面几何：判断点是否在多边形内（射线法）
再说下 自定义图层（就是覆盖在地图上的图片）
自定义图层是通过 MapContext.addGroundOverlay 接口实现（创建自定义图片图层，图片会随着地图缩放而缩放）
自定义图层不会在 微信开发者工具上 显示，只能在移动端查看
我使用是因为，我的学校在腾讯地图上太干净了，啥都没有，影响观感
可以来比较一下，原始地图上不同学校的观感（都是100米标尺），简直是天壤之别
6. 更多 pages/more/more
去除了授权登录的全部代码，因为现在想要获取小程序用户头像昵称很麻烦
有需要的可以自行研究
“特别说明”按钮中的说明信息 自行修改 ，若不用就删掉
“推荐给好友”按钮，之前是能转发，但目前我的小程序没法认证，就改成预览图片
接下来就是信息管理的内容了，主要就是说下如何进行管理
7. 地点相关 pages/manage/site/*
默认地点：定位不在学校时，地图显示的地点
学校范围：用来判断当前定位点是否在学校内部
这俩是必需的
地点类型和地点倒是没啥好说的，倒是校区需要注意一些东西
说下顺序
①先创建校区和地点类型（不然地点选不了这俩），再去创建地点
②创建地点后，回去校区管理，选定对应校区的默认地点（不然地图页会出问题）
③如果删除某个校区下的默认地点，需要重新选定其他地点作为默认地点
新增校区时
①填写经纬度后，才能选取校区范围，使用 坐标拾取器 获取
②关闭“使用图片”的话，地图页上就显示校区范围的多边形；打开的话，就显示这张图片
③图片的四边对应的经纬度，可以使用 ps和坐标拾取器 获取
关于校园地图图片
个人还是非常建议使用自定义图层图片的（校园地图图片），因为观感很好
大伙自行注意 图片版权
PS：
电脑端的小程序无法显示自定义图层，只能通过手机投屏或者安卓模拟器进行演示
因为是覆盖在腾讯地图上的，为了准确，最好以腾讯地图为参照进行图片处理
获取图片的方式无外乎几种：
①去 学校官网、官微、相关社团、网络、宣传手册、校园内 找找 手绘地图 / 电子地图 / 俯视地图 / 沙盘地图 / 学校区域示意图
如果有且比较规整，那可以直接或者改改就用
②去 天地图 / Google地图 / 百度地图 / 腾讯地图 / 高德地图 / 其他地图，截取卫星地图，之后可以投给AI进行优化（比如GPT-4o、豆包等工具的图片处理功能）
AI提示词：生成图片、图片风格为平面、图片风格为板绘、图片风格为手账…
之后简单扣个图，就能用了
实在搞不定，也没事，那就不用了
至于我的话，我是从学校宣传板上拍了张照片，接着用PS改出来的图片
8. 媒体管理 pages/manage/media/*
轮播图
①上传比例一致的图片，不然显示效果不好
②如果要确保顺序，建议一张一张地传，不然顺序会乱
视频
可传可不传
地点默认图片
新增地点时，如果不选择图片，那么会使用这的图片
9. 校园指南管理 pages/manage/schoolguide-list
这里其实用的是富文本（类似html的一种格式），当初是为了想实现换行才用了富文本
然后这里的名称、搜索关键词、内容，都可以在前面的校园指南页的搜索框去搜索
10. 管理员管理 pages/manage/admin-list
11. 其他
有个比较尴尬的情况，需要注意一下：
小程序没有发行，那别人看不到你的小程序
此时你只能去小程序后台，将对方添加为你的开发成员，再让他扫预览的二维码，这样才能访问小程序
到这里就结束啦，表扬一下优秀的你自己吧，能够把这么长的教程看完