桂院校园导航 | 云上高校导航 云开发项目 二次开发教程 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.mfbz.cn/a/154145.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言再学习 -- 编程规范

C语言编程规范这部分一直想总结一下。现在终于付诸行动了。 其实之前讲过一些面试题,参看:嵌入式面试知识点总结 – C语言篇 里面已经有包含一部分了,比如《高质量C C编程指南》.林锐着.pdf。 此次主要参考 华为技术有限公司c语言编程规范 …

交换机如何配置BGP协议

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

本地开发环境和服务器传输数据的几种方法

❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博…

听GPT 讲Rust源代码--library/core/src(8)

题图来自 Hello, crustaceans. File: rust/library/core/src/future/ready.rs 在Rust源代码中,rust/library/core/src/future/ready.rs文件的作用是定义了一个名为Ready的Future类型。Ready是一个简单的Future实现,它立即返回一个给定的值。 Ready 是一个…

新晋“学霸”夸克大模型拿下C-Eval和CMMLU双榜第一

11月16日,根据最新成绩,千亿级参数的夸克大模型登顶C-Eval和CMMLU两大权威评测榜单,多项性能优于GPT-4。在国内大模型赛道火热的当下,夸克自研大模型凭借过硬的研发能力及数据、行业、平台等优势成为新晋“学霸”。 作为国内最权…

智能家居小程序

1、设备 系统板:STM32F103C8T6 温湿度传感器:DHT11 光照度传感器: BH1750 WIFI模块:ESP8266-015 蜂鸣器: 立创EDC画板子,然后微立创下单

小型企业如何选择非管理型交换机?

网络的一个关键要素都是交换机,它在连接设备和确保无缝数据流动方面发挥着关键作用。特别是非管理型交换机,为希望提升网络能力的小型企业提供了一种经济高效的解决方案。在本文中,我们将探讨非管理型交换机在小型企业网络中的广泛应用以及小…

十、http客户端Feign

目录 一、使用Feign客户端 1、修改pom文件 2、在启动类OrderApplication中加入注释 3、创建客户端接口 4、装配UserClient,并且进行远程调用 5、发送请求,查看服务调用情况 二、定义Feigin的配置 方式一:配置文件方式 (1&…

selenium 网页自动化-在访问一个网页时弹出的浏览器窗口,我该如何处理?

前言 相信大家在使用selenium做网页自动化时,会遇到如下这样的一个场景: 在你使用get访问某一个网址时,会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而,很不幸,Alert类处理的结果就是没…

蓝桥杯第三周算法竞赛D题E题

发现更多计算机知识,欢迎访问Cr不是铬的个人网站 D迷宫逃脱 拿到题目一眼应该就能看出是可以用动态规划来解决。但是怎么定义dp呢? 这个题增加难度的点就在当所在位置与下一个要去的位置互质的时候,会消耗一把钥匙。当没有钥匙的时候就不能移动了。想…

基础课5——垂直领域对话系统架构

垂直领域对话系统是指针对特定领域或行业的需求而构建的对话系统。这种系统通常需要具备高度的专业知识和对特定领域的知识库进行深入的学习和训练,以便能够提供准确、高效、实用的服务。 垂直领域对话系统的构建通常包括以下步骤: 确定目标领域或行业…

广州华锐互动VRAR:VR教学楼地震模拟体验增强学生防震减灾意识

在当今社会,地震作为一种自然灾害,给人们的生活带来了巨大的威胁。特别是在学校这样的集体场所,一旦发生地震,后果将不堪设想。因此,加强校园安全教育,提高师生的防震减灾意识和能力,已经成为了…

目标检测—YOLO系列(一)(YOLOv1/2/v3/4/5/x/6/7/8)

目标检测概述 什么是目标检测? 滑动窗口(Sliding Window) 滑动窗口的效率问题和改进 滑动窗口的效率问题:计算成本很大 改进思路 1:使用启发式算法替换暴力遍历 例如 R-CNN,Fast R-CNN 中使用 Selectiv…

使用yolov8的一些错误

出现这个报错的时候: AutoInstall will run now for ultralytics.nn.modules.conv but this feature will be removed in the future. Recommend fixes are to train a new model using the latest ultralytics package or to run a command with an official YOLO…

java代码审计(入门级)—基础漏洞合集

目录 (一)前言 (二)经典漏洞的代码审计 1、SQL注入 漏洞原理: 连接数据库的方式: 代码审计 2、XXE(XML外部实体注入) 漏洞原理 代码审计: 3、xss 漏洞原理 X…

P1941 飞扬的小鸟

P1941 飞扬的小鸟 Description Flappy Bird 是一款风靡一时的休闲手机游戏。玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙。如果小鸟一不小心撞到了水管或者掉在地上的话,便宣告失败。 为了简化问题&am…

集群搭建(redis7)

一、主从复制(replica)(不推荐) 介绍 主从复制 mmaster以写为主,slave以读为主当master数据变化时,自动将新的数据异步同步到其他slave数据库 读写分离down机恢复数据备份水平扩容支撑高并发 基本操作 配从不配主 权限细节 maste…

【Git企业开发】第八节.企业级开发模型和企业级项目管理实战

文章目录 前言一、企业级开发模型 1.1 系统开发环境 1.2 Git分支设计规范二、企业级项目管理实战 2.1 DevOps研发平台 2.2 开发场景-基于git flow模型的实践 2.3 环境bug修复总结 前言 一、企业级开发模型 我们知道,一个软件从零开始到最终…

C语言对10个数进行排序,使用快速排序算法

完整代码&#xff1a; // 对10个数进行排序&#xff0c;使用快速排序算法 #include<stdio.h>//用第一个元素将待排序序列划分成左右两个部分&#xff0c;返回排序后low的位置&#xff0c;即枢轴的位置 int partition(int arr[],int low,int high){//让待排序序列中的第一…

最新计算机网络考试试题分析与整理

博主今天下午刚刚考完试&#xff0c;针对今天计网考试知识点进行整理总结&#xff0c;希望可以对大家有所帮助~ 目录 1.先看简答大题共五道 1.1CRC冗余码计算 1.2tcp拥塞控制 1.3tcp报文段 1.4RIP路由表更新 1.5子网划分 2.再看填空题七道 2.1网络边缘端系统间的通信关…
最新文章