北京实时公交查询微信小程序

雪琰焦糖

已于 2023-07-03 14:30:52 修改

阅读量1.3k

点赞数 1

分类专栏：笔记文章标签：微信小程序

于 2023-07-03 14:25:32 首次发布

本文链接：https://blog.csdn.net/weixin_46534616/article/details/131513399

版权

笔记专栏收录该内容

7 篇文章 2 订阅

订阅专栏

实现效果

该小程序参考《公交车到哪》微信小程序实现，侵删。

实时公交实现效果

源代码

GitHub - LY2001NN/LBus

实践报告

摘要

本项目旨在开发一款实时公交查询的微信小程序，方便用户随时获取公交线路、站点以及实时车辆信息。项目采用微信小程序开发框架，并结合公交数据接口和地图API实现相关功能。

报告首先介绍了项目的背景和目标，详细阐述了实时公交查询的需求和意义。随后，报告对项目的整体架构进行了描述，包括前端界面设计和请求数据处理的流程。

在具体实施过程中，报告详细介绍了各个模块的功能和实现方法。其中，公交路线查询模块实现了根据关键词查询公交线路的功能，附近公交站点信息查看模块实现了显示附近公交站点的功能，公交实时信息查看模块实现了查询指定线路的实时车辆信息的功能。

报告还对项目进行了功能测试，并提供了测试用例和预期结果。测试过程中发现了一些问题，并给出了相应的解决方法和改进方案。

通过本次实践项目，深入了解微信小程序的开发流程和技术要点，加深了对实时公交查询系统的理解和实践经验。

关键词：微信小程序；实时公交查询；功能测试；用户体验

概述

题目的背景及研究意义

随着城市交通的日益繁忙和人口的增加，公交系统成为城市居民出行的重要选择之一。然而，传统的公交查询方式存在一些问题，如信息不准确、不及时以及查询方式繁琐等。为了解决这些问题，开发一个实时公交查询的微信小程序成为了一项具有实际意义的研究和开发项目。

实时公交查询微信小程序的研究意义有以下几点：

1. 提高出行效率：实时公交查询微信小程序可以提供公交车运行位置的实时信息，供乘客预估等待时间，从而提高出行效率，减少等待时间和不必要的等候。

2. 便利用户出行：通过微信小程序的方式，用户可以随时随地查询公交车的实时信息，无需下载独立的应用程序或访问其他网站，提供了更加便利的出行服务。

3. 提供准确信息：传统的公交查询方式可能受到多种因素的影响，如交通拥堵、路线调整等，导致信息不准确。而实时公交查询微信小程序通过与公交运营系统的数据接口对接，提供更加准确和实时的公交信息。

4. 改善用户体验：微信小程序提供了友好的界面和交互方式，可以根据用户的喜好和习惯进行个性化定制，提供更好的用户体验。

综上所述，实时公交查询微信小程序项目不仅具有提高出行效率和便利性的实际意义，还有助于改善用户体验，提供准确信息，以及为城市规划和公交运营提供数据支持，具有重要的研究价值和应用前景。

本系统主要研究内容

实时公交查询微信小程序的主要研究内容包括以下几个方面：

1. 技术调研和架构设计：对微信小程序的开发环境和技术特点进行调研，选择合适的技术架构和开发工具。这包括了对微信小程序的前端开发框架以及与公交运营系统的数据交互方式等。

2. 功能需求分析与设计：通过调研和用户需求调查，确定实时公交查询微信小程序的主要功能需求。这包括实时查询公交车到达距离、显示公交线路和站点信息、导航和地图标点等功能的设计与实现。根据用户体验和界面设计原则，设计友好、易用的用户界面。

3. 数据源获取和处理：获取公交运营系统的实时数据源，并进行数据处理和转换，以便提供准确的公交车到达时间和路线信息。这其中可能涉及到与公交运营公司或相关部门的数据接口对接，数据的清洗和整理等工作。

4. 前端界面开发：根据功能需求和设计方案，进行微信小程序前端页面的开发。包括实现查询界面、显示公交线路和站点信息的界面、地图展示、导航功能等。确保界面美观、用户友好，同时考虑不同设备和屏幕尺寸的适配。

5. 测试与优化：对实时公交查询微信小程序进行功能测试和性能优化，确保系统的稳定性和可靠性。同时根据测试结果，对系统进行不断地优化和改进，提升用户体验和功能完善度。

