答题积分小程序云开发实战-开篇：项目介绍以及效果图

答题积分小程序云开发实战

开篇：项目介绍以及效果图

前言

我也看过不少的册子或者文章，大部分都很优秀，但也有的就长篇累牍，从时代背景讲起，复述各种基本概念、底层原理......嗯，看似很高级~
但我阅读的时候，给我的感觉是，把你绕晕、把你劝退的感觉，相信大家都有同感，如图所示：

但既然是教程，那就得有教程的样子，其本质应该是简单而直接的。尽可能的简单直白一点，让读者直接能获取到关键的有价值的信息。什么是关键有价值的信息，那就是我作为读者想要直接能获得的信息。
看见过这么一句话：

“能用非技术的语言，简单的去描述一个复杂的技术问题，让一个初学者或者在校学生，甚至是门外汉都能够理解。”

颇受触动，这也是我写博客教程或写册子所追寻的目标。

流程图

我们开发搭建答题小程序，也是遵循软件开发的基本流程。大致如下图：

应用场景

不少企事业单位常常会举办一些主题知识竞赛，但是目前缺乏一套可靠、美观、简便的答题小程序。
因此我搭建了最新版的知识竞答小程序，提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品，帮助大家可以定期举办各类知识竞答活动。比如适用于网络安全知识答题、交通安全答题、消防安全知识宣传、安全生产知识学习等答题活动或有奖竞答。

相信不管你的需求是什么，本项目都能帮助到你。你可以从中获得微信小程序、云开发数据库、云函数、可视化CMS一整套闭环开发搭建技能，快速打造小而美的产品，并上线项目进行运营。

系统功能

通过需求分析，梳理提炼产品功能框架。
（1）小程序端主要包含七大页面，首页、注册登录页、个人中心页、答题页、答题结果页、积分排名页、关于程序页。
（2）后端云开发能力，主要包含云数据库、云存储、云函数。
（3）PC端CMS主要包含题库管理、用户管理、系统设置。

原型交互

通过产品功能框架，输出主功能的原型交互。

技术选型

基于微信原生小程序+云开发架构，采用前后端分离架构中的发送异步请求，能够进行高效开发。
（1）微信小程序使用了最新的前端技术栈，具有原生APP体验服务的小程序框架，小程序视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，响应的数据绑定，提供了丰富的基础组件和API。
（2）微信云开发提供了多个基础能力，比如数据库、存储、云函数等。开发者可在小程序内直接调用 API 进行非敏感数据的操作。数据库 API 包含增删改查的能力，使用 API 操作数据库只需三步：获取数据库引用、构造查询/更新条件、发出请求。
（3）内容管理是基于云开发搭建的可视化的内容管理平台，提供了丰富的内容管理功能，开通简单，独立于云控制台，无须编写代码即可使用，助力开发者提升开发效率。

实现思路

（1）角色设计：
①管理员：该类用户为小程序的最高内容管理者，可以是该小程序的运营单位，也可以是活动主办方等工作的部门。可以通过CMS管理题库、用户，通过小程序收集、统计用户及答题积分信息等。
②普通用户：用户可以通过该小程序答题学习、积分排名。
（2）基本实现：
①管理员可以通过PC端CMS内容管理系统对题库数据的增删查改或批量导出导入操作，对用户积分排名数据进行查询或者批量导出操作。
②用户操作微信小程序可以查看活动信息、积分排名等，也可以参与答题。这个实现思路是前端使用JavaScript通过云数据库的小程序端SDK操作云数据库并进行事务的执行。

项目目录

文件目录如图所示：

这里我对文件目录稍微加以说明一下吧。

├── project.config.json 项目配置文件
├── cloudfunctions 云函数目录
└── miniprogram 小程序目录
├── app.js 小程序全局入口文件
├── app.json 小程序全局配置文件
├── app.wxss 小程序全局样式文件
├── images 图片资源
├── style 公共样式
├── pages 页面目录
│ │── index 首页
│ │ ├── index.wxml 页面模板
│ │ ├── index.js 页面逻辑交互
│ │ ├── index.json 页面配置
│ │ └── index.wxss 页面样式
│ │── login 注册登录页
│ │── test 答题页
│ │── result 结果页
│ │── rank 积分排名页
│ │── my 个人中心页
│ └── about 关于程序页
└── utils 第三方工具