桂院导航小程序 静态项目 二次开发教程

news/2024/7/20 2:22:48 标签: 微信小程序, 小程序, 前端, javascript

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

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

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

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

1. 全局 app.json

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

"navigationBarTitleText": "桂院导航",

2. 首页 pages/home

封面 引用 utils.js 里的数据,自己去改

下面圈出的地方写的是我的学校信息 英文缩写简称 ,写死在页面里的, 改成自己的。

 3. 学校简介 pages/school/introduction/introduction

轮播图 和 视频 引用 utils.js 里的数据,自己去改

下面 红框 圈出的地方写的是我的学校信息 校名 英文 和 学校风光 ,写死在页面里的, 改成自己的。

下面 橙框 圈出的地方写的是我的学校信息 学校简介 ,引用 utils.js 里的数据, 改成自己的。

 4. 校园信息 pages/school/school

轮播图 和 学校简介页的是一样的, 引用 utils.js 里的数据,如果之前没改,自己去改。

下面 红框 圈出的地方写的是我的学校信息(代码那没圈完,照着模拟器改就行),写死在页面里的, 改成自己的。

下面 橙框 圈出的地方写的是我的学校信息 校徽 ,引用 utils.js 里的数据, 改成自己的。


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

学校官网按钮是通过 wx.navigateToMiniProgram 接口实现(跳转外部小程序)。跳转“小外链”小程序并向其传递学校的网站链接(自行测试,部分网页打不开。小外链只是渲染网页,不是真实网站),个人建议换掉这个功能(可以换成学校简介),很容易露陷。

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

获取 公众号二维码 的方法

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

获取 小程序 appId 的方法


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

底部的信息 自行更改

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

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

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


天气功能是调用 和风天气API 实现。我的想法是只展示学校那的天气,所以相关的数据就写死了。

修改 wxml 的 红框 为 你自己学校所在地区

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

坐标拾取器

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

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

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

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

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

7. 使用说明 pages/instruction/instruction

地图使用说明没啥要改的。校园信息使用说明需要修改(把整个校园信息使用说明删了也行)。

修改的话 务必确保 校园信息使用说明 要和 校园信息页 的功能栏 一一对应,自行修改。

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

这个 自行修改 就行( 如果用到了 我的项目或代码 请在这里说明一下!谢谢 )

9. 开源代码 pages/school/open/open 

这页的话,如果你对我的项目二次开发后放到 GitHub 或 Gitee ,在哔哩哔哩上传了你的视频,在csdn 或 cnblog 上传了文章,就改改吧。

要是前文提到的你都没做的话,那就说下你用到我的项目,保留我的 gitee 和 bilibili 就行(给我引个流hhhhh)。

 通过 wx.navigateToMiniProgram 接口实现(跳转外部小程序)。跳转“小外链”小程序并向其传递学校的网站链接(自行测试,部分网页打不开。小外链只是渲染网页,不是真实网站),个人建议去掉 去看看 按钮 以及 其 bindtap事件。

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

11.地点数据

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

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

12. 地图 pages/map/map

地图中心点坐标

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

坐标拾取器


地图边界

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

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

坐标拾取器


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

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

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

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

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

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

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


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

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


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

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

data

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

location 自定义函数

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

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

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

markertap 自定义函数

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

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


http://www.niftyadmin.cn/n/319120.html

相关文章

正则化解决过拟合

本片举三个例子进行对比,分别是:不使用正则化、使用L2正则化、使用dropout正则化。 首先是前后向传播、加载数据、画图所需要的相关函数的reg_utils.py: # -*- coding: utf-8 -*-import numpy as np import matplotlib.pyplot as plt impor…

小米刷机小白教程最新详细版

★本篇为线刷(以修补boot的方式刷入面具) 如果你用的是小米手机,想获取面具root,看这一篇就够了,即使你是小白 必应搜索醉里博客http://202271.xyz?xiaomi 原创不易,谢绝转载,如果本教程有帮…

Redis性能测试怎么做?看看字节8年测试工程师写的测试总结

最近测试服务端的时候,接触到了redis,之前也看过,但不系统,借着这次实践,记录一下 01、简介 Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。 它通常被称为数据结构…

linux系统挂载逻辑卷和扩展逻辑卷组

fdisk /dev/vdb fdisk /dev/vdc在分区后需要修改分区类型为 8e,操作过程类似: [rootlocal ~] $ fdisk /dev/xvdb #### 选择磁盘 Command (m for help): m #### 帮助 Command actiona tog…

2023网站接入谷歌广告教程

如果你是一名网站主,将谷歌广告接入到你的网站中可以为你带来多方面的好处。接下来,我们将探讨这些好处并解释如何轻松地将谷歌广告集成到你的网站中。 想要成为谷歌广告的流量主,需要满足一些条件,并且需要经历一些步骤。本文将介…

算法(一)—— 回溯(2)

文章目录 1 131 分割回文串2 93 复原 IP 地址 s.substr(n, m) // 从字符串s的索引n开始,向后截取m个字符 例: string s "aaabbbcccddd"; string s1 s.substr(2,3); 此时s1为abb 1 131 分割回文串 切割问题,前文均为组合问题。组…

[Python]线程池与进程池简介

文章目录 concurrent.futures模块ThreadPoolExecutoras_completedwaitmap multiprocessing模块PoolapplymapAsyncResult Pool与ProcessPoolExecutor 在《多进程并发与同步》和《多线程与同步简介》中介绍了线程与进程;但因启动进程与线程都需要代价,在频…

非煤矿山电子封条 yolov7

非煤矿山电子封条通过yolov7python网络模型技术,非煤矿山电子封条可以对矿山主副井口、风井口、车辆出入口和调度室等全天候不间断实时分析预警,发现人员违规行为及异常设备状态立即告警。YOLOv7 的发展方向与当前主流的实时目标检测器不同,研…