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

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.mzph.cn/news/144649.shtml

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

相关文章

深度学习之基于Pytorch和OCR的识别文本检测系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介深度学习与OCRPyTorch在OCR中的应用文本检测系统的关键组成部分1. 图像预处理2. 深度学习模型3. 文本检测算法4. 后处理 二、功能三、系统四. 总结 一项目简…

对象存储OSS服务器邀请试用

文章目录 试用产品领取产品试用权限上传文件开启加速传输提交作品小程序提交任务获取奖励 试用产品 先下载要上传的资源 电脑浏览器打开此页面开始试用,页面如下图 未登录的先登录 领取产品试用权限 在该页面中点击立即试用,弹框勾选服务协议并领取试…

C的内联函数(C99)

文章目录 内联函数(C99)参考 内联函数(C99) 通常,函数调用都有一定的开销,因为函数的调用过程包括建立调用、 传递参数、跳转到函数代码并返回。使用宏使代码内联,可以避免这样的开销。 C99还…

MIB 6.1810操作系统实验:准备工作(Tools Used in 6.1810)

6.1810 / Fall 2023 实验环境: Ubuntuxv6实验必要的依赖环境能通过make qemu进入系统 $ sudo apt-get update && sudo apt-get upgrade $ sudo apt-get install git build-essential gdb-multiarch qemu-system-misc gcc-riscv64-linux-gnu binutils-ri…

Netty - 回顾Netty高性能原理和框架架构解析

文章目录 概述JDK 原生 NIO 程序的问题Why Netty使用场景Related ProjectsNetty 高性能设计I/O 模型【阻塞 I/O】:【I/O 复用模型】【基于 Buffer】 线程模型事件驱动模型Reactor 线程模型Netty的线程模型异步处理 Netty框架的架构设计功能特性模块组件Bootstrap、S…

jbase实现通用码表

没有通用码表的体系是不完美的,当年我用C#能实现的通用码表,现在在java一样的实现了,通用码表对提高开发效率和降低开发成本的作用巨大,开发可以专注写业务,而不必被太多的维护界面束缚。进而体现在产品竞争力上面&…

大模型在数据分析场景下的能力评测|进阶篇

做数据分析,什么大模型比较合适? 如何调优大模型,来更好地做数据计算和洞察分析? 如何降低整体成本,同时保障分析体验?10月25日,我们发布了数据分析场景下的大模型能力评测框架(点击…

【微信小程序】使用npm包

1、小程序对npm的支持与限制2、Vant Weapp通过 npm 安装修改 app.json修改 project.config.json构建 npm 包 3、使用4、定制全局主题样式5、API Promise化 1、小程序对npm的支持与限制 目前,小程序中已经支持使用npm安装第三方包, 从而来提高小程序的开发…

【T690 之十一】基于方寸EVB2开发板,结合 Eclipse+gdb+gdbserver 调试 CCAT 的流程总结

目录 1. 准备工作1.1 Eclipse1.2 工程编译1.3 烧写固件 2. 创建工程2.1 搭建调试工程2.2 配置Dbug调试信息 3. 调试4. 手动调试过程4. 总结 备注: 1,假设您已对方寸微电子的T690系列芯片的使用方式都有了一定的了解,可以根据此文的配置进行Li…

OpenAI暂停新的ChatGPT Plus注册 | OpenAI 的 GPT Builder 创建您的 GPTs

OpenAI DevDay 才过去仅仅一周时间,伴随着开发者大会上发布的一系列重磅升级和新特性,无疑这样的进化速度让广大网友炸锅了,其火热程度可见一斑。 就在四个小时前,OpenAI的CEO Sam Altma突然宣布,ChatGPT Plus账号暂停…

桂院校园导航 静态项目 二次开发教程 1.3

Gitee代码仓库:桂院校园导航小程序 GitHub代码仓库:GLU-Campus-Guide 升级日志 1.3 优化了小程序的数据存储方式,对部分页面进行了调整,调整了功能和代码。 引入weui组件库,使地点的呈现方式更加美观 序号内容详情…

leetcode - 串联所有单词的子串 - 最小覆盖子串 - x 的平方根

I30. 串联所有单词的子串 - 力扣(LeetCode) 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如,如果 words ["ab&qu…

当设计模式遇上万象:探秘适配器模式的神奇变身

文章目录 一、概念二、角色三种形式1. 类适配器对象适配器接口适配器 优缺点优点:缺点 一、概念 适配器模式(Adapter Pattern)又叫做变压器模式,它的功能是将一个类的接口变成客户端所期待的另一种接口,从而使原本接口不匹配而无…

通过Python设置及读取PDF属性,轻松管理PDF文档

PDF文档属性是嵌入在PDF文档中的一些与文档有关的信息,如作者、制作软件、标题、主题等。PDF属性分为默认属性和自定义属性两种,其中默认属性是一些固定的文档信息,部分信息自动生成(如文件大小、页数、页面大小等信息&#xff09…

基于Qt 多线程(继承 QObject 的线程)

​ 继承 QThread 类是创建线程的一种方法,另一种就是继承QObject 类。继承 QObject 类更加灵活。它通过 QObject::moveToThread()方法,将一个 QObeject的类转移到一个线程里执行。恩,不理解的话,我们下面也画个图捋一下。 通过上面的图不难理解,首先我们写一个类继承 QObj…

单脉冲测角-和差比幅法

和差比幅法单脉冲测角 单脉冲测角的类型阵列接收模型和差波束构造方法和差比幅测角仿真 单脉冲测角的类型 传统的单脉冲测向方法主要有3种,分别是半阵法、加权法和和差比幅法。其实这3种方法都需要形成和波束和差波束,只是波束形成的方法不同&#xff0…

CSS Form表单布局

效果图 <Tab IsCard"true"><TabItem Text"表单信息-DIV版本"><div class"row"><div class"col"><label for"field1">工程名称:</label><input class"form-control" type&…

SQL练习---619.出现一次的最大数字

题目 分析 首先确定表的来源只有一个表数字表&#xff0c;再者判断他是不是单一数字&#xff0c;&#xff08;想到的是直接按数字分组&#xff0c;通过count函数来判断是否为单一数子&#xff09;&#xff0c;然后求最大值。 题解 select Max(num) as num from MyNumbers wh…

爬虫项目(12):正则、多线程抓取腾讯动漫,Flask展示数据

文章目录 书籍推荐正则抓取腾讯动漫数据Flask展示数据 书籍推荐 如果你对Python网络爬虫感兴趣&#xff0c;强烈推荐你阅读《Python网络爬虫入门到实战》。这本书详细介绍了Python网络爬虫的基础知识和高级技巧&#xff0c;是每位爬虫开发者的必读之作。详细介绍见&#x1f44…

CSS花边001:无衬线字体和有衬线字体

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…