桂院校园导航小程序 云开发项目 二次开发教程 1.0.1

news2024/11/25 16:05:18

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

GitHub代码仓库:GLU-Guide

先 假装 大伙都成功安装了云开发项目,并能在 微信开发者工具 和 手机 上正确运行。

接着就是 将项目 改成自己的学校。

代码里的注释我就不说明了,有提到 我的学校 的文字都改成你自己的就行

升级日志 1.0.1

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

序号内容详情效果
1优化 学校信息的存储方式写死在页面 -> 写入utils.js引入

只需修改utils.js中的数据

就能改变所有页面的学校信息

2新增页面个人信息页

可以获取用户昵称和头像

同时将各类功能栏移至此处

3移动页面内容校园天气:学校信息页 -> 校园信息页

学校信息页的天气不易被察觉

移到信息页

4移动页面内容功能栏按钮:校园信息页 -> 个人中心页区分不同类型的功能
5替换图标替换了部分页面的图标使页面更加生动有活力
6优化 获取opneid功能控制台预览openid  -> 小程序直接复制简化操作流程

1. 全局 app.json

app.json 中的 navigationBarTitleText 属性 设置的是 全局的导航栏标题文字内容改成自己的。

"navigationBarTitleText": "桂院校园导航",

2. 更改学校信息 utils.js

自行修改

包括但不限于 小程序名称  、学校全称 、学校简称 、学校英文名 、学校英文简称 、学校坐标(别把 经度 和 纬度 填反了) 、校徽(将新图片覆盖原图片就行) 、学校信息 、 学校简介。

 天气功能是调用 和风天气API 实现。我只展示学校那的天气,所以相关的数据就写死了。使用坐标拾取器就能获取学校的坐标。

坐标拾取器

如果你想搞那种根据定位获取天气,或者是展示更多天气的那种,可以参考下面的大佬的文章

微信小程序实现天气预报功能(支持自动定位)(附源码)

 4. 校园信息 pages/school/school

图标栏后面的两个功能按钮,自行更改,实现方式如下。

官微按钮是通过 wx.previewImage 接口实现(全屏预览图片)。

获取 公众号二维码 的方法

招生官微按钮也是 通过 wx.navigateToMiniProgram 接口实现(跳转外部小程序)。跳转“桂林学院 招生办”小程序。如果你学校没有招生小程序就换成学校别的小程序 或者 改成像楼上一样全屏预览图片(学校的官方图书馆、学生会或者什么的公众号)。

获取 小程序 appId 的方法

​​

5. 学校信息 pages/school/information/information

院系信息 和 部门联络电话 引用 utils.js 里的数据,院系信息是用list存储的,部门联络电话是用嵌套list存储的,比较好理解, 改成自己的。

嵌套list 外层 是 部门 ,内层是当前 部门 下的 所有 联络信息。

​​

6. 交通信息 pages/school/traffic/traffic

因为其中涉及到了多种颜色,不好写在until.js里引入使用。就将文字全部写死,自行修改

不同颜色的文字使用不同样式渲染。

​​

7. 个人中心 pages/mypage/mypage

要想快捷方便地获取当前微信用户的昵称及头像,请务必确保 基础运行库为 2.27.1 以下版本

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

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

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

“获取opnenid”按钮点击直接显示openid,并可以直接点击复制,cao

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

自行修改

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

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

​​


接下来的都是地图相关的了。


11. 地点管理 pages/admin/manage-site/manage-site

对 类别 和 地点 进行重新设定

TIP:这里只是我的想法,没有测试过,不保证一定可行,想要尝试的话建议提前备份数据(数据库导出所有集合)。

① 提前准备好所有数据( 数据放 excel 或者 文档里,图片分类放 文件夹 里,能提高之后的操作效率 )

② 先清空 类别 和 地点 集合( 删掉集合再新建集合 )

③ 在 类别管理界面 新增 所有类别

