基于微信小程序的公共衛生間位置查詢平臺

周 霞，張 馳，車明亮，張季一，王英利，趙忠杰*

（1.蘇州信息職業技術學院 大數據與互聯網學院，江蘇 蘇州 215200；2.南通大學 地理科學學院，江蘇 南通 226007）

如今移動互聯網已成為人們日常生活中必不可少的重要內容，是未來網絡發展的核心和最重要的趨勢之一[1]。它是移動和互聯網融合的產物，繼承了移動通信隨時、隨地、隨身的特點以及互聯網開放、共享、互動的優勢，繼而提供類型豐富、可交互、高品質的信息服務[2]。微信是移動互聯網的重要組成部分。國內電信運營商與微信的合作（如中國聯通與騰訊聯合推出的微信沃卡[3]）促使基于微信的各種服務平臺井噴式增長。微信小程序作為新興技術，在簡潔性和內存占用方面比常規App（即原生應用，Native App）更具優勢，其減壓、減負式創新特點有助于用戶的推廣使用[4]。生活服務是微信的重要功能[5]，但其主要面向購物、餐飲、外賣、旅游、影視、游戲等內容[6]，對具有公益性質的公共衛生間位置信息服務等內容涉及較少。公共衛生間作為生活服務中必不可少的重要內容，其信息化建設不可忽視。通常人們在外出活動時，為了尋找就近的公共衛生間，會使用高德、百度、騰訊等網絡地圖App進行搜索；但這些地圖App需要預先安裝、功能繁多、使用復雜，還有各種廣告信息和喜好推薦，使人們感到信息累贅。

目前存在少量針對公共衛生間的應用研究[7-9]，也有研究利用混合型App架構，融合移動互聯網和物聯網設計智慧公共衛生間平臺的概念性框架[10]；但關于設計開發面向移動互聯網的公共衛生間位置查詢平臺的研究則較少見，因此本文將通過設計微信平臺并開發小程序來實現公共衛生間的信息化建設，使人們可以迅速、便捷地查找所在位置周圍的公共衛生間網點。

1 關鍵技術

實現基于微信小程序的公共衛生間查詢平臺，需要解決3個方面問題：①構建基于微信小程序的公共衛生間查詢平臺架構；②獲取基于第三方數據的公共衛生間位置數據；③搜索目標衛生間和路線選擇。本文將針對上述3個問題展開詳細闡述。

1.1 平臺架構

基于微信小程序的公共衛生間查詢平臺架構如圖1所示，包括前端和后端兩個部分，前端主要實現數據的表達以及與用戶的交互，后端主要涉及業務邏輯和數據交互。平臺采用的基本架構為模型—視圖—視圖模型（MVVM）結構，包括數據模型（Model）、視圖（View）和視圖模型（ViewModel），是一種基于前端開發的架構模式。其中，Model定義了數據修改和操作的業務邏輯，View負責將數據模型轉化為交互界面，ViewModel用于連接模型及其視圖。通過MVVM結構，View可通過事件綁定Model，Model可通過數據綁定View，利用ViewModel可實現數據與View的完全分離。

圖1 平臺架構

在利用微信開發者工具開發小程序代碼時，前端架構涉及的文件類型主要包括wxml文件、wxss文件和Javascript文件3種。在該框架中，界面由wxml文件描述（微信標記語言）。它是微信框架提供的一套標簽語言，用于編寫靜態頁面。在微信小程序框架中，官方提供了大量高頻率使用的組件，如基本視圖組件view、基本內容組件text、多媒體組件image等。在前端架構中，View和ViewModel實現了雙向數據綁定，使得ViewModel的狀態改變可自動傳遞給View。wxss文件是微信樣式表文件，用于設計頁面樣式。在微信小程序框架中，通過在全局樣式（app.wxss）文件和獨立頁面樣式文件編寫CSS樣式，以此設計頁面顯示風格。Javascript文件為腳本文件，用于編寫組件行為和代碼邏輯，起到承上啟下的作用，既可用于前端用戶交互，又可調用后端服務。

后端架構主要由Node.JS和Express框架構成。Node.JS是基于Chrome V8引擎開發設計的Javascript運行環境。它采用事件驅動、非阻塞式I/O模型和事件驅動模型，使得其可并發處理許多鏈接，每個鏈接都會觸發一個回調函數，整個過程中不會阻塞用戶請求。Express框架中包含一個數據庫模塊，是一個實現了MySQL協議的Node.JS運行環境的Javascript客戶端。借助Express框架，Node.JS可以有效地與數據庫（本文采用MySQL數據庫）進行交互，從而實現數據流轉。JSON文件在該架構中起到了兩個作用：①作為靜態配置文件，實現開發者工具的個性化定制，如界面顏色、編譯配置等；②實現數據傳輸，保護前、后端的數據交互以及后端與數據庫的數據交互。

1.2 數據獲取和處理方法

平臺的公共衛生間位置數據主要來源于網絡地圖，通過調用網絡地圖提供的API，可獲取研究區內公共衛生間的位置數據。由于初次獲取的位置數據存在冗余，因此需進行去重處理。基于Node.JS，平臺通過Axios庫調用接口獲取位置數據，并對獲取的數據進行去重處理。其關鍵代碼為：

在Node.JS的基礎上，對MySQL數據庫進行操作，將去重后的數據按照字段進行入庫，最終獲取的南通市公共衛生間POI數據如圖2所示。

圖2 研究區POI數據空間分布圖

1.3 公共衛生間查詢與步行路徑規劃

平臺的核心功能是查詢，需支持包括但不限于根據用戶當前位置、用戶搜索位置、搜索半徑條件搜索周圍公共衛生間。因此，關鍵需要實現以下3個功能。

1）公共衛生間數據查詢。平臺采用小程序自帶封裝好的request函數對接口進行請求調用，實現對公共衛生間數據的查詢。其關鍵代碼為：

2）檢索特定衛生間。在搜索結果中選擇特定公共衛生間是平臺的核心功能之一。當用戶需要查看一個公共衛生間時，通過點擊該公共衛生間圖標，能在下方信息區域顯示公共衛生間的位置以及用戶當前位置到公共衛生間的距離信息。用戶點擊公共衛生間圖標的函數代碼為：

3）步行路徑顯示和路徑分析。步行路徑顯示和路徑分析是平臺的核心功能之一。當用戶點擊選擇公共衛生間路線時，地圖中能顯示具體路線圖并在下方信息區域顯示從用戶當前位置到公共衛生間的步行路徑分析。路線規劃的關鍵代碼為：

2 平臺實現

通過上述方法，本文實現了基于微信小程序的南通市公共衛生間查詢平臺。首先通過微信搜索平臺小程序標識“NTWCSearch”進入小程序（也可掃二維碼進入），初始界面如圖3a所示；然后根據當前位置按默認緩沖區半徑搜索公共衛生間集合，并選擇其中某個公共衛生間，可查看公共衛生間的詳細信息，如圖3b所示；最后在頁面底端點擊路線按鈕，將在地圖中顯示步行路線，同時在信息區域顯示步行路徑分析，如圖3c所示。

圖3 平臺運行界面

3 結語

本文利用微信開發者工具構建了南通市公共衛生間查詢平臺。首先采用MVVM模式構建了系統的前端和后端，實現了前、后端交互以及數據庫的訪問框架；然后通過調用網絡地圖提供的API，獲取了公共衛生間數據；最后實現了公共衛生間數據的查詢以及路徑規劃等功能。本文主要解決了公共衛生間查詢平臺的關鍵技術問題，今后將對該平臺的相關功能進行完善。