基于微信小程序的立FLAG交互系統的設計與實現

蘇 娜

(正德職業技術學院，江蘇 南京 211100)

0 引言

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

1 開發小程序的相關技術

1.1 微信小程序

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

1.2 云開發

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

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

圖1 云開發模式

2 微信小程序的實現

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

2.1 小程序端

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

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

圖5 FLAG發起頁

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

圖6 用戶FLAG列表頁

2.2 云開發后臺

云開發具有四大基礎能力，這里主要使用了其中的兩大基礎能力：云數據庫和云存儲。

2.2.1 云數據庫

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

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

圖7 FLAG信息表記錄

2.2.2 云存儲

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

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

圖8 部分代碼

3 結語

經過測試，目前系統能夠正常、長期地運行，并且達到了預期的效果，后期會持續優化完善。