综上所述，实时公交查询微信小程序系统的主要研究内容涵盖了技术调研和架构设计、功能需求分析与设计、数据源获取和处理、前端开发、测试与优化等多个方面。这些内容的研究与实现将确保微信小程序能够提供准确、实时的公交查询服务，并提升用户体验和出行效率。

系统需求分析

实时公交查询微信小程序功能需求主要有：公交路线查询、附近公交站点查看、公交实时信息查看、公交实时位置地图标点等。下面将对系统需求进行详细分析。

公交路线查询模块需求分析

在实时公交查询微信小程序中，公交路线查询模块的主要功能是让用户在首页搜索他们想要乘坐的公交线路。根据用户输入的关键字，进行模糊查询，并返回所有相关线路供用户选择。下面是对该需求的详细描述：

1. 首页搜索框：在微信小程序的首页，设置一个搜索框供用户输入关键字进行公交线路查询。用户可以输入公交线路的名称或关键字等。

2. 关键字模糊查询：根据用户输入的关键字，进行模糊查询以匹配所有相关的公交线路。这包括线路名称、关键字等相关信息。

3. 查询结果展示：将模糊查询的结果以列表的形式展示给用户。每个查询结果包含公交线路的名称、起始站点和终点站等基本信息。

4. 查询结果排序：根据查询结果的相关度对查询结果进行排序，将与关键字匹配度较高的线路排在前面，以便用户能够更容易找到他们所需的公交线路。

5. 线路选择：用户可以从查询结果中选择他们要乘坐的公交线路。选择后显示该线路的公交实时运行详情信息。

6. 错误处理和提示：如果用户的输入无法匹配任何公交线路，系统将给予相应的错误提示，并提供建议或相关信息，以帮助用户重新输入或选择其他线路。

通过上述需求分析，公交路线查询模块能够实现用户在首页搜索想要乘坐的公交线路，根据关键字模糊查询并返回相关线路供用户选择。通过提供方便快捷的公交线路查询功能，提高用户的出行体验。

附近公交站点信息查看模块需求分析

在实时公交查询微信小程序中，附近公交站点信息查看模块的主要功能是让用户在附近页面选择所处的定位，查询并返回附近所有的公交站点信息。具体需求如下：

1. 定位功能：在附近页面提供定位功能，用户可以选择使用当前位置进行附近公交站点的查询。

2. 附近公交站点查询：根据用户选择的定位，查询并返回附近所有的公交站点信息。包括公交站点的名称、距离用户当前位置的距离以及该站点所有公交路线的名称等。

3. 公交线路选择：当用户点击某个站点后，系统根据该站点所拥有的公交线路进行判断。

4. 单一公交线路：如果某个站点只有一个公交线路，系统直接跳转到该线路的公交运行详情界面。详情界面包括该线路的实时车辆位置、距站点距离等信息。

5. 多个公交线路：如果某个站点有多个公交线路，系统跳转到公交线路选择列表。用户可以从列表中选择要查看的公交线路。

6. 公交线路选择列表：提供公交线路的选择列表。用户可以点击列表中的某一公交线路进入详情界面。该界面还有该公交站点地图导航接口，点击后可在地图上查看该站点具体位置。

通过上述需求分析，附近公交站点信息查看模块能够实现用户在附近页面选择所处定位后，查询并返回附近所有的公交站点信息，并提供公交线路选择和详情展示功能。该功能方便用户了解附近公交站点的情况，并选择合适的公交线路进行乘坐。

公交实时信息查看模块需求分析

在实时公交查询微信小程序中，公交实时信息查看模块的主要功能是让用户点击某一公交线路后跳转至该路线的公交实时运行详情界面。具体需求如下：

1. 公交线路详情界面：当用户点击某一公交线路后，系统跳转到该路线的公交实时运行详情界面。详情界面包含路线的起始站点、终点站、票价、首班车和末班车时间以及当前路线上共有几辆车等基本信息。

2. 公交车实时位置：在公交线路详情界面上，显示路线上所有站点名称、路线上运行的公交车的大概位置、公交车当前状态：已到站或距离下一站XX米。

3. 点击站点查看距离：用户可以点击某一站点，在公交线路详情界面上显示距离该站点最近一班车的位置距离。该功能通过计算用户当前位置与公交车位置之间经纬度换算距离来实现。

