基于微信小程序的立FLAG交互系統(tǒng)的設(shè)計與實現(xiàn)

蘇 娜

(正德職業(yè)技術(shù)學(xué)院，江蘇 南京 211100)

0 引言

微信小程序是一種不用下載就能使用的應(yīng)用，可以在微信內(nèi)被便捷地獲取和傳播，同時具有出色的使用體驗。微信小程序具有新交互性，基于群的互動和娛樂，不僅是用群的方式來獲取群的流量紅利，而且還基于群的關(guān)系開發(fā)出更多適合群的場景玩法。立FLAG小程序正是基于這一特點，針對年輕團(tuán)體，聚合年輕人所熱愛的記錄生活的形式，通過立FLAG提出目標(biāo)并分享完成的過程記錄，在線還原生活中的場景。

1 開發(fā)小程序的相關(guān)技術(shù)

1.1 微信小程序

微信小程序依賴微信應(yīng)用而生，提供一套應(yīng)用程序接口(Application Programming Interface，API)，實現(xiàn)了應(yīng)用“觸手可及”的夢想，也體現(xiàn)了“即來即用，用完即走”的理念[1]，是一種全新的連接用戶與服務(wù)的方式，具有出色的使用體驗。微信小程序的框架采用模型-視圖-控制器(Model-View-Controller，MVC)開發(fā)思想，整個框架系統(tǒng)分為兩個部分：邏輯層(App Service)和視圖層(View)。小程序提供了自己的視圖層描述語言WXML和WXSS以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。同時，微信官方還提供了很多組件和API接口。小程序的開發(fā)使用的是微信開發(fā)者工具，該工具是開發(fā)小程序的可視化編輯器，是用來簡便、快捷的制作小程序的專業(yè)軟件。

1.2 云開發(fā)

在進(jìn)行小程序開發(fā)時，總是會接觸到小程序服務(wù)器端的開發(fā)，這就要必須搭配后端服務(wù)進(jìn)行開發(fā)。小程序的云開發(fā)功能為前端開發(fā)者帶來了便利，云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務(wù)支持，弱化后端和運維概念，無須搭建服務(wù)器，使用平臺提供的API進(jìn)行核心業(yè)務(wù)開發(fā)，即可實現(xiàn)快速上線和迭代，同時這一能力同開發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥[2]。

云開發(fā)核心能力包括云存儲、云數(shù)據(jù)庫、云函數(shù)、云調(diào)用、HTTP API。這種開發(fā)模式可以實現(xiàn)真正的全棧技術(shù)開發(fā)，對現(xiàn)有的開發(fā)模式是一次很大的革新(見圖1)。

圖1 云開發(fā)模式

2 微信小程序的實現(xiàn)

立FLAG微信小程序分為前臺客戶端和云開發(fā)后臺管理端兩部分。前臺客戶端也就是微信小程序端，主要功能包括發(fā)布新的FLAG、瀏覽FLAG、評價、關(guān)注FLAG、添加新的日志、瀏覽日志以及評價日志。后臺管理端主要包括對用戶信息、FLAG信息、日志信息、用戶評價等管理。

2.1 小程序端

用戶授權(quán)登錄后進(jìn)入首頁，在首頁可以瀏覽FLAG，包括FLAG圈、我發(fā)起的FLAG和我關(guān)注的FLAG，以輪播的方式顯示，如圖2所示。點擊右上方的“更多”按鈕，可以進(jìn)入FLAG列表頁。點擊FLAG，即可進(jìn)入FLAG詳情頁，可以查看FLAG的詳細(xì)信息，如圖3所示。該頁面顯示了該FLAG目前進(jìn)行的狀態(tài)，其他用戶可以關(guān)注和在底部留言評價該FLAG，點擊日志按鈕可以查看日志詳細(xì)信息，并對日志進(jìn)行評價和點贊，如圖4所示。

點擊首頁底端的“發(fā)起挑戰(zhàn)”按鈕，進(jìn)入發(fā)起FLAG頁面，需要輸入你此刻的想法，并可以添加最多9張圖片，填好后點擊提交按鈕即可發(fā)布，如圖5所示?；氐绞醉摵罂梢钥吹叫掳l(fā)起的FLAG內(nèi)容。

圖5 FLAG發(fā)起頁

點擊頁面底端的“搜索”按鈕，可以進(jìn)入搜索界面，搜索你的好友，點擊好友后，可以進(jìn)入好友的FLAG列表頁，如圖6所示。該頁面顯示了該用戶發(fā)起的所有FLAG列表，并且統(tǒng)計了FLAG完成的情況，即立FLAG成功了幾個、失敗了幾個。

圖6 用戶FLAG列表頁

2.2 云開發(fā)后臺

云開發(fā)具有四大基礎(chǔ)能力，這里主要使用了其中的兩大基礎(chǔ)能力：云數(shù)據(jù)庫和云存儲。

2.2.1 云數(shù)據(jù)庫

云數(shù)據(jù)庫是一個既可在小程序前端操作，也能在云函數(shù)中讀寫的JSON數(shù)據(jù)庫，無須自建數(shù)據(jù)庫，一個數(shù)據(jù)庫可以有多個集合，即相當(dāng)于關(guān)系數(shù)據(jù)中的表集合可以看作一個JSON數(shù)組，數(shù)組中的每個對象就是一條記錄[2]。

該系統(tǒng)使用云數(shù)據(jù)庫建表，具有數(shù)據(jù)存儲、查找、修改和刪除功能。該數(shù)據(jù)庫共6個集合，包括FLAG信息表、FLAG日志表、FLAG評價表、日志評價表、FLAG關(guān)注點贊表、日志點贊表。以FLAG信息表為例，其中一條記錄如圖7所示。

圖7 FLAG信息表記錄

2.2.2 云存儲

云開發(fā)提供了一塊存儲空間，提供了上傳文件到云端、帶權(quán)限管理的云端下載能力。在小程序端可以分別調(diào)用wx.cloud.uploadFile和wx.cloud.downloadFile完成上傳和下載云文件操作，無須自建存儲和內(nèi)容分發(fā)網(wǎng)絡(luò)(Content Delivery Network，CDN)[3]。

該系統(tǒng)在發(fā)起FLAG和添加日志信息時需要上傳圖片到云端，部分代碼如圖8所示。

圖8 部分代碼

3 結(jié)語

經(jīng)過測試，目前系統(tǒng)能夠正常、長期地運行，并且達(dá)到了預(yù)期的效果，后期會持續(xù)優(yōu)化完善。