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

news2024/11/26 22:45:19

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:经度

到这里就完成了,表扬一下优秀的你自己吧,能够把这么长的开发教程看完

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1216816.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sscanf提取相应字符到数组

代码如下 #include<stdio.h> #include<string.h>int main(int argc, char const *argv[]) {char buf[128] {0};int m1 0, m2 0;int s1 0, s2 0;char lrc[128] "";sscanf("[02:16.33][04:11.44]我想大声宣布对你恋恋不舍","[%*1d%d…

【Pytorch笔记】7.torch.nn (Convolution Layers)

我们常用torch.nn来封装网络&#xff0c;torch.nn为我们封装好了很多神经网络中不同的层&#xff0c;如卷积层、池化层、归一化层等。我们会把这些层像是串成一个牛肉串一样串起来&#xff0c;形成网络。 先从最简单的&#xff0c;都有哪些层开始学起。 Convolution Layers -…

YOLO目标检测——谢韦尔钢材缺陷检测数据集下载分享【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;钢材质量控制、钢材缺陷检测数据集说明&#xff1a;谢韦尔钢材缺陷检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(jso…

交换机如何配置BGP协议

环境&#xff1a; 华为交换机 华三交换机 问题描述&#xff1a; 交换机如何配置BGP协议 解决方案&#xff1a; 华三交换机上配置案例 1.配置BGP协议&#xff0c;可以按照以下步骤进行&#xff1a; 登录交换机&#xff1a;使用SSH、Telnet或控制台等方式登录到华三交换…

SpringBoot整合Redis使用基于注解的缓存

环境准备 注解 EnableCaching CacheConfig CacheConfig 提供了一种在类级别共享公共缓存相关设置的机制。 | 参数 | 作用 | | | — | — | — | | cacheNames | 使用在类上的默认缓存名称 | | | keyGenerator | 用于类的默认KeyGenerator的bean名称 | | | cacheManager | 自定…

Linux内核中的内存管理剖析,干货收藏!

内存管理的主要工作就是对物理内存进行组织&#xff0c;然后对物理内存的分配和回收。但是Linux引入了虚拟地址的概念。 虚拟地址的作用 如果用户进程直接操作物理地址会有以下的坏处&#xff1a; 用户进程可以直接操作内核对应的内存&#xff0c;破坏内核运行。 用户进程也…

【小黑送书—第七期】>>程序员To架构师?一起来看架构师系列书籍推荐

相信大家都对未来的职业发展有着憧憬和规划&#xff0c;要做架构师、要做技术总监、要做CTO。对于如何实现自己的职业规划也都信心满满&#xff0c;努力工作、好好学习、不断提升自己。 相信成为一名优秀的架构师是很多程序员的目标&#xff0c;架构师的工作包罗万象&#xff…

工业智能网关:工业物联网智慧连接

工业智能网关是工业互联网的核心设备之一&#xff0c;它承担着连接设备、搜集数据、分析数据、设备控制和实现设备智能化管理的重要任务。随着工业互联网的快速发展&#xff0c;工业智能网关的作用变得越来越重要。 计讯物联5G/4G工业智能网关是一种连接工厂设备与互联网的关键…

如何优化谷歌商店里应用的评分评论1

低的评分和评论会引起的连锁反应&#xff0c;会对搜索和浏览可见性产生负面影响&#xff0c;同时拖累我们围绕应用商店优化所做的一切。所以解决负面评论的问题并提高应用的评分&#xff0c;对于提高应用商店的知名度至关重要。 1、分析应用评论。 我们需要分析应用程序当前获…

java学习part03基本类型

22-变量与运算符-标识符的使用_哔哩哔哩_bilibili 1.标识符&#xff08;变量&#xff09;命名规则 2.变量类型 3.整型 4.浮点型 5.char字符 6.布尔boolean 7.基本类型的自动提升 8.强制转换 9.String String只能连接 会把其他类型的表面量转成字符串比如"true" &…

深度学习入门(第三天)——卷积神经网络

卷积神经网络应用领域 CV领域发展&#xff1a; 比赛中预测错误率的百分比&#xff0c;每年逐步下降。Human是人类肉眼的识别能力&#xff0c;2016年开始已经远高于人类肉眼死别能力&#xff0c;后面就取消了该方向的比赛了。 检测任务&#xff1a; 分类与检索&#xff1a; 分类…

【实习】modbus

介绍 详解Modbus通信协议—清晰易懂 Modbus协议是一个master/slave架构的协议。有一个节点是master节点&#xff0c;其他使用Modbus协议参与通信的节点是slave节点。每一个slave设备都有一个唯一的地址。在串行和MB网络中&#xff0c;只有被指定为主节点的节点可以启动一个命令…

Nginx配置免费HTTPS详细教程

文章目录 背景说明环境准备说明安装Nginx及依赖环境配置HTTPS步骤步骤1&#xff1a;创建服务器私钥步骤2&#xff1a;创建签名请求的证书&#xff08;CSR&#xff09;步骤3&#xff1a;加载SSL支持的Nginx并使用私钥时去除口令步骤4&#xff1a;将密钥文件移动到Nginx配置文件目…

redis未授权访问漏洞利用

当redis服务(6379)端口对外开放且未作密码认证时&#xff0c;任意用户可未授权访问redis服务并操作获取其数据。 攻击机&#xff1a;10.1.1.100 kali 目标靶机&#xff1a;10.1.1.200 一、探测redis的未授权访问 首先在攻击机上使用nmap对目标机进行扫描&#xff0c;探测开放的…

强引用、软引用、弱引用、虚引用的区别

Java中的引用有四种&#xff0c;分为强引用&#xff08;Strongly Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;和虚引用&#xff08;Phantom Reference&#xff09;4种&#xff0c;这4种引用强度依次逐…

单片机FLASH下载算法的制作

环境 硬件使用正点原子STM32F407探索者V2开发板 编程环境使用MDK 下载工具使用JLINK FLASH芯片使用W25Q128 什么是下载算法 单片机FLASH的下载算法是一个FLM文件&#xff0c;FLM通过编译链接得到&#xff0c;其内部包含一系列对FLASH的操作&#xff0c;包括初始化、擦除、写…

Python如何使用Networkx实现复杂的人物关系图?

Python如何使用Networkx实现复杂的人物关系图&#xff1f; 1 简单引入2 关于Networkx2.1 Networkx简单说明2.2 Networkx部分源码2.3 Networkx一个示例 3 人物关系图绘制过程3.1 创建原始数据3.2 获取目标文件数据3.3 获取颜色数据3.5 添加边数据3.6 定义边及权重3.7 图的布局、…

MySQL内部组件与日志详解

MySQL的内部组件结构 MySQL 可以分为 Server 层和存储引擎层两部分。 Server 层主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函数等&#xff09;&am…

GoLong的学习之路,进阶,标准库之并发(context)补充并发三部曲,你真的明白context吗?

其实对于&#xff0c;context来说&#xff0c;如果只是用来做并发处理就有些不太合适。因为对于golang来说&#xff0c;context应用场景不仅在并发有用&#xff0c;并且在网络链接&#xff0c;http处理&#xff0c;gorm中都有体现。但是其实&#xff0c;本质来说。以上这些场景…

租赁小程序|租赁系统一种新型的商业模式

租赁市场是一个庞大的市场&#xff0c;它由出租人和承租人组成&#xff0c;以及相关的中介机构和供应商等。随着经济的发展和人们对灵活性的需求增加&#xff0c;租赁市场也在不断发展和壮大。特别是在共享经济时代&#xff0c;租赁市场得到了进一步的推动和发展。租赁系统是一…