基于微信小程序的“智慧游海底”設(shè)計與開發(fā)

王凱欣，董艷雪，于晴

（臨沂大學(xué) 信息科學(xué)與工程學(xué)院，山東 臨沂 276000）

0 引 言

海洋對人類的生存和發(fā)展有重要意義，海洋是生命的搖籃，資源的寶庫，風(fēng)雨的故鄉(xiāng)。受環(huán)境污染等因素的影響，海洋生態(tài)環(huán)境持續(xù)遭到破壞。海洋需要被保護，而傳統(tǒng)的對海洋環(huán)境保護的宣傳方式效率較低，在互聯(lián)網(wǎng)迅速發(fā)展的今天，應(yīng)充分利用互聯(lián)網(wǎng)的優(yōu)勢，傳遞護海理念，讓更多的人投入到保護海洋的行動中去，同時有效促進智慧旅游的發(fā)展。

微信是當(dāng)前最流行、方便、快捷的即時信息交互軟件之一。與傳統(tǒng)的手機APP相比，微信小程序不需要下載安裝，可以方便地在微信中訪問和傳播，用戶體驗性能良好，退出應(yīng)用時，系統(tǒng)會自動釋放內(nèi)存。基于微信小程序使用方便、用戶基數(shù)大、節(jié)約內(nèi)存、節(jié)省手機桌面空間等優(yōu)點，設(shè)計“去海底，看世界”小程序，借助微信小程序平臺，通過新途徑向廣大用戶傳遞護海理念，推進智慧旅游，為海洋可持續(xù)發(fā)展貢獻自己的一份力量。

1 小程序開發(fā)平臺及環(huán)境

該程序通過微信開發(fā)者工具于Windows端完成開發(fā)與測試。與傳統(tǒng)的APP的開發(fā)相比，小程序開發(fā)門檻和成本較低，還能在一定程度上滿足用戶的需求。小程序嵌入微信內(nèi)部，擁有強大的社交屬性，可以實現(xiàn)O2O模式，給用戶全新的體驗，有效推動旅游產(chǎn)業(yè)的發(fā)展。而微信開發(fā)者工具平臺集中了完成小程序API和頁面開發(fā)、調(diào)試、預(yù)覽、發(fā)布等一系列功能。相比于行業(yè)當(dāng)中的其他同類編程工具而言，該款軟件在功能特色上更加具有優(yōu)勢，首先，開發(fā)者必須通過真實身份對微信網(wǎng)頁授權(quán)后，才能進行相應(yīng)的調(diào)試操作；其次，該平臺可以對頁面的JSSDK權(quán)限進行校驗，還可以對大部分的SDK的輸出和輸入進行很好的模擬；此外，該平臺還提供了一系列的組件和接口，開發(fā)快速；最后，該平臺還利用了集成的chrome dve tools以及基本的移動調(diào)試模塊，從而更好地協(xié)助開發(fā)者的程序開發(fā)工作，幫助開發(fā)者安全又高效地開發(fā)和調(diào)試微信小程序。

2 關(guān)鍵技術(shù)

該程序開發(fā)主要采用WXML（HTML5）、WXSS（CSS）和JavaScript技術(shù)。其中，WXML（WeiXin Markup Language）是框架設(shè)計的標(biāo)簽語言，以視圖（view）的方式串聯(lián)界面元素，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，實現(xiàn)頁面的交互；WXSS（Weixin Style Sheets）用于描述WXML的組件樣式，決定WXML的組件應(yīng)該怎么顯示，WXSS具有CSS大部分特性，同時為了更適合開發(fā)微信小程序，WXSS對CSS進行了擴充以及修改，與CSS相比，WXSS擴展的特性有：尺寸單位、樣式導(dǎo)入；JavaScript用于處理小程序頁面的交互邏輯；WeUI，是一套基于樣式庫weui-wxss開發(fā)的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫。

小程序后端采用微信官方提供的云開發(fā)平臺。小程序·云開發(fā)是微信團隊聯(lián)合騰訊云推出的專業(yè)的小程序開發(fā)服務(wù)，開發(fā)者可以使用云開發(fā)快速開發(fā)小程序、小游戲、公眾號網(wǎng)頁等，并且原生打通微信開發(fā)能力。開發(fā)者無須搭建服務(wù)器，可免鑒權(quán)直接使用平臺提供的API進行業(yè)務(wù)開發(fā)。該程序應(yīng)用了云開發(fā)平臺的云數(shù)據(jù)庫，云函數(shù)，云存儲等。云數(shù)據(jù)庫用于保存小程序中使用的相關(guān)數(shù)據(jù)，包括訂票信息，表演信息及圖鑒信息；云函數(shù)用于處理小程序的后端業(yè)務(wù)邏輯；云端文件存儲用于保存小程序中用到的圖片等靜態(tài)資源；NodeJS用于管理云函數(shù)所需的第三方依賴。