4. 地图标点：点击地图图标后，跳转到地图界面，将当前路线上所有公交车位置标记在地图上，方便用户进行更加直观的查看。

通过上述需求分析，公交实时信息查看模块能够实现用户点击某一公交线路后跳转至该路线的公交实时运行详情界面，显示路线详情和路线上运行的公交车具体位置。用户还可以在地图上查看当前路线在运行中所有公交车的具体位置。该功能提供实时的公交运行信息，帮助用户准确了解公交车的位置和到站情况，方便用户的出行安排。

实时公交查询系统设计

界面设计

小程序用户端界面设计如图3.1至3.3所示：

图3.1 首页图3.2 附近页

图3.3 详情页

业务流程设计

小程序用户使用流程如图3.3至3.5所示：

图3.4 路线搜索流程图图3.5 附近站点查看流程图

实时公交查询系统实现

公交路线查询模块实现

实现效果如图4.1至4.2所示：

图4.1 首页图4.2 路线查询结果

用户输入搜索关键字，点击“查询”按钮调用查询函数，通过e.detail.value.keyworks获取表单中输入框的值，并赋值给变量。如果关键词为空，通过setData方法将结果列表"resultlist"设为空，然后显示一个提示框，提示用户搜索关键词不能为空。

之后发起一个POST请求，调用API接口请求查询路线信息。如果请求成功，判断返回数据中的"return_code"是否为"ok"，如果是，则通过setData方法将结果列表"resultlist"设为返回数据中的"returl_list"，并将关键词"keyworks"设为"o"，然后隐藏加载中的提示框。如果返回数据中的"return_code"不为"ok"，通过setData方法将结果列表"resultlist"设为空，并显示错误信息。如果请求失败，将显示一个提示框，提示请求失败。

请求代码如下：

附近公交站点信息查看模块实现

实现效果如图4.3至4.4所示：

图4.3 附近站点查看图4.4 站点查询结果

调用wx.chooseLocation方法，弹出选择位置的地图，在用户选择位置完成后，执行回调函数complete，将选择的位置信息作为参数"e"传入回调函数。

如果选择位置成功，使用setData方法将"dingwei_flag"设为1，表示定位成功。使用wx.setStorageSync方法将选择位置的纬度"latitude"和经度"longitude"存储到本地缓存中。调用名为"initfun"的函数，并将选择位置的纬度和经度作为参数传递给它。

如果选择位置失败，使用wx.setNavigationBarTitle方法设置导航栏标题为"位置获取失败，请允许小程序获取位置信息"。使用setData方法将"dingwei_flag"设为2，表示定位失败。

之后根据给定的经纬度向服务器发起请求，获取附近的公交站点信息。使用wx.request发起GET请求。请求成功后，执行回调函数success，将返回的数据作为参数t传入回调函数。判断返回数据中的status是否为0，如果是，则表示请求成功并有公交站点信息并将公交站点信息t.data.data赋值给luxianstr。如果返回数据中的status不为0，表示请求失败或没有公交站点信息，将luxianstr设为空。

请求代码如下：

公交实时信息查看模块实现

实现效果如图4.5至4.6所示：

图4.5 公交实时信息查看图4.6 地图标点效果

用户选择路线后传入路线信息作为详情信息界面加载参数，使用wx.request发起网络请求，请求的URL中包含了公交实时信息的相关参数。

在请求成功的回调函数中，判断返回的数据的return_code是否为"ok"。如果返回的return_code为"ok"，则将返回的数据中的相关信息赋值给页面的data对象中对应的属性，包括lineinfo、bus_ing、stations、bus_list等。同时，使用wx.setStorageSync将当前时间存储为"svtime"，表示上次更新的时间。如果返回的return_code不为"ok"，则显示返回的错误信息。

如果请求失败，则显示请求失败的提示。

点击某一站点，根据公交实时信息中的数据，判断当前公交车辆与目标站点的位置关系，并显示相应的提示信息。使用for循环遍历bus_list数组中的元素。判断当前元素的dis_stat是否与目标站点的索引e.currentTarget.dataset.stadex相等。如果相等，进一步判断当前元素的distance是否为0。如果为0，表示公交已到站，将r设置为"公交已到站"，并跳出循环。否则，将r设置为"即将到站/距离"。如果当前元素的dis_stat小于目标站点的索引，计算需要经过的站点数量，并将r设置为"还有num个站"，并跳出循环。如果以上条件都不满足，则将r设置为"等待发车"。

