基于微信小程序的AI 智能云路向导的设计与实现

郭晨晨，李佳虎，李双，张慧娥（通信作者）

（西安思源学院电子信息工程学院，陕西西安，710038）

0 引言

九月是收获的季节，各大高校迎来了新生力量，全国各地的学生来到新校园，开启人生的新阶段。为了更快的熟悉新环境，学校进行的周密报道的安排，老生带队顺利的完成了入学报道，可是想独自浏览一下学校的美景，熟悉校园的整体布局，拿着学校准备的纸质地图，还是经常找不到地方。除了新生外，学校经常会承接一些社会考试，这些考生对校园不熟悉，经常有找不到考场的现象。微信小程序（Wechat Mini Program），是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用[1]。所以开发一款校园导航微信小程序是非常有必要的。不需要下载安装软件，新生和考生只需要扫码，就可以在校园随心所欲的畅游，更加深入的了解校园的每一个重要角落。

1 功能设计

■1.1 总体功能

智能云路向导小程序的主要功能模块是思源简介和了解思源。思源简介包含轮播图展示、校园介绍和路径规划的功能。了解思源包含12 个景点导航、当前定位、景点列表、地点搜索和路径规划功能。其中定位功能通过腾讯地图中的地图组件和定位接口进行定位；路径规划通过高德地图进行。总体功能如图1 所示。

图1 总体功能图

■1.2 页面设计

该小程序共有5 个页面，小程序首页、简介页、校园导览页、路径规划页、和搜索页面。

首页中有思源简介和了解思源两个链接按钮。

简介页分为两部分，第一部分以轮播的形式显示校园的三张校园图片，第二部分显示学校的简介，在两部分中间添加路径规划按钮，单击此按钮进入路径导航页面。

校园导览页分为三部分，第一部分是导航栏，包含景点、行政楼、平阶教室、教学楼等8 个选项卡，第二部分是地图展示，在地图中标识了学校的所有的建筑、景点，运动场所等，并且添加了搜索和规划路径按钮，第三部分是每一个导航按钮下的具体景观列表，列表中包含图片、文件和规划路径。

路径规划页利用腾讯地图和高德地图的Key 进行路径规划，显示起点和终点并进行路径导航[3]。

搜索页面通过在文本框中输入景点、建筑或场所的名称，点击搜索按钮，在页面下方显示搜索结果，可以进行路径规划[4]。

■1.3 数据设计

微信小程序数据以json 格式进行显示，在该小程序中创建一个公共资源文件夹，在文件夹下创建一个数据文件，包含学校简介数据和学校地图数据。学校简介数据包含学校缩写，学校全名，首页图片地址，分享时展示图片的地址，学校的经度，纬度，简介图片和简介。学校地图数据以数组形式展示，数组元素是8 个选项卡，每个选项卡中又包括景点名称，比例大小设置和具体数据，其中具体数据以数组的形式列出，具体每个元素中记录的信息有名称，经度、纬度、图标、宽度、高度、图片和描述。在数据文件中通过module.exports 语句暴露简介和地图数据。这样在其它的逻辑文件中通过require 就可以利用公共数据了。

该小程序中存储的部分建筑和主要场所的经度(longitude)和纬度(latitude)内容表1 所示。

表1

2 功能实现

在小程序的主体文件中设置公共的内容，App.json中设置pages 页和window 的样式，在App.js 中编写onlaunch 回调函数，获取学校的地理位置信息，并通过自定义函数载入本地数据在加载网络数据。在Untils 公共文件夹下创建地图的逻辑处理文件amap-wx.js;创建配置文件config.js，包含调试模式开关，调试模式下只调用本地数据，学校名称和高德路线规划密钥，并且需要把其域名加入为request 合法域名[2]。

■2.1 页面实现

