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

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

GitHub代码仓库:GLU-Campus-Guide

静态项目 2.0版本 升级日志

序号

板块

详情

1

首页

重做了首页,界面更加高效和美观

2

校园页

新增了 “校园指南” 功能,可以搜索和浏览校园生活指南

3

地图页

①弃用路线规划插件,改用SDK开发包。可以无阻通过审核并发布。得益于SDK中的接口,能够获取路线数据,可以渲染到地图上

②新增轨迹回放功能,获取路线后,有小车沿着路线,从起点移动到终点

③新增点聚合功能,地点过于密集时,会自动聚合此类地点

④新增地点搜索功能,可将查询的结果作为地图起点/终点

⑤新增起点终点交换功能,可一键交换起点和终点

⑥页面底部按钮重做,点击可以查看当前类别下的地点/路线详情

⑦更改了类别栏的位置,删去了地点栏

4

数据存储

数据分门别类写入多个js文件,使用时分别引入。区分开容易查找和修改

media.js :图片和视频路径

school.js :学校和校园指南信息

map.js :地图参数、各个地点的坐标

utils.js :其他信息

0. 导入项目

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

图片均引用自图床链接,自行修改

作者用过的图床:cdn加速图床路过图床云图床

1. 全局 app.json

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

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

2. 首页 pages/home/home

风景轮播图 引用 media.js 的数据,来源于图床链接, 自行修改。

图标 引用 media.js 的数据,均引用 images文件夹 的图片, 自行修改。

