桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

这篇具有很好参考价值的文章主要介绍了桂院校园导航小程序 云开发项目 二次开发教程 1.0.1。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

GitHub代码仓库:GLU-Campus-Guide

演示视频

【2023广西赛区 | 三等奖】中国大学生计算机设计大赛 云上高校导航

建议使用新版本的项目及开发教程:桂院校园导航 | 云上高校导航 云开发项目 二次开发教程 1.3

先 假装 大伙都成功安装了云开发项目,并能在 微信开发者工具 和 手机 上正确运行。

接着就是 将项目 改成自己的学校。

代码里的注释我就不说明了,有提到 我的学校 的文字都改成你自己的就行

升级日志 1.1

优化了小程序的数据存储方式,对部分页面进行了调整,没有修改地图的功能和代码。

序号 内容 详情 效果
1 优化 学校信息的存储方式 写死在页面 -> 写入utils.js引入

只需修改utils.js中的数据

就能改变所有页面的学校信息

2 新增页面 个人信息页

同时将各类功能栏移至此处

3 移动页面内容 校园天气:学校信息页 -> 校园信息页

学校信息页的天气不易被察觉

移到信息页

4 移动页面内容 功能栏按钮:校园信息页 -> 个人中心页 区分不同类型的功能
5 替换图标 替换了部分页面的图标 使页面更加生动有活力
6 优化 获取opneid功能 控制台预览openid  -> 小程序直接复制 简化操作流程

上传所有云函数

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

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

建立数据库集合

admin category resource site

修改数据库集合权限

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

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

1. 全局 app.json

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

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

2. 更改学校信息 utils.js

自行修改

包括但不限于 小程序名称  、学校全称 、学校简称 、学校英文名 、学校英文简称 、学校坐标(别把 经度 和 纬度 填反了) 、校徽(将新图片覆盖原图片就行) 、学校信息 、 学校简介。

 天气功能是调用 和风天气API 实现。我只展示学校那的天气,所以相关的数据就写死了。使用坐标拾取器就能获取学校的坐标。

坐标拾取器

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

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

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

3. 校园信息 pages/school/school

图标栏后面的两个功能按钮,自行更改,实现方式如下。

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

获取 公众号二维码 的方法

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

获取 小程序 appId 的方法

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1​​

4. 学校信息 pages/school/information/information

院系信息 和 部门联络电话 引用 utils.js 里的数据,院系信息是用list存储的,部门联络电话是用嵌套list存储的,比较好理解, 改成自己的。

嵌套list 外层 是 部门 ,内层是当前 部门 下的 所有 联络信息。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1​​

5. 交通信息 pages/school/traffic/traffic

因为其中涉及到了多种颜色,不好写在until.js里引入使用。就将文字全部写死,自行修改

不同颜色的文字使用不同样式渲染。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1​​

6. 个人中心 pages/mypage/mypage

要想获取当前微信用户的昵称及头像,请查看以下说明(大致思路是:第一次就让用户填写,然后存入数据库中,之后就通过openid调出图片和昵称,让用户无需再次填写)

小程序用户头像昵称获取规则调整公告

“特别说明”按钮中的说明信息 自行修改 ,或 直接删除这段页面代码

“联系作者”按钮是通过 wx.previewImage 接口实现(全屏预览图片),自行更改为你自己的微信二维码

“获取opnenid”按钮点击直接显示openid,并可以直接点击复制。获取了 openid 填入 云数据库 的 admin集合 的 openid字段 后删掉,不然这个功能栏会显得很奇怪。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

7. 软件声明与致谢 pages/mypage/statement/statement

自行修改

如果用到了 我的项目或代码 请说明,谢谢!

如果你开源自己项目,就自行更改;否则直接删除那一部分

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1​​

8. 管理界面 pages/admin/admin

如果你没有地图,就对地图管理的代码进行相应的删改。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

可以尝试改为以下这种方式(如果你之前把学校信息页的院系信息和部门联络电话改为云开发,可以自行添加页面)。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