该小程序共有5 个页面，小程序首页、简介页、校园导览页、路径规划页、和搜索页面。通过.wxml 文件进行基本组件的布局，通过.wxss 文件进行页面的样式设置。小程序首页的.wxml 中主要使用view 组件作为容器组件，navigator 组件实现跳转，text 组件实现文字显示；小程序首页如图2 所示。

图2 小程序首页图

简介页通过swiper、block 和swipter-item 组件结合来实现轮播图和学校简介信息，使用导航组件链接到轮播图中显示的建筑的路径规划。

校园导览页放在view 容器组件中，第一部分使用scroll-view 和lable 组件完成选项卡的实现，scroll-view组件中的每一项，即选项卡的显示内容使用view 组件；外层view 组件的样式主要设置宽度为100%，scroll-view 组件的滚动方向设置为横向，内部view 组件的宽度需要计算；第二部分使用map 组件显示地图，使用经度和纬度属性显示标记，并且取得当前定位；第三部分使用button 组件显示后端景观数，使用scroll-view 组件显示具体景点和建筑物列表，通过在scroll-view 组件中插入view 组件，使用循环语句实现后端数据的显示，使用navigator 组件实现路径规划和搜索跳转。

路径规划页使用map 地图组件，需要显示当前位置的经纬度、标记、路线等属性，使用cover-view 组件显示后端的距离。

搜索页面主要使用表单的input 组件来展现搜索框，需要设置绑定事件和占位符属性等，使用view 和navigator组件显示搜到的结果和导航链接。

■2.2 逻辑功能实现

逻辑功能通过.js 文件来实现，首页.js 文件主要包含数据集，onload 函数；校园导览页的.js 文件主要包含数据集，onload 函数，自定义定位函数，单击函数。定位函数的主要代码如下：

校园导览页如图3 所示。

图3 校园导览页

2.2.1 路径规划功能

路径规划的逻辑文件.js的主要内容包含声明应用实例，请求公共文件，page 页面中又数据集，onload 函数，自定义路径函数，路径规划如图4 所示。计算路径长度的代码如下：

图4 路径规划图

2.2.2 搜索功能

从搜索框中获取文本，判断数据是否为空，如果不为空，在地图中所标注的图标中找相应名称，把对应数据存入需要显示的数据中，包含图标，文字，路径规划链接。搜索功能图如图5 所示。

图5 搜索功能图

3 系统测试

微信小程序测试主要包含权限测试，功能测试，兼容性测试和易用性测试。权限测试从未授权微信登录小程序、已授权微信登录小程序两个方面测试；按照功能模块、数据流向、同一功能不同的入口有效性和交互性检查对导航小程序的功能进行测试，系统可以正常进行学校简介，用户的实时定位，目的地导航，路径规划，目的地搜索的完整过程。兼容性测试主要包含操作系统兼容性，屏幕兼容性和微信兼容性，通过对Android 操作系统和iOS 系统进行测试，屏幕的正确显示性测试，在不同微信版本上进行了测试；通过导航、功能入口、上下级进入与返回和字体、图片、动态交互效果对易用性进行了测试。在测试期间中间出现过bug，都一一排除。并且在2021 年9 月新生报到期，已经推广使用，学生在使用过程中没有卡顿现象，运行效果良好，用户体现满意度高。

4 结束语

基于微信小程序的智能云路向导以西安思源学院为实例进行开发，主要实现了校园介绍、路线规划、当前定位、重要场所及建筑的列表，搜索等功能，使用微信小程序的通用组件和map 组件完成前端页面布局，利用JavaScript 脚本语言实现逻辑处理，调用腾讯地图接口获取当前定位，通过获取高德地图的key 完成路径规划。该智能云路向导帮助新生熟悉校园环境，让新生更快更准确的到达目的地，为参加考试的考生准确导航到考场。该程序的不足之处是没有实现语音导航功能，后期将进一步完善语音导航功能。该导航系统有很广泛的推广价值，可以推广到景区，游客只要扫码就该程序就可以实现电子导游的功能。