校徽(将新图片拖入文件夹覆盖原图片

学校信息(学校全称 + 学校信息) 引用 school.js 的数据,自行修改。

部分信息(小程序名称) 引用 utils.js 的数据,自行修改。

天气api 引用 utils.js 的数据,调用 和风天气API 实现 ,自行修改。

和风天气API申请教程

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

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

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

获取 公众号二维码 的方法

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

获取 小程序 appId 的方法

​​​

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

风景轮播图 和首页的 是一样的,就不用改了

学校信息(学校全称 + 学校英文名 + 学校简介) 引用 school.js 的数据,自行修改。

 宣传视频 引用 media.js 的数据, 自行修改。

作者目前的方法是:引用 gitee page 中的视频链接

4. 地图信息 pages/map/map

图标 引用 media.js 的数据,均引用 images文件夹 的图片, 自行修改。

地图api 引用 map.js 的数据,调用 腾讯位置服务API 实现 ,自行修改。

腾讯位置服务API申请教程

地点数据 引用 map.js 的数据。使用嵌套list存储的,自行修改。

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

里面的数据都要加上引号

图片均引用自图床

地图数据 引用 map.js 的数据。

longitude:地图中心点坐标经度(范围:-180→180

latitude :地图中心点坐标纬度(范围:-90→90

经纬度不要写反了

enablepoi:是否展示 POI 点

showLocation:是否显示带有方向的当前定位点

scale:地图默认缩放级别

minscale:地图最小缩放级别,比默认缩放级别小一点为宜

地图中心点坐标

取对角线两点的坐标,平均值即为中心点坐标

坐标拾取器


地图边界、学校范围

地图边界:限制地图的显示范围,不能划出这个范围

通过 MapContext.setBoundary 接口实现,使用此接口需基础库 2.22.0及以上版本

学校范围:判断当前位置(定位)在不在学校

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

wx.getLocation接口 申请教程

坐标拾取器

​​​​​


默认地点

当前位置不在学校时,需指定一个默认地点

默认地点 引用 map.js 的数据,自行修改。

​​​


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

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

之后用PS画的校园地图。

可以来比较一下

不同学校(都是100米标尺),简直是天壤之别。

​​

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

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

不得不说,这个坐标真的难调,暂时没有找到很好的方法。

5. 学校指南 pages/school/school 和 pages/school/word/word

学校指南信息 引用 school.js 的数据,使用list结构存储,自行修改。

​​​

6. 更多 pages/more/more

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

有需要的可以自行研究

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


“特别说明”按钮中的说明信息 自行修改 若不用就删掉

“支持一下”按钮 不用就删掉

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

“推荐给好友”按钮,之前是能转发,但目前我的小程序没法认证,就改成预览图片,自行在media.js中更改为你自己的小程序维码

​​

7. 软件声明 pages/more/statement/statement

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

相关信息 引用 utils.js 的数据,自行修改。

如果你开源自己项目,就自行更改;否则删掉。

​​​


到这里就结束啦,表扬一下优秀的你自己吧,能够把这么长的教程看完

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

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

相关文章

【金三银四】每日一点面试题(Java--JVM篇)

1、说一下 JVM 的主要组成部分及其作用? JVM(Java虚拟机)是Java程序运行的核心组件,它负责将Java字节码翻译成底层操作系统能够执行的指令。JVM由以下几个主要组成部分构成: 类加载器(Class Loader&#…

spring boot概述

SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。 该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。 通过这种方式,SpringBoot致力于在蓬勃发展的快速应用开发…

实时抓取SKU商品属性详细信息API数据接口(淘宝,某音)

item_sku-获取sku详细信息 taobao.item_sku详细信息 API公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_sku 名称类型必须描述keyString是调用key(演示示例)secretString是调用密钥api_nameString是API接口名称(包括在请求地…

python-分享篇-生成仿微信公众号推广的个性二维码(支持动态)

代码 生成仿微信公众号推广的个性二维码(支持动态)from MyQR import myqr # 要生成动态二维码,只需要将piture参数和save_name参数设置gif动图即可 myqr.run(wordshttps://blog.csdn.net/stqer/article/details/135553200, # 指定二维码包含…

JVM(内存区域划分)

JVM JVM - Java虚拟机 我们编写的 Java 程序, 是不能够被 OS 直接识别的 JVM 充当翻译官的角色, 负责把我们写的的 Java 程序 ,翻译给 OS “听”, 让 OS 能够识别我们所写的 Java 代码 JVM 内存区域划分 JVM 是一个应用程序, 在启动的时候, 会从 操作系统 申请到一整块很大的内…

AI-RAN联盟在MWC24上正式启动

AI-RAN联盟在MWC24上正式启动。它的logo是这个样的: 2月26日,AI-RAN联盟(AI-RAN Alliance)在2024年世界移动通信大会(MWC 2024)上成立。创始成员包括亚马逊云科技、Arm、DeepSig、爱立信、微软、诺基亚、美…

【LeetCode】升级打怪之路 Day 11:栈的应用、单调栈

今日题目: Problem 1: 栈的应用 155. 最小栈 | LeetCode20. 有效的括号 | LeetCode150. 逆波兰表达式求值 | LeetCode Problem 2: 单调栈 496. 下一个更大元素 I739. 每日温度503. 下一个更大元素 II 目录 Problem 1:栈 - “先进后出”的应用LC 155. 最…

【Java设计模式】五、建造者模式

文章目录 1、建造者模式2、案例:共享单车的创建3、其他用途 1、建造者模式 某个对象的构建复杂将复杂的对象的创建 和 属性赋值所分离,使得同样的构建过程可以创建不同的表示建造的过程和细节调用者不需要知道,只需要通过构建者去进行操作 …

力扣刷题记录--463. 岛屿的周长

题目链接&#xff1a;463. 岛屿的周长 - 力扣&#xff08;LeetCode&#xff09; 题目描述 我的代码实现 class Solution {public int islandPerimeter(int[][] grid) { int result0; int rowgrid.length; int colgrid[0].length; for(int i0;i<row;i){for(int j0;j<col…

【EI会议征稿通知】2024年图像处理与人工智能国际学术会议(ICIPAI2024)

2024年图像处理与人工智能国际学术会议&#xff08;ICIPAI2024&#xff09; 2024 International Conference on Image Processing and Artificial Intelligence&#xff08;ICIPAI2024&#xff09; 2024年图像处理与人工智能国际学术会议&#xff08;ICIPAI2024&#xff09;将…

返回静态数据

在Java项目中&#xff0c;往往不会一直返回某某数据&#xff0c;而是会返回一个静态页面&#xff0c;那么&#xff0c;如何正确返回一个静态页面呢&#xff1f;&#xff1f; 要想成功的返回一个静态页面前提是必须要有一个静态页面&#xff1a; <!DOCTYPE html> <ht…

如何让 JOIN 跑得更快?

JOIN 一直是数据库性能优化的老大难问题&#xff0c;本来挺快的查询&#xff0c;一旦涉及了几个 JOIN&#xff0c;性能就会陡降。而且&#xff0c;参与 JOIN 的表越大越多&#xff0c;性能就越难提上来。 其实&#xff0c;让 JOIN 跑得快的关键是要对 JOIN 分类&#xff0c;分…

第三百八十一回

文章目录 1. 概念介绍2. 修改方法 015buttonStyle.png2.1 修改形状2.2 修改颜色2.3 修改位置 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何创建以图片为背景的页面"相关的内容&#xff0c;本章回中将介绍如何修改按钮的形状.闲话休提&#xff0c;让我们一起T…

06. Nginx进阶-Nginx代理服务

proxy代理功能 正向代理 什么是正向代理&#xff1f; 正向代理&#xff08;forward proxy&#xff09;&#xff0c;一个位于客户端和原始服务器之间的服务器。 工作原理 为了从原始服务器获取内容&#xff0c;客户端向代理发送一个请求并指定目标&#xff08;即原始服务器…

chatgpt-next-web搭建教程,超低成本部署属于自己的ChatGPT

随着AI的应用变广&#xff0c;各类AI程序已逐渐普及&#xff0c;尤其是在一些日常办公、学习等与撰写/翻译文稿密切相关的场景&#xff0c;大家都希望找到一个适合自己的稳定可靠的ChatGPT软件来使用。 ChatGPT-Next-Web就是一个很好的选择。它是一个Github上超人气的免费开源…

2核4G云服务器租用价格_2核4G云主机优惠价格_2024年报价

租用2核4G服务器费用价格&#xff0c;2核4G云服务器多少钱一年&#xff1f;1个月费用多少&#xff1f;阿里云2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年&#xff1b;腾讯云轻量2核4G服务器5M带宽165元一年、252元15个月、540元三…

Spring IOC在业务中常见的使用方式

目录 1、什么是IOC 2、java实现创建对象的方式有哪些 3、基于配置文件的di实现 3.1、什么是di 3.2、入门案例 3.3、环境搭建 接口和实现类 ioc配置文件 测试程序 3.4、案例总结 3.5、简单类型属性的赋值&#xff08;set注入&#xff09; set注入要求 JavaBean sp…

代码随想录day12(2)字符串:重复的子字符串(leetcode459)

题目要求&#xff1a;给定一个非空的字符串&#xff0c;判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母&#xff0c;并且长度不超过10000。 思路&#xff1a; 一、首先对于暴力解法&#xff0c;可以枚举所有的字串进行判断。但是枚举时实际上只需…

rt thread stdio如何同时生成bin和hex

一、rt thread stdio默认生成bin文件&#xff1a; rt thread stdio 软件编译时&#xff0c;默认生成bin文件&#xff1b; 二、rt thread stdio如何同时生成bin和hex 右键单击-->项目-->属性-->C/C构建-->设置-->构建步骤-->(构建后步骤)命令&#xff1a; …

视频如何无水印保存?这三种下载方法赶紧收藏

在互联网时代&#xff0c;视频已成为我们获取信息、娱乐休闲的重要途径。然而&#xff0c;有时我们想要保存或分享某些视频时&#xff0c;却发现下载起来却带有水印。为了解决这个问题&#xff0c;今天给大家带来几个无水印下载的方法。 方法一&#xff1a;水印云 水印云是一…