基于微信小程序的“智慧游海底”设计与开发

王凯欣，董艳雪，于晴

（临沂大学 信息科学与工程学院，山东 临沂 276000）

0 引 言

海洋对人类的生存和发展有重要意义，海洋是生命的摇篮，资源的宝库，风雨的故乡。受环境污染等因素的影响，海洋生态环境持续遭到破坏。海洋需要被保护，而传统的对海洋环境保护的宣传方式效率较低，在互联网迅速发展的今天，应充分利用互联网的优势，传递护海理念，让更多的人投入到保护海洋的行动中去，同时有效促进智慧旅游的发展。

微信是当前最流行、方便、快捷的即时信息交互软件之一。与传统的手机APP相比，微信小程序不需要下载安装，可以方便地在微信中访问和传播，用户体验性能良好，退出应用时，系统会自动释放内存。基于微信小程序使用方便、用户基数大、节约内存、节省手机桌面空间等优点，设计“去海底，看世界”小程序，借助微信小程序平台，通过新途径向广大用户传递护海理念，推进智慧旅游，为海洋可持续发展贡献自己的一份力量。

1 小程序开发平台及环境

该程序通过微信开发者工具于Windows端完成开发与测试。与传统的APP的开发相比，小程序开发门槛和成本较低，还能在一定程度上满足用户的需求。小程序嵌入微信内部，拥有强大的社交属性，可以实现O2O模式，给用户全新的体验，有效推动旅游产业的发展。而微信开发者工具平台集中了完成小程序API和页面开发、调试、预览、发布等一系列功能。相比于行业当中的其他同类编程工具而言，该款软件在功能特色上更加具有优势，首先，开发者必须通过真实身份对微信网页授权后，才能进行相应的调试操作；其次，该平台可以对页面的JSSDK权限进行校验，还可以对大部分的SDK的输出和输入进行很好的模拟；此外，该平台还提供了一系列的组件和接口，开发快速；最后，该平台还利用了集成的chrome dve tools以及基本的移动调试模块，从而更好地协助开发者的程序开发工作，帮助开发者安全又高效地开发和调试微信小程序。

2 关键技术

该程序开发主要采用WXML（HTML5）、WXSS（CSS）和JavaScript技术。其中，WXML（WeiXin Markup Language）是框架设计的标签语言，以视图（view）的方式串联界面元素，结合基础组件、事件系统，实现页面的交互；WXSS（Weixin Style Sheets）用于描述WXML的组件样式，决定WXML的组件应该怎么显示，WXSS具有CSS大部分特性，同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改，与CSS相比，WXSS扩展的特性有：尺寸单位、样式导入；JavaScript用于处理小程序页面的交互逻辑；WeUI，是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库。

小程序后端采用微信官方提供的云开发平台。小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务，开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开发能力。开发者无须搭建服务器，可免鉴权直接使用平台提供的API进行业务开发。该程序应用了云开发平台的云数据库，云函数，云存储等。云数据库用于保存小程序中使用的相关数据，包括订票信息，表演信息及图鉴信息；云函数用于处理小程序的后端业务逻辑；云端文件存储用于保存小程序中用到的图片等静态资源；NodeJS用于管理云函数所需的第三方依赖。

3 小程序主要功能及界面设计

3.1 “去海底，看世界”小程序实现框图

小程序共分为“首页”“图鉴”和“我的”三个主要页面如图1所示。各个版块逻辑清晰、信息明确、内容丰富、界面友好、易于用户浏览。

图1 小程序实现框图

3.2 小程序主要功能设计

3.2.1 借助第三方软件以数据指引出行

行程安排不合理、交通路线查不到等这些曾经是困扰自由行游客的问题。为了满足游客多元化的需求，该程序成功实现了用户定位和导航功能。小程序中，用户点击位置与方向或者定位按钮，随即调用wx.getLocation（）方法获取用户当前地理位置的准确坐标以及速度，点击右下角蓝色按钮，调用onGuideTap（）函数，选择第三方软件如高德地图、百度地图、腾讯地图后通过调用wx.openLocation（）方法打开地图。这样，用户不仅可以方便地获取当前精确地理位置，而且可以通过互联网第三方软件进行实时导航，躲避拥堵，以丰富在线数据指引出行路径如图2、图3所示。

图2 定位

图3 导航

3.2.2 依托移动手机端实现预约购票

随着网络信息的不断发展，公众线上消费的热度持续攀升。利用广大用户线上消费的习惯，该程序成功实现了模拟预约订票功能如图4、图5所示。用户点击预约购票，调用wx.cloud.callFunction（）云函数，这样可以获取用户填入的姓名、年龄、电话等信息并上传到云数据库的ticket集合中，在“我的”页面进行预约结果查询时，直接查询数据库ticket集合中的信息。如果用户预约成功，调用wx.showToast（）方法，提示用户“预定成功，等待付款！”，接着调用wx.navigateTo（）跳转到等待支付界面；若出现信息填写错误的情况，则调用wx.showToast（）方法，提示用户“预定失败，请重新预定！”。用户实现网上购票，对景区而言，实现了精准化、智慧化监管，可以减少景区的人力物力，提前预知未来几天景区游客数量，合理控制人流量，同时有效避免线下购票人口聚集，给疫情防控带来的隐患。对游客而言，节省排队购票的时间，到达景区后，直接凭借电子购票凭证就可以进入景区游览。

