网站开发到上线,wordpress通知发帖,个人备案能做公司网站吗,wordpress创建搜索页面Gitee代码仓库#xff1a;桂院校园导航小程序
GitHub代码仓库#xff1a;GLU-Campus-Guide
演示视频 中国大学生计算机设计大赛-移动应用与开发-云上高校导航 升级日志 1.3
优化了小程序的数据存储方式#xff0c;对部分页面进行了调整#xff0c;调整了功能和代码。
引…Gitee代码仓库桂院校园导航小程序
GitHub代码仓库GLU-Campus-Guide
演示视频 中国大学生计算机设计大赛-移动应用与开发-云上高校导航 升级日志 1.3
优化了小程序的数据存储方式对部分页面进行了调整调整了功能和代码。
引入weui组件库使地点的呈现方式更加美观
序号内容详情效果1删除少量无用之物删除无用代码和图片 代码更短项目占用空间更小 2引入weui组件库修改了模态框的样式可以显示图片和描述呈现方式更加美观3预留地铁图功能注释了地铁图插件调用的代码 申请插件微改代码后可以使用地铁图插件 4地图相关函数的参数全部写入utils.js引入 直接在utils.js里修改就行 5默认图片功能加入默认图片管理功能地点的默认图片可以自行上传
weui中的mp-dialog组件效果点击空白处是可以关闭mp-dialog框的 导入项目并进行相关的操作
桂院校园导航 | 云上高校导航 导入与配置教程 上传所有云函数
将 cloudfunctions云函数文件夹 下的 每一个文件夹 - 右键 - 上传并部署
建立数据库集合并导入对应文件
admincategoryresourcesite 修改数据库集合权限
将数据库中 所有集合 的数据权限 改为 第一项
1. 全局 app.json
app.json 中的 navigationBarTitleText 属性 设置的是 全局导航栏标题文字改成自己的小程序名。 navigationBarTitleText: 桂院校园导航, 2. 校园信息 pages/school/school
自行修改
包括但不限于 小程序名称 、学校全称 、学校简称 、学校英文名 、学校英文简称 、坐标别把 经度 和 纬度 填反了 、校徽将新图片拖入文件夹覆盖原图片 、学校信息 、 学校简介。
天气
天气功能是调用 和风天气API 实现。我只展示学校那的天气所以相关的数据就写死了。使用坐标拾取器就能获取学校的坐标。
根据和风天气API的规定传入的坐标最多只到小数点后两位所以不要写多了。 坐标拾取器 如果你想搞那种根据定位获取天气或者是展示更多天气的那种可以参考下面的大佬的文章 微信小程序实现天气预报功能支持自动定位附源码 官微按钮是通过 wx.previewImage 接口实现全屏预览图片。 获取 公众号二维码 的方法 招生官微按钮是通过 wx.navigateToMiniProgram 接口实现跳转外部小程序。如果你学校没有小程序就改成像楼上一样全屏预览图片学校的官方图书馆、学生会或者什么的公众号。 获取 小程序 appId 的方法 3. 地图信息 pages/map/map
很多参数都是通过utils.js引入自行在utils.js更改。相关的参数按照注释自行修改 地图中心点坐标
取最西和最东的坐标两个经度平均值就是中心点坐标的经度。
取最南和最北的坐标两个纬度平均值就是中心点坐标的纬度。 坐标拾取器 地图边界
地图边界是通过 MapContext.setBoundary 接口实现限制地图的显示范围。
这个接口使用有要求基础库 2.22.0及以上版本 修改 红框 里的 西南角和东北角 的 经度纬度 为 你自己学校区域西南角和东北角的坐标最好是选远一点别把 经度 和 纬度 填反了 坐标拾取器 自定义图层覆盖校园地图
我使用这个是因为我的学校在腾讯地图上太干净了啥都没有。。。影响观感。
之后用PS画的校园地图。
可以来比较一下不同学校都是100米标尺简直是天壤之别。
自定义图层是通过 MapContext.addGroundOverlay 接口实现创建自定义图片图层图片会随着地图缩放而缩放。
自定义图层不会在 微信开发者工具上 显示只能在移动端查看。
判断所在位置是否在校区内
通过 wx.getLocation 接口获取当前的地理位置。将其中的 经度 纬度 进行判断经度 和 纬度 在特定范围内就说明 你的位置在校区内。
定位不在学校时的默认坐标的修改
我把默认位置设置为东门就使用云函数从数据库 地点集合 中 找到 那个地点 的 类别编号 和地点编号。
修改 红框 里的 内容 为 你想要 设定的默认地点的名称这个名称必须要确保在 地点集合的name字段 存在
markertap 自定义函数
默认地点是那个类别的第几个就把那个数填入 红框 处 4. 学校信息 pages/school/information/information
院系信息 和 部门联络电话 引用 utils.js 里的数据院系信息是用list存储的部门联络电话是用嵌套list存储的比较好理解 改成自己的。
嵌套list 外层 是 部门 内层是当前 部门 下的 所有 联络信息。
5. 交通信息 pages/school/traffic/traffic
因为其中涉及到了多种颜色不好写在until.js里引入使用。就将文字全部写死自行修改。
不同颜色的文字使用不同样式渲染。
如果想要使用地铁图插件根据定位获取当前城市的地铁信息
那要先申请地铁图插件然后在app.json中引入插件包其实在路线规划插件后接着写就行
{plugins: {subway: {version: 1.0.13,provider: wx6aaf93c4435fa1c1}}
}
接着取消这两个文件中的注释 就可以使用地铁图了。 6. 个人中心 pages/mypage/mypage
去除了登录的全部代码因为现在想要获取小程序用户头像昵称有点麻烦
要想获取当前微信用户的昵称及头像请查看以下说明大致思路是第一次就让用户填写然后存入数据库中之后就通过openid调出图片和昵称让用户无需再次填写
有需要的可以自行研究 小程序用户头像昵称获取规则调整公告 “特别说明”按钮中的说明信息 自行修改 或 直接删除这段页面代码
“联系作者”按钮是通过 wx.previewImage 接口实现全屏预览图片自行在utils.js中更改为你自己的微信二维码。
“获取opnenid”按钮点击直接显示openid并可以直接点击复制。获取了 openid 填入 云数据库 的 admin集合 的 openid字段 之后就可以点进后台了。
7. 软件声明与致谢 pages/mypage/statement/statement
自行修改
如果用到了 我的项目或代码 请说明谢谢
如果你开源自己项目就自行更改否则直接删除那一部分
8. 管理界面 pages/admin/admin
有想法的话可以尝试改为以下这种方式如果你之前把学校信息页的院系信息和部门联络电话改为获取云数据库的数据可以自行添加页面。
9. 管理界面 pages/admin/manage-resource/manage-resource
如果你没有地图就对媒体管理的代码进行相应的删改。
接下来的都是地点管理相关内容了。 10. 地点管理 pages/admin/site-manage/site-manage
在数据库的resource集合中新加了一条记录。
先在这里上传一张图片那么在新增地点时如果不选择图片那么会上传这张图片。
11. 地点集合 site //地点集合字段说明 name地点名称 aliases地点别名可为空 img图片链接 desc地点描述可为空 latitude纬度 longitude经度 到这里就完成了表扬一下优秀的你自己吧能够把这么长的开发教程看完
