微信小程序校园导航设计与实现
2023-08-07卢松升潘国庆周玮
卢松升 潘国庆 周玮
摘 要:小程序是一款以主流社交软件微信为载体,并在其基础上拓展微信功能的软件,在以微信为基础之上开发的微信小程序相比于普通手机APP软件将更容易被用户所接受,也更符合互联网及社会发展的方向.将对微信小程序的系统框架,关键技术,以及平台特点和应用前景进行研究,为开发者提供一种可行的思路。本课题设计开发的是应用在Android手机上的校园导航微信小程序。所设计的校园通信軟件采用了Android开源系统技术,在微信开发者工具开发环境下,使用了的语言有html,css和js,该小程序可以通过简单的系统操作来实现校园信息的获取,在Android系统中能够独立的运行。
关键词:微信小程序;校园导航;设计
微信小程序校园导航系统采用了腾讯位置服务开源技术,利用html,JavaScript,css语言和微信开发者工具对微信小程序校园导航系统进行编写开发,可以让用户能很方便的了解学院简介信息、校园周边环境、校园内部建筑物位置、校园风景、校园简介。在系统的开发过程中,涉及到微信开发者工具、html,JavaScript,css,调用腾讯接口等相关理论及技术。
一、开发环境搭建
开发环境搭建在微信开发者工具开发中,是比较重要的一个过程,现描述如下:要想在Android平台下顺利地开发出新的微信小程序,首先就要在电脑上搭建属于Android的环境。下面就具体介绍下Android的开发环境配置。
搭建开发环境需要的软件:
操作系统:windows 10
工具:微信开发者工具
安装步骤如下:
第一步:安装微信开发者工具
要编写微信小程序需要先在微信公众号平台网站,进行账号注册。
第二步:下载完后进行安装,打开后第一次进入需要进行登录,在创建项目的时候选择JS模板。小程序项目创建成果后,会进入开发调试环境中.
二、模块功能设计
(一)首页功能与学院简介功能
首页主要是一张背景图以及两个控件,用户可根据需要了解学校的信息进行选项,“学院简介”控件和“逛一逛”控件,分别可以查询学校每一个学院的信息和校园内主要建筑物的地理位置的导航,最后可以到达需要去的地方规划相关路线。在学院简介功能页面中,包括信息工程学院管理,管理学院,外国语学院等,用户可以根据需要查看选择查相关学院,可以有效的了解到学院的相关消息。
(二)相关建筑物显示功能
用户可以通过首页的“逛一逛”控件进入到学校建筑物显示界面,页面内包括五个校园景点查询显示,三个教学楼查询显示,两个校园查询显示,六个学院查询显示,12个宿舍查询显示,三个食堂查询显示,一个超市查询显示。
(三)路线规划功能
当用户进入到建筑物位置显示页面时,可以选择需要查询的建筑类相关位置,将其在地图中显示,再在可在当前界面选择需要到达的目的地,通过按下图表控件进行路线规划。