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

news2025/1/12 2:46:31

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

GitHub代码仓库:GLU-Campus-Guide

升级日志 1.3

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

引入weui组件库,使地点的呈现方式更加美观

序号内容详情效果
1删除少量无用之物删除无用代码和图片

代码更短,项目占用空间更小

2引入weui组件库修改了模态框的样式可以显示图片和描述,呈现方式更加美观
3预留地铁图功能注释了地铁图插件调用的代码

申请插件,微改代码后可以使用地铁图插件

4地图相关函数的参数全部写入utils.js引入

直接在utils.js里修改就行

 weui中的mp-dialog组件效果(点击空白处是可以关闭mp-dialog框的)

导入项目,并进行相关的操作

桂院校园导航 | 云上高校导航 导入与配置教程

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 接口获取当前的地理位置。将其中的 经度 纬度 进行判断,经度 和 纬度 在特定范围内,就说明 你的位置在校区内。

​​


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

要修改 data 中的一个变量 和 location 和 markertap 这两个自定义函数的部分代码。

data

我设置的 默认地点 是 东门 ,属于第 4 个 类别(嵌套列表外层 id 是 4 )

location 自定义函数

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

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

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

​​

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

去除了登录的全部代码,因为现在想要获取小程序用户头像昵称很麻烦

有需要的可以自行研究

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


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

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

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

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

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

​​


接下来的是地点数据说明。


8.地点数据

地点数据 引用 utils.js 里的数据。是用嵌套list存储的,比较好理解, 改成自己的。

嵌套list 外层 是 类别 ,内层是当前 类别 下的 所有 地点。

里面的数据都要加上引号

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

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

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

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

相关文章

例解什么是Python装饰器

Python中的装饰器一直是一个比较难理解的概念,我自己理解的就是用一个函数去修改另一个函数,主要是为另一个函数添加计时等功能,而且不用改变另一个函数,这样就大大减少了另一个函数的维护成本。 这个装饰器,英文名就…

前端404页面的制作

1、背景 前端开发经常遇到输入路径不存在的问题&#xff0c;为此&#xff0c;把之前项目的404拿出来供大家参考。代码很简单&#xff0c;适合新手入手&#xff0c;效果如下&#xff1a; 2、代码引用的是element-plus框架 <template><div><el-result icon"…

jQuery【事件处理器、鼠标事件、表单事件、键盘事件、浏览器事件、事件对象、jQuery遍历】(三)-全面详解(学习总结---从入门到深化)