3 小程序主要功能及界面設(shè)計

3.1 “去海底，看世界”小程序?qū)崿F(xiàn)框圖

小程序共分為“首頁”“圖鑒”和“我的”三個主要頁面如圖1所示。各個版塊邏輯清晰、信息明確、內(nèi)容豐富、界面友好、易于用戶瀏覽。

圖1 小程序?qū)崿F(xiàn)框圖

3.2 小程序主要功能設(shè)計

3.2.1 借助第三方軟件以數(shù)據(jù)指引出行

行程安排不合理、交通路線查不到等這些曾經(jīng)是困擾自由行游客的問題。為了滿足游客多元化的需求，該程序成功實現(xiàn)了用戶定位和導(dǎo)航功能。小程序中，用戶點擊位置與方向或者定位按鈕，隨即調(diào)用wx.getLocation（）方法獲取用戶當(dāng)前地理位置的準(zhǔn)確坐標(biāo)以及速度，點擊右下角藍(lán)色按鈕，調(diào)用onGuideTap（）函數(shù)，選擇第三方軟件如高德地圖、百度地圖、騰訊地圖后通過調(diào)用wx.openLocation（）方法打開地圖。這樣，用戶不僅可以方便地獲取當(dāng)前精確地理位置，而且可以通過互聯(lián)網(wǎng)第三方軟件進行實時導(dǎo)航，躲避擁堵，以豐富在線數(shù)據(jù)指引出行路徑如圖2、圖3所示。

圖2 定位

圖3 導(dǎo)航

3.2.2 依托移動手機端實現(xiàn)預(yù)約購票

隨著網(wǎng)絡(luò)信息的不斷發(fā)展，公眾線上消費的熱度持續(xù)攀升。利用廣大用戶線上消費的習(xí)慣，該程序成功實現(xiàn)了模擬預(yù)約訂票功能如圖4、圖5所示。用戶點擊預(yù)約購票，調(diào)用wx.cloud.callFunction（）云函數(shù)，這樣可以獲取用戶填入的姓名、年齡、電話等信息并上傳到云數(shù)據(jù)庫的ticket集合中，在“我的”頁面進行預(yù)約結(jié)果查詢時，直接查詢數(shù)據(jù)庫ticket集合中的信息。如果用戶預(yù)約成功，調(diào)用wx.showToast（）方法，提示用戶“預(yù)定成功，等待付款！”，接著調(diào)用wx.navigateTo（）跳轉(zhuǎn)到等待支付界面；若出現(xiàn)信息填寫錯誤的情況，則調(diào)用wx.showToast（）方法，提示用戶“預(yù)定失敗，請重新預(yù)定！”。用戶實現(xiàn)網(wǎng)上購票，對景區(qū)而言，實現(xiàn)了精準(zhǔn)化、智慧化監(jiān)管，可以減少景區(qū)的人力物力，提前預(yù)知未來幾天景區(qū)游客數(shù)量，合理控制人流量，同時有效避免線下購票人口聚集，給疫情防控帶來的隱患。對游客而言，節(jié)省排隊購票的時間，到達(dá)景區(qū)后，直接憑借電子購票憑證就可以進入景區(qū)游覽。

圖4 預(yù)約購票

圖5 等待支付

該程序還成功實現(xiàn)了撥打電話的功能。通過調(diào)用wx.makePhoneCall（）方法，用戶點擊首頁的電話按鈕，自動跳轉(zhuǎn)到撥打電話的頁面，可撥打海底世界熱線電話，進行詳細(xì)咨詢。

3.2.3 依托資源優(yōu)勢海量內(nèi)容展示多彩海洋

該程序?qū)崿F(xiàn)了對部分海洋生物的展示。通過調(diào)用getArticleData（）函數(shù)，獲取用戶點擊對象的相應(yīng)記錄，將記錄的每個字段結(jié)合book.wxss設(shè)置的樣式展示給用戶，這些記錄包括海洋生物的簡介，分布情況和保護現(xiàn)狀等，吸引廣大用戶親臨參觀豐富多彩的海底世界，了解海洋及海洋生物。

3.2.4 通過交流平臺分享愛洋護洋

該程序模擬設(shè)計“我的海底朋友圈”，為觀光海底世界的朋友提供分享和交流的平臺，也為使用小程序但未參觀的朋友提供了解和瀏覽的渠道。用戶點擊朋友圈的圖片，進行大圖查看時，調(diào)用wx.previewImage（）方法；用戶點贊評論時，調(diào)用TouchDiscuss（）函數(shù)；用戶刪除朋友圈時，調(diào)用delete（）函數(shù)，并通過wx.showToast（）方法提示用戶“刪除成功”。

3.2.5 借助資料板塊增強護海常識