图4 预约购票

图5 等待支付

该程序还成功实现了拨打电话的功能。通过调用wx.makePhoneCall（）方法，用户点击首页的电话按钮，自动跳转到拨打电话的页面，可拨打海底世界热线电话，进行详细咨询。

3.2.3 依托资源优势海量内容展示多彩海洋

该程序实现了对部分海洋生物的展示。通过调用getArticleData（）函数，获取用户点击对象的相应记录，将记录的每个字段结合book.wxss设置的样式展示给用户，这些记录包括海洋生物的简介，分布情况和保护现状等，吸引广大用户亲临参观丰富多彩的海底世界，了解海洋及海洋生物。

3.2.4 通过交流平台分享爱洋护洋

该程序模拟设计“我的海底朋友圈”，为观光海底世界的朋友提供分享和交流的平台，也为使用小程序但未参观的朋友提供了解和浏览的渠道。用户点击朋友圈的图片，进行大图查看时，调用wx.previewImage（）方法；用户点赞评论时，调用TouchDiscuss（）函数；用户删除朋友圈时，调用delete（）函数，并通过wx.showToast（）方法提示用户“删除成功”。

3.2.5 借助资料板块增强护海常识

该程序首页设置有志愿服务和保护海洋小知识版块、志愿服务版块，内容丰富，展现部分优秀海洋志愿者和志愿群体的服务情况，呼吁越来越多的人加入海洋保护大军。海洋小知识版块列举了一些海洋保护的小常识，比如作为一名游客，在游玩时应注意的问题等，让更多的人了解海洋保护措施及相关法律知识。

3.3 小程序界面设计与实现

该程序总体上以蓝色主要背景，配有丰富的实拍图片和百科资料图片，向用户展现海洋文化。首页是小程序的核心，是用户进入小程序的第一显示界面，内容最丰富，涵盖了对海底世界的整体性介绍信息，满足用户对景区认识的多样化需求，让用户对海底世界有更深刻的印象。首页功能模块包括：景区简介、位置与方向、表演与信息、参观与购票、场馆信息、志愿服务等如图6所示，方便用户充分地掌握青岛海底世界的相关信息。用户点击进入位置与方向板块，小程序会自动获取用户所在地的精确定位，通过互联网地图，方便用户了解景区周边进行实时导航，这种小程序与移动手机端的第三方软件互联的模式，为用户的智慧出行提供了方便。表演与信息、志愿服务板块中的内容通过小程序云数据库存储，海量数据展现生动的海底风貌以及现阶段海洋保护志愿者的志愿服务情况。

图6 首页

图鉴页面展示部分海洋生物的信息，包括海洋生物的图片，分布情况以及保护现状。

在进入“我的”页面之前需要实现用户微信授权登录，获取用户的头像、昵称等基本信息。此页面包含我的朋友圈和预约记录如图7所示，“我的”页面的背景取自青岛地标——五月的风，向小程序用户展现青岛海边文化及历史风貌，五月的风是五四运动精神的地标性建筑，既象征着民族力量生生不息，祖国各项事业蓬勃发展，又在时刻提醒着过往的人们不要忘记那段可歌可泣的历史。在预约购票界面预约时，调用了wx.cloud.callFunction（）云函数，成功获取用户填入的姓名、电话、预约时间、购票类型等信息并上传到云数据库的ticket集合中，在“我的”页面进行预约结果查询时，直接查询数据库对应ticket集合中的信息，这样，可以使用户方便迅速地查找到自己的预约记录。

图7 我的

4 小程序测试

4.1 前端页面测试

微信开发者工具安装、授权测试使用的微信号可以预览和调试小程序，经测试，各个页面跳转正常。

4.2 操作系统兼容性测试

兼容性测试包括操作系统测试、手机型号、屏幕大小测试等。操作系统主要是指Android操作系统和iOS系统，小程序运行在微信中，底层调用依赖于具体的操作系统，所以有必要对不同的操作系统进行测试。经测试，小程序可以在Android和iOS上正常运行，并覆盖到最新的试用版和当前流行的主要版本，该小程序能兼容各种手机型号，适应不同手机屏幕大小。

4.3 功能交互与稳定性测试

测试程序与微信功能及第三方软件的交互正常，程序内部页面与页面之间切换正常。在系统的稳定性方面，主要是使用精简和优化的代码来提高系统的运行效率如图8所示。

图8 定位与导航wxml代码实现

4.4 网络测试与体验性

通过在不同网络类型（2G/4G/5G/Wi-Fi/热点）和环境中切换，发现小程序在各种网络状况下的运行情况都正常。在系统体验性方面，以系统稳定为基础，采用系统tabBar图标和丰富多彩的景区图片等使系统界面更友好、美观，提高用户的体验感。系统功能稳定，符合预期。

5 结 论

海洋孕育了生命，联通了世界，促进了发展。海洋环境的保护不是一朝一夕的问题，需要一代又一代人共同守护。该应用程序的应用，有助于加快景区向数字化、网络化、智能化转型的步伐，为景区提供一个全新信息技术手段，推动景区向良好业态发展，同时，突破了传统意义上地对海洋环境保护的宣传形式，通过移动手机端，用户众多的微信平台，呼吁更多的人参观海底世界，了解海洋，提高海洋环境保护意识，为推进海洋可持续发展贡献自己的一份力量。