基于微信小程序的立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所示。回到首页后可以看到新发起的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 结语

经过测试，目前系统能够正常、长期地运行，并且达到了预期的效果，后期会持续优化完善。