該程序首頁設(shè)置有志愿服務(wù)和保護海洋小知識版塊、志愿服務(wù)版塊，內(nèi)容豐富，展現(xiàn)部分優(yōu)秀海洋志愿者和志愿群體的服務(wù)情況，呼吁越來越多的人加入海洋保護大軍。海洋小知識版塊列舉了一些海洋保護的小常識，比如作為一名游客，在游玩時應(yīng)注意的問題等，讓更多的人了解海洋保護措施及相關(guān)法律知識。

3.3 小程序界面設(shè)計與實現(xiàn)

該程序總體上以藍(lán)色主要背景，配有豐富的實拍圖片和百科資料圖片，向用戶展現(xiàn)海洋文化。首頁是小程序的核心，是用戶進入小程序的第一顯示界面，內(nèi)容最豐富，涵蓋了對海底世界的整體性介紹信息，滿足用戶對景區(qū)認(rèn)識的多樣化需求，讓用戶對海底世界有更深刻的印象。首頁功能模塊包括：景區(qū)簡介、位置與方向、表演與信息、參觀與購票、場館信息、志愿服務(wù)等如圖6所示，方便用戶充分地掌握青島海底世界的相關(guān)信息。用戶點擊進入位置與方向板塊，小程序會自動獲取用戶所在地的精確定位，通過互聯(lián)網(wǎng)地圖，方便用戶了解景區(qū)周邊進行實時導(dǎo)航，這種小程序與移動手機端的第三方軟件互聯(lián)的模式，為用戶的智慧出行提供了方便。表演與信息、志愿服務(wù)板塊中的內(nèi)容通過小程序云數(shù)據(jù)庫存儲，海量數(shù)據(jù)展現(xiàn)生動的海底風(fēng)貌以及現(xiàn)階段海洋保護志愿者的志愿服務(wù)情況。

圖6 首頁

圖鑒頁面展示部分海洋生物的信息，包括海洋生物的圖片，分布情況以及保護現(xiàn)狀。

在進入“我的”頁面之前需要實現(xiàn)用戶微信授權(quán)登錄，獲取用戶的頭像、昵稱等基本信息。此頁面包含我的朋友圈和預(yù)約記錄如圖7所示，“我的”頁面的背景取自青島地標(biāo)——五月的風(fēng)，向小程序用戶展現(xiàn)青島海邊文化及歷史風(fēng)貌，五月的風(fēng)是五四運動精神的地標(biāo)性建筑，既象征著民族力量生生不息，祖國各項事業(yè)蓬勃發(fā)展，又在時刻提醒著過往的人們不要忘記那段可歌可泣的歷史。在預(yù)約購票界面預(yù)約時，調(diào)用了wx.cloud.callFunction（）云函數(shù)，成功獲取用戶填入的姓名、電話、預(yù)約時間、購票類型等信息并上傳到云數(shù)據(jù)庫的ticket集合中，在“我的”頁面進行預(yù)約結(jié)果查詢時，直接查詢數(shù)據(jù)庫對應(yīng)ticket集合中的信息，這樣，可以使用戶方便迅速地查找到自己的預(yù)約記錄。

圖7 我的

4 小程序測試

4.1 前端頁面測試

微信開發(fā)者工具安裝、授權(quán)測試使用的微信號可以預(yù)覽和調(diào)試小程序，經(jīng)測試，各個頁面跳轉(zhuǎn)正常。

4.2 操作系統(tǒng)兼容性測試

兼容性測試包括操作系統(tǒng)測試、手機型號、屏幕大小測試等。操作系統(tǒng)主要是指Android操作系統(tǒng)和iOS系統(tǒng)，小程序運行在微信中，底層調(diào)用依賴于具體的操作系統(tǒng)，所以有必要對不同的操作系統(tǒng)進行測試。經(jīng)測試，小程序可以在Android和iOS上正常運行，并覆蓋到最新的試用版和當(dāng)前流行的主要版本，該小程序能兼容各種手機型號，適應(yīng)不同手機屏幕大小。

4.3 功能交互與穩(wěn)定性測試

測試程序與微信功能及第三方軟件的交互正常，程序內(nèi)部頁面與頁面之間切換正常。在系統(tǒng)的穩(wěn)定性方面，主要是使用精簡和優(yōu)化的代碼來提高系統(tǒng)的運行效率如圖8所示。

圖8 定位與導(dǎo)航wxml代碼實現(xiàn)

4.4 網(wǎng)絡(luò)測試與體驗性

通過在不同網(wǎng)絡(luò)類型（2G/4G/5G/Wi-Fi/熱點）和環(huán)境中切換，發(fā)現(xiàn)小程序在各種網(wǎng)絡(luò)狀況下的運行情況都正常。在系統(tǒng)體驗性方面，以系統(tǒng)穩(wěn)定為基礎(chǔ)，采用系統(tǒng)tabBar圖標(biāo)和豐富多彩的景區(qū)圖片等使系統(tǒng)界面更友好、美觀，提高用戶的體驗感。系統(tǒng)功能穩(wěn)定，符合預(yù)期。

5 結(jié) 論

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