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

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

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

相关文章

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…

【算法总结】归并排序专题(刷题有感)

思考 一定要注意归并排序的含义&#xff0c;思考归并的意义。 主要分为两个步骤&#xff1a; 拆分 每次对半分(mid l r >> 1)输入&#xff1a;raw整块&#xff0c;输出&#xff1a;raw左块 raw右块 合并 每次都要对raw左块、 raw右块按照某种规则进行合并输入&#xf…

《变形监测与数据处理》笔记/期末复习资料(择期补充更新)

变形&#xff1a; 变形是物体在外来因素作用下产生的形状、大小及位置的变化&#xff08;随时间域和空间域的变化&#xff09;&#xff0c;它是自然界普遍存在的现象。 变形体&#xff1a; 一般包括工程建筑物、构筑物、大型机械设备以及其他自然和人工对象等。 变形体和变形…

手把手教你搭建属于自己的快递小程序

在数字化时代&#xff0c;小程序已经成为各行各业连接用户、提供服务、创造价值的重要工具。其中&#xff0c;快递寄件小程序因其实用性和广泛的需求&#xff0c;成为很多企业和开发者关注的焦点。本文将详细介绍如何快速创建快递寄件小程序&#xff0c;以及如何利用它实现盈利…

振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(1)

注解目录 1、倾斜传感器的那些基础干货 1.1 典型应用场景 &#xff08;危楼、边坡、古建筑都是对倾斜敏感的。&#xff09; 1.2 倾斜传感器的原理 1.2.1 滚珠式倾斜开关 1.2.2 加速度式倾斜传感器 1)直接输出倾角 2)加速度计算倾角 3)倾角精度的提高 &#xff08;如果…

MyBatis-Plus 系列

目录&#xff1a; 一、 Spring Boot 整合 MyBatis Plus 二、MyBatisPlus 多数据源配置 三、MybatisPlus —注解汇总 四、MyBatis Plus—CRUD 接口 五、MyBatis-Plus 条件构造器 六、MyBatis-Plus 代码生成器 MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09…

requests 在 Python 3.2 中使用 OAuth 导入失败的问题与解决方案

问题背景 在Python 3.2中&#xff0c;尝试使用Request的OAuth支持时&#xff0c;遇到了OAuth导入失败的问题。以下代码&#xff1a;import requests from requests.auth import OAuth1url https://api.twitter.com/1/account/settings.jsonqueryoauth OAuth1(client_key, cli…

#[量化投资-学习笔记018]Python+TDengine从零开始搭建量化分析平台-正态分布与收益率

正态分布(Normal Distribution)又叫高斯分布、常态分布。通常用来描述随机变量的概率分布。 自然界的数据分布通常是符合正态分布规律的&#xff0c;比如说人的身高、体重。但是非自然界数据就不一定了。尤其是经过人为加工过的数据。 金融领域大量使用正态分布来计算收益率和…

《白帽子讲web安全》笔记

第八章 文件上传漏洞 文件上传漏洞是指用户上传了一个可执行的脚本文件&#xff0c;并通过此脚本文件获得了执行服务器端命令的能力 文件上传后导致的常见安全问题一般有&#xff1a; ❍ 上传文件是Web脚本语言&#xff0c;服务器的Web容器解释并执行了用户上传的脚本&#xf…

【Apache Doris】审计日志插件 | 快速体验

【Apache Doris】审计日志插件 | 快速体验 一、 环境信息1.1 硬件信息1.2 软件信息 二、 审计日志插件介绍三、 快速 体验3.1 AuditLoader 配置3.1.1 下载 Audit Loader 插件3.1.2 解压安装包3.1.3 修改 plugin.conf 3.2 创建库表3.3 初始化3.4 验证 一、 环境信息 1.1 硬件信…

鸿蒙4.0正式版升级机型

官网支持升级机型入口&#xff1a;HarmonyOS 4支持机型 | 华为官网 (huawei.com) 正式版 手机 HUAWEI P60 HUAWEI P60 Pro HUAWEI P60 Art HUAWEI Mate X3 HUAWEI Mate X3 典藏版 HUAWEI Mate 50 HUAWEI Mate 50 Pro HUAWEI Mate 50 RS 保时捷设计 HUAWEI Mate 50E …