目录 事件之绑定事件处理器 事件之鼠标事件 事件之表单事件 事件之键盘事件 事件之浏览器事件 事件对象 jQuery遍历 事件之绑定事件处理器 1、 .on() 在选定的元素上绑定一个或多个事件处理函数 $("#button").on("click", function(event){console…

笔记53:torch.nn.rnn() 函数详解

参数解释&#xff1a; &#xff08;1&#xff09;input_size()&#xff1a;即输入信息 Xt 的每个序列的独热编码向量的长度&#xff0c;即 len(vocab) &#xff08;2&#xff09;hidden_size()&#xff1a;即隐变量 h 的维度&#xff08;维度是多少&#xff0c;就代表用几个数…

【JUC】九、线程池ThreadPool

文章目录 1、线程池2、分类3、线程池的使用4、工作流程5、拒绝策略6、线程池的七个参数7、自定义线程池8、什么时候考虑使用线程池&#xff1f; 1、线程池 线程池和数据库连接池的理念很相似&#xff0c;对于数据库连接池&#xff1a;普通的连接数据库是建立一个JDBC连接&…

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

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

注册表单mvc

jsp给我们的ControllerServlet 1在哪看到我们的数据呢 2什么时候用了session,有什么用 register.jsp 获取表单的name,email formBean.name是怎么定义的 3为什么就可以formbean访问 要使用的jsp对象都在servlet里面用setAttribute定义的 request.getSession().setAttribute…

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

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

大数据Doris(二十四):数据导入(Stream Load)介绍

文章目录 数据导入(Stream Load)介绍 一、适用场景 二、基本原理

quartz笔记

Quartz-CSDN博客 上面是Quartz的一些基本知识,如果对quartz的基本API不是很了解的话,建议先看下上面的 和Linux Crontab对比 1.执行粒度: Linux Crontab是进程级 quart是线程级 2.跨平台性: Crontab只能在Linxu运行 quart是java实现,可以跨平台 3.调度集上 Crontab的…

网络的概念与定义

一.网络的概念与定义 1.1 网络的概念 具有独立功能的计算机通过通信介质连接起来就形成了网络。为了满足人们的各种需求&#xff0c;比如访问网页&#xff0c;在线游戏&#xff0c;在线视频等&#xff0c;会形成比如文本&#xff0c;图片&#xff0c;视频等都是信息的不同呈现方…

【AI视野·今日NLP 自然语言处理论文速览 第六十四期】Fri, 27 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 27 Oct 2023 Totally 80 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers torchdistill Meets Hugging Face Libraries for Reproducible, Coding-Free Deep Learning Studies: A Case …

11.16 知识总结(模型层更多内容)

一、 多表查询&#xff08;跨表查询&#xff09; <br class"Apple-interchange-newline"><div></div> 子查询&#xff1a;分步查询 链表查询&#xff1a;把多个有关系的表拼接成一个大表(虚拟表) inner join left join right join 1.1 基于双下划…

【EI会议征稿】第三届网络安全、人工智能与数字经济国际学术会议(CSAIDE 2024)

第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#xff09; 2024 3rd International Conference on Cyber Security, Artificial Intelligence and Digital Economy 第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#…

鸿蒙4.0真机调试踩坑

传言鸿蒙next版本将不再兼容Android&#xff0c;所以领导安排做下鸿蒙开发的调研工作。 鸿蒙开发指南其实已经非常的友好了。但是鸿蒙开发本身还是有些坑要踩&#xff0c;这篇文章主要讲了鸿蒙真机调试问题。 目前手上的真机为华为 nova6&#xff0c;处理器为麒麟990.鸿蒙系统…

Python从 0 到 1 系统学习的全面详细内容

这里为大家梳理了一些Python从 0 到 1 系统学习的全面详细内容&#xff0c;想要系统的自学Python&#xff0c;希望我们可以提供一个框架&#xff0c;方便作为参考&#xff0c;学习Python。 1、为什么要学习Python&#xff1f; Python是一种功能强大的编程语言&#xff0c;它具…

WebGoat环境搭建

首先安装jdk&#xff0c;此步骤省略…验证 直接打开cmd&#xff0c;输入以下命令&#xff1a; java -version &#xff08;可以查看安装的JDK版本。&#xff09; javac &#xff08;查看java文件编译成的class文件&#xff09; WebGoat下载 WebGoat的下载地址&#xff1a;Relea…

x3daudio1_7.dll错误:解决方法和丢失原因及作用

x3daudio1_7.dll是Windows操作系统中的一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;主要作用是为DirectX音频提供支持。DirectX是微软推出的一套多媒体应用程序开发接口&#xff0c;广泛应用于游戏、多媒体制作等领域。x3daudio1_7.dll文件包含了许多与三维音频…

atoi函数的模拟实现

函数原型&#xff1a;int atoi (const char * str); 作用&#xff1a;将字符串转换为整数 注意事项&#xff1a; 1、会忽略字符串前的空白字符&#xff0c;并从第一个非空白字符开始解析整数&#xff0c;直到遇到非数字字符为止 具体代码如下&#xff1a; #include <s…

异行星平台--CRM系统搭建

使用异行行低代码平台搭建的CRM系统。CRM系统中&#xff0c;包括“客户”、“商机”、“合同”、“回款”、“开票”、“营销”、“回访”、“产品”、“联络人”、“销售订单”、“线索”。 “管理后台”可能是指一个用于管理后台系统的应用&#xff0c;可能包括对各种功能和数…