接下来的都是地图相关的了。


9. 地点管理 pages/admin/manage-site/manage-site

//地点集合字段解析

name:地点名称
aliases:地点别名(可为空)
img:图片链接
desc:地点描述(可为空)
latitude:纬度
longitude:经度

对 类别 和 地点 进行重新设定

TIP:想要尝试的话建议提前备份数据(数据库导出所有集合)。

① 提前准备好所有数据( 数据放 excel 或者 文档里,图片分类放 文件夹 里,能提高之后的操作效率 )

② 先清空 类别 和 地点 集合( 删掉集合再新建集合,如果实际操作发现不行的话就不删完,留一个记录 )

③ 在 类别管理界面 新增 所有类别

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

④ 在 地点管理界面 新增 所有地点 ( 建议在 微信开发者工具 操作,使用 复制粘贴大法,这里先不要上传图片

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

如果在新增地点时就上传图片会让云存储变得乱七八糟。

如果你不介意的话,直接跳过看下一条(上面深蓝色的字就不用管,新增地点时就上传图片)。

如果你介意的话,可以思考下怎么保持下面的样子还能正常显示。

哈哈哈不卖关子了其实很简单,往下看就是了。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

⑤把所有图片按类别分类放入文件夹并将整个文件夹上传到云存储(就像我仓库里那样)

⑥然后点进去,复制图片的 File ID(比如 二级学院 类别 下的 传媒学院 的 图片)

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

 ⑦进入数据库的 地点集合 ,找到 传媒学院 那条记录 ,将 img字段 用刚才复制的 File ID 覆盖修改就行(哪怕修改所有地点图片路径,也不会耗时很久哒)

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

当然 答辩项目演示时 就 用手机选择图片上传 就行,上面的做法只是为了美观、整齐、好管理。

10. 地图 pages/map/map

地图中心点坐标

 修改 红框 里的 经度纬度 为 你自己学校的坐标(别把 经度 和 纬度 填反了!!!

坐标拾取器

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


地图边界

地图边界是通过 MapContext.setBoundary 接口实现(限制地图的显示范围)。

 修改 红框 里的 西南角和东北角 的 经度纬度 为 你自己学校区域西南角和东北角的坐标(大概就行,选远一点也无妨)(别把 经度 和 纬度 填反了!!!

坐标拾取器

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


自定义图层(覆盖校园地图)

我使用这个是因为我的学校在腾讯地图上太干净了(啥都没有)。。。影响观感。

之后用PS画了三天三夜才画出来,真的痛苦。

可以来比较一下(都是100米标尺),简直是天壤之别

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

自定义图层是通过 MapContext.addGroundOverlay 接口实现(创建自定义图片图层,图片会随着地图缩放而缩放)。

自定义图层不会在 微信开发者工具上 显示,只能在手机端查看。

如果你的学校在地图上展示的效果很好就把 整个接口函数代码 删了。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


判断所在位置是否在校区内

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

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


 (所在位置不在学校时的)默认坐标的修改

要修改 getdefaultsite 、 location 和 markertap 这三个自定义函数的部分代码。

getdefaultsite 自定义函数

我把默认位置设置为东门,就使用云函数从数据库 地点集合 中 找到 那个地点 的 类别编号 和地点编号。

修改 红框 里的 内容 为 你想要 设定的默认地点的名称(这个名称必须要确保在 地点集合中 存在!!!

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


location 自定义函数

自行更改图中的两处的内容

上面的是 地图标注点 的 气泡文本内容(左右的那个空格不要删,不然显示会有点奇怪)

 下面的是 消息提示框 的内容

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1


markertap 自定义函数

默认地点是那个类别的第几个,就把那个数填入 红框 处

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

11. 地图选点 pages/admin/getpoint

修改地图中心点坐标(如果有自定义图层就自行修改)。修改方法与 地图页的 差不多,就不赘述了。

12. 地点管理 pages/admin/site-manage/site-manage

新增地点事,如果不选择图片,那么会默认上传一张图片。这张图片的图片链接自行修改。

桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

到这里就完成了,表扬一下优秀的你自己吧,能够把这么长的开发教程看完文章来源地址https://www.toymoban.com/news/detail-485002.html

到了这里,关于桂院校园导航小程序 云开发项目 二次开发教程 1.0.1的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验 因我们的项目是根据模板创建的,需先清理掉无效的页面代码,具体操作方式如下: 删除 pages 文件夹下的所有文件 用下方代码替换掉

    2023年04月10日
    浏览(43)
  • 基于微信小程序的智慧校园导航系统研究

    点我下载完整版 基于微信小程序的智慧校园导航系统研究 Research on Smart Campus Navigation System based on WeChat mini program 目录 2 摘要 3 4 第一章 研究背景与意义 4 1.1 校园导航系统研究的背景 4 1.2 微信小程序在校园导航系统中的应用 5 1.3 研究的目的和意义 7 第二章 相关技术介

    2024年02月04日
    浏览(41)
  • 基于微信小程序的校园导航小程序设计与实现

    💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/知乎/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例(持续更新) 🌟 文末获取源码+数据库+文档 🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项

    2024年02月19日
    浏览(41)
  • java毕业设计基于微信小程序的校园导航系统

    本系统 (程序+源码) 带文档lw万字以上    文末可领取本课题的JAVA源码参考 选题背景: 随着移动互联网技术的飞速发展,智能手机已成为人们日常生活中不可或缺的一部分。微信小程序作为一种新型的应用形式,因其无需下载安装、使用方便的特点,越来越多地被应用于

    2024年03月24日
    浏览(54)
  • 基于SpringBoot+Vue校园导航微信小程序的设计与实现

    博主主页: 一季春秋 博主简介: 专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发,远程调试部署、代码讲解、文档指导、ppt制作等技术指导。 主要内容: SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、小程序、安卓app、大数据等设计与开发。 感兴

    2024年03月12日
    浏览(46)
  • 校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程

    校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程 完整代码下载地址:校园二手书商城源代码基于微信小程序云开发 长话短说,下面直接说配置流程 1、下载导入 直接下载到本地,然后导入开发者工具 最近墙的厉害,也可使用蓝奏云下载 ht

    2023年04月24日
    浏览(74)
  • Axure原型设计项目效果 全国职业院校技能大赛物联网应用开发赛项项目原型设计题目

    目录 前言 一、2022年任务书3效果图 二、2022年任务书5效果图 三、2022年国赛正式赛卷 四、2023年国赛第一套样题 五、2023年国赛第二套样题 六、2023年国赛第三套样题 七、2023年国赛第四套样题 八、2023年国赛第七套样题 九、2023年国赛正式赛题(第八套样题) 九、2023年国赛第

    2024年03月26日
    浏览(53)
  • springboot毕业设计管理系统基于Java的校园导航微信小程序的设计与实现[源码+文档+开题+PPT

       🍅选题推荐——以防找不到我们,点击上方订阅专栏 ✌✌ 2024年计算机Java Python安卓APP微信小程序asp.net项目PHP毕业设计2000个热门选题推荐计算机毕业设计如何选题? 计算机毕业设计开题报告如何书写 论文的书写如何写出一篇好论文 计算机毕业设计答辩PPT注意事项书写

    2024年03月21日
    浏览(70)
  • 微信小程序开发工具导入开发项目教程-阿白必备

    1. 注册微信小程序或者小程序测试号 2. 下载并安装微信开发者工具 3. 打开-开发工具导入项目 4. 按下图操作。 5. 直接打开 6.点击编译后,即可预览。 7.上传代码到后台 点此进入微信公众平台-发布。 项目免费下载

    2024年02月12日
    浏览(57)
  • 【网站项目】校园订餐小程序

    🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹 赠送计算机毕业设计600个选题excel文件,帮助大学选题。 赠送开题报告模板,帮助书写开题报告。 作者完整代码目录供你选择: 《Springboo

    2024年04月13日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包