④ 在 地点管理界面 新增 所有地点 ( 建议在 微信开发者工具 操作,使用 复制粘贴大法,这里先不要上传图片

如果在新增地点时就上传图片会让云存储变得乱七八糟。

如果你不介意的话,直接跳过看下一条(上面深蓝色的字就不用管,新增地点时就上传图片)。

如果你介意的话,可以思考下怎么保持下面的样子还能正常显示。

哈哈哈不卖关子了其实很简单,往下看就是了。

⑤把所有图片按类别分类放入文件夹并将整个文件夹上传到云存储(就像我仓库里那样)

⑥然后点进去,复制图片的 File ID(比如 二级学院 类别 下的 传媒学院 的 图片)

 ⑦进入数据库的 地点集合 ,找到 传媒学院 那条记录 ,将 img字段 用刚才复制的 File ID 覆盖修改就行(哪怕修改所有地点图片路径,也不会耗时很久哒)

当然 答辩项目演示时 就 用手机选择图片上传 就行,上面的做法只是为了美观、整齐、好管理。

12. 地图 pages/map/map

地图中心点坐标

 修改 红框 里的 经度纬度 为 你自己学校的坐标(别把 经度 和 纬度 填反了!!!

坐标拾取器


地图边界

地图边界是通过 MapContext.setBoundary 接口实现(限制地图的显示范围)。

 修改 红框 里的 西南角和东北角 的 经度纬度 为 你自己学校区域西南角和东北角的坐标(大概就行,选远一点也无妨)(别把 经度 和 纬度 填反了!!!

坐标拾取器


自定义图层(覆盖校园地图)

我使用这个是因为我的学校在腾讯地图上太干净了(啥都没有)。。。影响观感。

之后用PS画了三天三夜才画出来,真的痛苦。

可以来比较一下(都是100米标尺),简直是天壤之别

自定义图层是通过 MapContext.addGroundOverlay 接口实现(创建自定义图片图层,图片会随着地图缩放而缩放)。

自定义图层不会在 微信开发者工具上 显示,只能在手机端查看。

如果你的学校在地图上展示的效果很好就把 整个接口函数代码 删了。


判断所在位置是否在校区内

通过 wx.getLocation 接口获取当前的地理位置。将其中的 经度 纬度 进行判断,经度 和 纬度 在特定范围内,就说明 你的位置在校区内。


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

要修改 getdefaultsite 、 location 和 markertap 这三个自定义函数的部分代码。

getdefaultsite 自定义函数

我把默认位置设置为东门,就使用云函数从数据库 地点集合 中 找到 那个地点 的 类别编号 和地点编号。

修改 红框 里的 内容 为 你想要 设定的默认地点的名称(这个名称必须要确保在 地点集合中 存在!!!


location 自定义函数

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

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

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


markertap 自定义函数

默认地点是那个类别的第几个,就把那个数填入 红框 处

13. 地图选点 pages/admin/getpoint

修改地图中心点坐标(如果有自定义图层就自行修改)。修改方法与 地图页的 差不多,就不赘述了。

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

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

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

相关文章

vue 引入图片的问题

文章目录 为什么使用require自己讲解实例 - src下 - img验证 实例 - public下 - 绝对路径 - img报错,其中 imgurl5、imgurl6 找不到资源!个人猜想: 去掉 imgurl5、imgurl6 再次运行(开发环境):去掉 imgurl5…

EF Core Build failed. Use dotnet build to see the errors.

Build failed. Use dotnet build to see the errors. 今天学习abp框架用到EF Code First时,报出上述错误。 在网上查了很多资料。 dotnet build D:\Practice\abp\SourceCode\BookStore\src\Acme.BookStore.EntityFrameworkCore\Acme.BookStore.EntityFrameworkCor…

Stable Diffusion webui安装使用

参考: https://stability.ai/blog/stable-diffusion-public-release https://github.com/AUTOMATIC1111/stable-diffusion-webui 安装(6g显存) 1、conda创建python 3.10.6环境 conda create -n stable-diffusion pythonpython 3.10.6 也安装…

【axios】axios的完整配置

注意:本文实例化为TS版 1、axios概念 axios 是一个基于 promise 封装的网络请求库,它是基于 原生XHR 进行二次封装,可以说是 XHR 的一个子集,而 XHR 又是 Ajax 的一个子集 特点 从浏览器中创建 XMLHttpRequests从 node.js 创建…

C/CPP安装pthread教程;#include<pthread.h>无法引入该文件的解决方法;引入pthread后报错

在开发c及cpp的多并发程序时,常常会用到pthread.h头文件,但是pthread是需要自行安装的,下面就是在Windows平台使用Visual Studio安装pthread的教程。 1.下载并解压pthread库 在POSIX Threads for Windows - Browse Files at SourceForge.ne…

Unity 四元数

前言:在场景中,可以用旋转工具改变物体角度,也可以在Inspector窗口中改变物体的X、Y、Z值(欧拉角)来改变物体角度。 虽然用欧拉角表示角度和旋转,但一般人想不到,物体在三维空间的旋转并不是一…

TouchGFX开发(3)----触摸屏幕组件点亮LED

TouchGFX开发.3----触摸屏幕组件点亮LED 概述生成例程配置时钟树开启调试接口移植SSD1306配置调试开启TouchGFX设置屏幕刷新率配置TouchGFXTouchGFX代码配置编译实际效果 概述 TouchGFX是一种先进的软件框架,用于开发嵌入式图形界面(GUI)。借助其特性,…

一个非奇异快速终端滑模控制(NTSM)实例及仿真

一、被控对象 考虑这么一个被控对象 J θ ( t ) u ( t ) d ( t ) J \ddot\theta(t) u(t) d(t) Jθ(t)u(t)d(t) 其中&#xff0c; J J J 为转动惯量&#xff0c; θ \theta θ 为角度&#xff0c; u u u 为控制量&#xff0c; d d d 为扰动&#xff0c;且 d ( t ) < …

vue diff算法与虚拟dom知识整理(7) 根据init.ts源码简单梳理patch都做了些什么

之前我们也见证了 diff算法 的强大 但他 只有确认是同一个节点才做对比 如果不是就直接暴力拆卸了 我们打开我们的案例 找到 node_modules 下面的snabbdom/src下面的 init.ts文件 init.ts 拉到最下面 我们就可以看到这个返回的patch函数 patch相比于他的功能 代码算比较少的…

LeetCode高频算法刷题记录1

文章目录 1. 无重复字符的最长子串【中等】1.1 题目描述1.2 解题思路1.3 代码实现 2. 反转链表【简单】2.1 题目描述2.2 解题思路2.3 代码实现 3. LRU 缓存【中等】3.1 题目描述3.2 解题思路3.3 代码实现 4. 数组中的第K个最大元素【中等】4.1 题目描述4.2 解题思路4.3 代码实现…

吴恩达OpenAI最新课程:prompt-engineering-for-developers读书笔记

文章目录 一、前言二、Prompt编写原则2.1 环境配置2.2 编写清晰、具体的指令2.2.1 使用分隔符2.2.2 结构化输出&#xff08;JSON、HTML等&#xff09;2.2.3 要求模型检查条件是否满足2.2.4 提供少量示例&#xff08;Few-shot Prompting&#xff09; 2.3 指导模型思考2.3.1 指定…

未来工业维护:探索数据分析与机器学习的融合之路

随着工业领域相关技术的不断发展&#xff0c;预测性维护作为一种先进的维护策略&#xff0c;正日益受到企业的重视。预测性维护的核心目标是通过准确预测设备故障的发生时间&#xff0c;实现及时维护和优化生产效率。而在实现这一目标的过程中&#xff0c;数据分析和机器学习的…

FreeRTOS:任务状态和信息查询

目录 一、任务相关 API函数预览二、任务相关API函数详解2.1uxTaskPriorityGet()2.2vTaskPrioritySet()2.3uxTaskGetSystemState() ※※※※※2.4vTaskGetInfo() ※※※※※2.5xTaskGetApplicationTaskTag()2.6xTaskGetCurrentTaskHandle()2.7xTaskGetHandle()2.8xTaskGetIdleTa…

教你用JMeter做接口测试的几个简单实例

目录 前言 1、登录&#xff08;POST&#xff09; 登录 2、获取学生信息&#xff08;GET&#xff09; 获取学生信息 3、添加学生信息&#xff08;POST&#xff0c;JSON&#xff09; 添加学生信息 4、学生充值金币&#xff08;POST&#xff0c;Cookie&#xff09; 学生金…

【Linux】11. 进程控制

小实验(谨慎测试) 1. 进程退出码的引出 2. 进程码的使用 3. 进程退出 3.1 进程退出情况 进程退出分三种情况&#xff1a; 1.代码运行完毕&#xff0c;结果正确 – return 0; 2.代码运行完毕&#xff0c;结果不正确 – 根据退出码判断错误情况 3.代码没有运行完毕&#xff0c;…

如何0基础自学黑客(网络安全)技术,万字长文教你如何学习黑客(网络安全)

一、自学网络安全学习的误区和陷阱 1.不要试图先成为一名程序员&#xff08;以编程为基础的学习&#xff09;再开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而…

【数字化转型-06】数字化转型咨询项目中如何做好高层访谈

咨询项目中少不了至关重要的一步&#xff0c;那就是高层访谈&#xff0c;做好高层访谈&#xff0c;对于咨询项目至关重要&#xff0c;我们接触的维度越高&#xff0c;就会越能把控项目的真实意图&#xff0c;有的放矢&#xff0c;不会让下面的人带偏&#xff1b;另一方面我们也…

Vue3 使用 Ts 泛型 封装本地存储

前期回顾 NVM —— 你把我玩明白_彩色之外的博客-CSDN博客本文将学习 使用 NVM 管理node版本https://blog.csdn.net/m0_57904695/article/details/130670262?spm1001.2014.3001.5501 目录 新建 \src\utils\storage-utils.ts 使用 泛型示例 泛型交换变量 泛型 strin…

在Linux系统中用vim编写第一个C语言之gcc编译器

文章目录 在Linux系统中用vim编写第一个C语言HelloWorld第一步 创建第二步 编写第三步&#xff0c;编译第四步 运行 gcc四步骤gcc常用选项 在Linux系统中用vim编写第一个C语言HelloWorld 第一步 创建 vim HelloWorld.c第二步 编写 #include<stdio.h>int main(){printf(…

Android Jsoup爬取网页数据及其局限性,接口爬取数据的思路

1.Jsoup jsoup 是一款Java 的HTML解析器&#xff0c;可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API&#xff0c;可通过DOM&#xff0c;CSS以及类似于jQuery的操作方法来取出和操作数据。 需求是需要获取某个网站上的排行榜数据&#xff0c;用作App展示&am…