最后，使用setData将站点名称e.currentTarget.dataset.staname和计算得到的信息r更新到页面的数据中。

地图标点实现：构建地图标记(marker)的信息，并导航到线路地图页面，以展示公交车辆位置的标记。

创建一个空数组markers，用于存储地图标记(marker)的信息。使用for循环遍历bus_list数组中的元素。在每次循环中，将标记点对象推入markers数组中，使用JSON.stringify将markers数组转换为字符串，并将结果赋值给变量marker。使用wx.navigateTo进行页面导航，跳转到名为line_map的页面，并将markers作为参数传递。

实时公交查询系统测试

公交路线查询模块测试

公交路线查询模块功能测试结果如表5.1所示：

表5.1 公交路线查询模块功能测试表

公交路线查询测试用例
用例编号	用例描述	操作过程	数据	预期结果	测试结果
A001	输入关键字进行公交线路查询	在首页的搜索框中输入关键字进行公交线路查询。点击查询按钮或按下回车键进行查询操作。	输入关键字：“1”	查询结果显示包含关键字"1"的公交线路列表。列表中的线路包括： "1路"、"1区间路"、"M1路"等。其他不相关的线路不应显示在结果中。	通过
A002	选择公交线路并查看详情	在查询结果中选择一条公交线路，点击该线路进入详情界面。	选择公交线路“1路”	进入选定公交线路的详情界面。	通过
A003	错误关键字查询	在首页的搜索框中输入错误的关键字进行公交线路查询。点击查询按钮或按下回车键进行查询操作。	输入错误关键字： "abcde"	查询结果为空，不显示任何公交线路。显示错误提示信息： "未找到相关公交线路，请重新输入关键字"。	通过

附近公交站点信息查看模块测试

附近公交站点信息查看模块功能测试结果如表5.2所示：

表5.2 附近公交站点信息查看模块功能测试表

附近公交站点信息查看测试用例
用例编号	用例描述	操作过程	数据	预期结果	测试结果
B001	选择定位并查看附近公交站点信息	在附近页面选择使用定位功能。系统获取用户当前位置并查询附近的公交站点信息。	选择的定位：使用当前位置	界面显示附近的公交站点列表。列表中包含附近公交站点的名称、距离用户当前位置的距离和站点所有公交线路等基本信息。	通过
B002	点击公交站点查看公交线路	在附近公交站点列表中选择一个站点。点击该站点查看该站点的所有公交线路。	选择的公交站点： "站点A"	进入选定站点的公交线路选择界面。显示站点A所拥有的公交线路列表。列表中的线路包括： "公交1路"、"公交2路"、"公交101路"等。	通过
B003	选择公交线路并查看详情	在公交线路选择界面选择一条公交线路，点击该线路进入详情界面。	选择的公交线路： "公交1路"	进入选定公交线路的详情界面。	通过

公交实时信息查看模块测试

公交实时信息查看模块功能测试结果如表5.3所示：

表5.3 公交实时信息查看模块功能测试表

附近公交站点信息查看测试用例
用例编号	用例描述	操作过程	数据	预期结果	测试结果
C001	选择公交线路查看实时运行详情	在公交线路列表或搜索结果中选择一条公交线路。点击该线路进入实时运行详情界面。	选择的公交线路： "公交1路"	进入选定公交线路的实时运行详情界面。详情界面显示该线路的起始站点、终点站、所有站点名称、票价、首班车和末班车时间、当前运行车辆数等详细信息。提供公交车实时位置的展示，如地图显示或列表形式。	通过
C002	点击站点查看距离最近一班车的位置距离	在公交线路实时运行详情界面上选择一个站点。点击该站点查看距离最近一班车的位置距离。	选择的站点： "站点A"	显示距离站点A最近一班车的位置距离，如 “已到站”、“还有2站”、"即将到站\200米"。	通过
C003	点击地图查看地图标点信息	在公交线路详情界面点击“地图”进入地图界面	公交1路当前线上所有运行中的公交车位置	在地图界面中显示该路线上所有公交车的位置	通过