基于微信小程序的“智慧游海底”設計與開發

王凱欣，董艷雪，于晴

（臨沂大學 信息科學與工程學院，山東 臨沂 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 結 論

海洋孕育了生命，聯通了世界，促進了發展。海洋環境的保護不是一朝一夕的問題，需要一代又一代人共同守護。該應用程序的應用，有助于加快景區向數字化、網絡化、智能化轉型的步伐，為景區提供一個全新信息技術手段，推動景區向良好業態發展，同時，突破了傳統意義上地對海洋環境保護的宣傳形式，通過移動手機端，用戶眾多的微信平臺，呼吁更多的人參觀海底世界，了解海洋，提高海洋環境保護意識，為推進海洋可持續發展貢獻自己的一份力量。